可以与后台数据交互
一、正常流程（抄Echart官方的）
1、index.json 配置如下：
{ "usingComponents": { "ec-canvas": "../../ec-canvas/ec-canvas" } }2、index.wxml 中，创建了一个 组件，内容如下：
<ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec='{{ec}}'></ec-canvas>
3、其中 ec 是一个我们在 index.js 中定义的对象，它使得图表能够在页面加载后被初始化并设置。index.js 的结构如下：
import * as echarts from '../../ec-canvas/echarts'; function initChart(canvas, width, height) { const chart = echarts.init(canvas, null, { width: width, height: height }); canvas.setChart(chart); var option = { ... }; chart.setOption(option); return chart; } Page({ data: { ec: { onInit: initChart } } }); 这对于所有 ECharts 图表都是通用的，用户只需要修改上面 option 的内容，即可改变图表。option 的使用方法参见 ECharts 配置项文档。对于不熟悉 ECharts 的用户，可以参见 5 分钟上手 ECharts 教程。
完整的例子请参见 ecomfe/echarts-for-weixin 项目。
2、通过后台数据进行渲染
1、初始化
import * as echarts from '../../ec-canvas/echarts'; // 初始化图表 var charto = null; var weightCanvasone = null; function initCharto(canvas, width, height) { charto = echarts.init(canvas, null, { width: width, height: height }); canvas.setChart(charto); weightCanvasone = canvas; return charto; } Page({ data:{ eco: { onInit : initCharto }, } onLoad:{ //由于我的加载顺序原因，出了这个判断。可以自行修 } }) 2、获取数据，渲染
wx.request({ url: '后台URL', method: 'POST', data: { interId: '30006', version: 1, authKey: wx.getStorageSync('authKey'), method: 'w-chart', }, success: function (res) { console.info('====== w-chart ======') console.info(res) if (res.data.status == '00') { that.setData({ lastWeight: res.data.lastWeight, wChart: res.data.chart }) //数据处理 var x = []; var y = []; for (let i = 0; i < that.data.wChart.length; i++) { x[i] = that.data.wChart[i][0]; y[i] = that.data.wChart[i][1]; } var optionone = { //数据在这里渲染 }; that.data.chart1 = optionone; that.drawCharto = () => { charto.setOption(that.data.chart1); weightCanvasone.setChart(charto); } } } }) 三、总结
1、希望大家先用官方配置一遍再尝试使用后台数据渲染，
2、「 option 」图表配置需要后台数据，所以需要将其独立出来处理。
对你有帮助的话，记得点赞收藏，你的支持是对我最大的鼓励~！
文章来源: 小程序EChart