小程序`EChart`

可以与后台数据交互

一、正常流程（抄Echart官方的）

1、index.json 配置如下：

{
  "usingComponents": {
    "ec-canvas": "../../ec-canvas/ec-canvas"
  }
}

2、index.wxml 中，创建了一个 <ec-canvas> 组件，内容如下：

<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 项目。

二、通过后台数据进行渲染

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、获取数据，渲染

1530086019040.png

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
          })
            //数据处理，将数据分为X轴数据，和
            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`

推荐阅读更多精彩内容