微信小程序使用Echarts全步骤

---

要有遥不可及的梦想，也要有脚踏实地的本事。----------- Grapefruit.Banuit Gang(香柚帮)

---

今天分享一个小程序使用Echarts插件的步骤，下面开始讲解：

1、首先要想在微信小程序中使用Echarts，就要先去下载Echarts包并引入，

              下载地址：https://github.com/ecomfe/echarts-for-weixin

              引入与pages同级

2、你要在哪一个页面中使用Echarts,就要在当前页面的json文件中做一下配置：

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

3、配置完成后就可以在页面中使用了

<view class="containers">
    <ec-canvas id="mychart-dom-pie" canvas-id="mychart-pie" ec="{{ ec }}" bind:init="echartInit"></ec-canvas>
</view>

.containers{
  height: 600rpx;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 20rpx;
}
ec-canvas {
  width: 100%;
  height: 100%;
}

import * as echarts from '../../ec-canvas/echarts';
var chart = null;

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

  /**
   * 页面的初始数据
   */
  data: {
    ec: {}
  },
  echartInit(e) {
    var option = {
      backgroundColor: "#ffffff",
      color: ["#CC0000", "#32C5E9", "#67E0E3", "#91F2DE", "#FFDB5C"],
      series: [{
        type: 'pie',
        center: ['50%', '50%'],
        radius: [0, '60%'],
        data: [{
          value: 55,
          name: '虎山牌'
        }, {
          value: 20,
          name: '天马牌'
        }, {
          value: 10,
          name: '虎球牌'
        }, {
          value: 20,
          name: '青山虎牌'
        }, {
          value: 38,
          name: '光宇牌'
        }, ],
        itemStyle: {
          emphasis: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 2, 2, 0.3)'
          }
        }
      }]
    };
    initChart(e.detail.canvas, e.detail.width, e.detail.height, option);
  }
})

这样就可以了，当然这只是初始化的图表，如果不需要改变的，到这应该就够用了，如果需要动态的，我们也只需要改变option得值即可，例如：

在页面中写一个按钮，点击这个按钮我们要改变图表，就可以这样写

//点击按钮修改图表
update() {
    var option = chart.getOption();
    console.log(option)
    var option = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
      }]
    };
    chart.setOption(option, true);
  },

好了，就是这些，很简单，当然也不止这一种方法，还有其他的方法，有需要的可以在下方留言，希望能帮助到一些朋友！