如何优雅的在小程序中使用EChart组件

EChart提供了微信小程序版本，扫描二维码预览demo

下载

---

地址：https://github.com/ecomfe/echarts-for-weixin
Echart-wxapp

下载下来，其中ec-canvas文件夹就是组件源码

---

使用

---

将ec-canvas组件放入小程序中，例如，components文件中，
在app.json中的pages下，增加‘pages/pie/pie’，小程序则会自动生成一下几个文件：pie文件夹、pie.index、pie.json、pie.wxml、pie.wxss

pie.json中配置：路径要正确

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

pie.html

<view class="container">
    <ec-canvas  ec="{{ ec }}"></ec-canvas>
</view>

pie.exss

.container {    需要给container设置宽高
    padding: 15rpx;
    margin: 15rpx 0rpx;
    width: 100%;
    height: 50%;
    box-sizing: border-box;
}

pie.js
官方demo使用方法

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 = {
        backgroundColor: "#ffffff",
        color: ["#37A2DA", "#32C5E9", "#67E0E3", "#91F2DE", "#FFDB5C", "#FF9F7F"],
        series: [{
            label: {
            normal: {
            fontSize: 14
        }
    },
    type: 'pie',
    center: ['50%', '50%'],
    radius: [0, '60%'],
    data: [
        {
            value: 55,
            name: '北京'
        }, {
            value: 20,
            name: '武汉'
        }, {
            value: 10,
            name: '杭州'
        }, {
            value: 20,
            name: '广州'
        }, {
            value: 38,
            name: '上海'
        }]
    };
    chart.setOption(option);
    return chart;
}

Page({

data: {
    ec: {
        onInit: initChart
    }
},

});

改版后

import * as echarts from '../../../components/ec-canvas/echarts';

function generatePieOptions (title) {
  const option = {
    title: {
      text: title,
      x: 'center'
    },
    series: [
      {
        label: {
          normal: {
            fontSize: 10,
            position: 'inner'
          }
        },
        type: 'pie',
        center: ['50%', '50%'],
        radius: [0, '30%'],
        data: []
      }]
  }
  return option;
}

const pieOption = generatePieOptions('使用权重');


function initChart (_pieOption) {
  return function (canvas, width, height) {
    const chart = echarts.init(canvas, null, {
      width: width,
      height: height
    });
    canvas.setChart(chart);
    chart.setOption(_pieOption);
    return chart;
  }
}


Page({
  data: {
    ec: {
      onInit: initChart(pieOption)
    }
  },

  initOptions: function () {
   pieOption.series[0].data = [
      { value: 55, name: '北京' },
      { value: 20, name: '武汉' },
      { value: 10, name: '杭州' },
      { value: 20, name: '广州' },
      { value: 38, name: '上海' }
    ];
  },

  onLoad: function (options) {
    this.initOptions();
  }
})

个人经验之谈，如有更好的欢迎提出.