🌟前言
哈喽小伙伴们，小程序的新星计划在这周也进入了尾声，回顾一个月输出小程序相关文章以来，收获颇多充实了很多；大家一定在项目需求当中遇到过需要使用 Echarts 和 地图组件 吧；今天这篇文章我会带领大家去实际的操作一下；话不多说，咱们直接开整！🤘
🌟效果展示
🌟使用Echarts
🌟Echarts官网
Echarts官方介绍微信小程序使用Echarts
🌟体验示例小程序
在微信中扫描下面的二维码即可体验 ECharts Demo：
🌟下载
为了兼容小程序 Canvas，我们提供了一个小程序的组件，用这种方式可以方便地使用 ECharts。
首先，下载 GitHub 上的 ecomfe/echarts-for-weixin 项目。
其中，ec-canvas 是我们提供的组件，其他文件是如何使用该组件的示例。
ec-canvas 目录下有一个 echarts.js，默认我们会在每次 echarts-for-weixin 项目发版的时候替换成最新版的 ECharts。如有必要，可以自行从 ECharts 项目中下载最新发布版，或者从官网自定义构建以减小文件大小。
🌟引入组件
在创建项目之后，可以将下载的 ecomfe/echarts-for-weixin 项目完全替换新建的项目，然后将修改代码；或者仅拷贝 ec-canvas 目录到新建的项目下，然后做相应的调整。
如果采用完全替换的方式，需要将 project.config.json 中的 appid 替换成在公众平台申请的项目 id。pages 目录下的每个文件夹是一个页面，可以根据情况删除不需要的页面，并且在 app.json 中删除对应页面。
如果仅拷贝 ec-canvas 目录，则可以参考 pages/bar 目录下的几个文件的写法。下面，我们具体地说明。
🌟创建图表
首先，在 pages/echarts 目录下新建一个echarts Page,会自动为我们生成echarts .js、echarts .json、 echarts .wxml、 echarts .wxss。
echarts.json 配置如下：
{ "usingComponents": { "ec-canvas": "../../ec-canvas/ec-canvas" } }
这一配置的作用是，允许我们在 pages/echarts/index.wxml 中使用 <ec-canvas> 组件。注意路径的相对位置要写对，如果目录结构和本例相同，就应该像上面这样配置。
echarts .wxml 中，我们创建了一个 组件，内容如下：
其中 ec 是一个我们在 echarts.js 中定义的对象，它使得图表能够在页面加载后被初始化并设置。echarts.js 的结构如下：
<!--pages/echarts/echarts.wxml--> <view class="container"> <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas> </view>
echarts.wxss 配置如下：
/* pages/echarts/echarts.wxss */ ec-canvas { width: 100%; height: 100%; }
echarts.js 配置如下：
// pages/echarts/echarts.js import * as echarts from '../../ec-canvas/echarts'; let chart = null; function initChart(canvas, width, height, dpr) { chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr // new }); canvas.setChart(chart); var option = { tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器，坐标轴触发有效 type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' }, confine: true }, legend: { data: ['热度', '正面', '负面'] }, grid: { left: 20, right: 20, bottom: 15, top: 40, containLabel: true }, xAxis: [ { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { color: '#666' } } ], yAxis: [ { type: 'category', axisTick: { show: false }, data: ['汽车之家', '今日头条', '百度贴吧', '一点资讯', '微信', '微博', '知乎'], axisLine: { lineStyle: { color: '#999' } }, axisLabel: { color: '#666' } } ], series: [ { name: '热度', type: 'bar', label: { normal: { show: true, position: 'inside' } }, data: [300, 270, 340, 344, 300, 320, 310], itemStyle: { // emphasis: { // color: '#37a2da' // } } }, { name: '正面', type: 'bar', stack: '总量', label: { normal: { show: true } }, data: [120, 102, 141, 174, 190, 250, 220], itemStyle: { // emphasis: { // color: '#32c5e9' // } } }, { name: '负面', type: 'bar', stack: '总量', label: { normal: { show: true, position: 'left' } }, data: [-20, -32, -21, -34, -90, -130, -110], itemStyle: { // emphasis: { // color: '#67e0e3' // } } } ] }; chart.setOption(option); return chart; } Page({ /** * 页面的初始数据 */ data: { ec: { onInit: initChart } }, /** * 生命周期函数--监听页面加载 */ onLoad(options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady() { setTimeout(function () { // 获取 chart 实例的方式 // console.log(chart) }, 2000); } })
这对于所有 ECharts 图表都是通用的，用户只需要修改上面 option 的内容，即可改变图表。option 的使用方法参见 ECharts 配置项文档。对于不熟悉 ECharts 的用户，可以参见 5 分钟上手 ECharts 教程。
完整的例子请参见 ecomfe/echarts-for-weixin 项目。
🌟暂不支持的功能
ECharts 中的绝大部分功能都支持小程序版本，因此这里仅说明不支持的功能，以及存在的问题。
以下功能尚不支持，如果有相关需求请在 issue 中向我们反馈，对于反馈人数多的需求将优先支持：
Tooltip
图片
多个 zlevel 分层
此外，目前还有一些 bug 尚未修复，部分需要小程序团队配合上线支持，但不影响基本的使用。已知的 bug 包括：
安卓平台：transform 的问题（会影响关系图边两端的标记位置、旭日图文字位置等）
iOS 平台：半透明略有变深的问题
iOS 平台：渐变色出现在定义区域之外的地方
🌟使用地图
🌟map组件
map组件 提供了地图展示、交互、叠加点线面及文字等功能，同时支持个性化地图样式，可结合地图服务 API 实现更丰富功能。
更多map组件配置项请查看 官方文档
🌟创建图表
首先，在 component/map 目录下新建一个map Component,会自动为我们生成map.js、map.json、 map.wxml、 map.wxss。
map.wxml
<map id="map" controls longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}" scale="14" style="width: 100%;height: 100%;"></map>
map.wxss
page{ width: 100%; height: 100%; }
map.js
Component({ /** * 组件的属性列表 */ properties: { }, /** * 组件的初始数据 */ data: { markers: [], latitude: '', longitude: '' }, lifetimes: { // 生命周期函数，可以为函数，或一个在methods段中定义的方法名 attached: function () { console.log('QQmap'); }, moved: function () {}, detached: function () {}, }, // 生命周期函数，可以为函数，或一个在methods段中定义的方法名 attached: function () {}, // 此处attached的声明会被lifetimes字段中的声明覆盖 ready: function () { this.getLocation() }, pageLifetimes: { // 组件所在页面的生命周期函数 show: function () {}, hide: function () {}, resize: function () {}, }, /** * 组件的方法列表 */ methods: { //获取位置 getLocation() { this.mapCtx = wx.createMapContext('myMap') // 调用接口 wx.getLocation({ type: 'gcj02', success: (res) => { // console.log("res", res) if (res) { this.setData({ latitude: res.latitude, longitude: res.longitude, markersStatus: true, markers: [{ id: 1, latitude: res.latitude, longitude: res.longitude, // 这个zIndex一定要有，并且不能是一个固定值，否则会出现标记点和label，callout层级混乱 zIndex: 1 }] }) } else { wx.showToast({ title: '定位失败', icon: 'none', duration: 1500 }) } // qqmapsdk.reverseGeocoder({ // success: (res) => { // console.log('=============', res) // }, // }); }, fail(err) { wx.hideLoading({}); console.log("asafasfs", err) // wx.showToast({ // title: '定位失败', // icon: 'none', // duration: 1500 // }) setTimeout(function () { // wx.navigateBack({ // delta: 1 // }) }, 1500) } }) } } })
🌟写在最后
这篇文章给大家讲解了一下在小程序当中如何引入Echarts图表和地图组件，后续会持续更多小程序知识与API，尽请期待。各位小伙伴让我们 let’s be prepared at all times！
