小程序中使用echart的方法

闲来无事，帮朋友处理的一个小程序的问题，如有不足，还望大家多多指教和交流QQ:1066330447。

• 开发工具：微信开发者工具+vscode(为了方便写代码，其实开发者工具本身也是可以进行编辑)
• 最终效果图：页面显示
• 流程步骤
  1.引js(ec-canvae.js,echart.js,wx-canvas.js)为防止小程序过大导致提交不了，这里需要采用压缩版的js,或者根据需要选择精简版的js。
  
  2.新建一个小程序页面文件夹（包含js,wxml,wxcss），ec-canvas.wxml中的内容为
  <canvas class="ec-canvas" canvas-id="{{ canvasId }}" bindinit="init" bindtouchstart="{{ ec.disableTouch ? '' : 'touchStart' }}" bindtouchmove="{{ ec.disableTouch ? '' : 'touchMove' }}" bindtouchend="{{ ec.disableTouch ? '' : 'touchEnd' }}"> </canvas>
  ec-canvas.wxss的样式为
  width:100%;height:100%
  3.找到需要插件的页面，打开.wxml的文件 插入如下代码
  <ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{{ ec }}"></ec-canvas>
  4.页面的样式需要添加，否则页面无法显示

	ec-canvas {
	  width: 100%;
	  height: 300px;
	}

5.js中按小程序的语法正常编写逻辑，我们需要做的就是引用echart的函数部分，我这里新建一个initchart方法，代码大致方式如下

6.大致结构出来了，是不是有点小激动，现在主要看下自己写的那个函数也是就initChart方法中的部分（其实这些我们可以参照echart的文档），
7.重点来了，先初始化echart,不要问为什么先初始化，谁让我们用了别人的插件尼，不初始化不行…，

const chart = echarts.init(canvas, null, {
    width: width,
    height: height
  });

8.初始化完毕后我们需要调用，用什么调用尼，答案是canvas。我们是在canvas上画图嘛，所以这是必然的，代码如下

canvas.setChart(chart);

9.接下来我们开始设置echart的具体信息了，什么x轴，Y轴，各种线，颜色啊什么的，我们统一作为一个对象扔里面大概如下

10.以上完毕之后 我们就要去设置这个对象到echart里面，作为返回的对象到小程序的data上代码如下

chart.setOption(option);
  return chart;

全部代码如下

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

const app = getApp();

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

  var option = {
    color: ["#37A2DA", "#67E0E3", "#9FE6B8"],
    legend: {
      data: ['A', 'B', 'C'],
      top: 50,
      left: 'center',
      backgroundColor: 'red',
      z: 100
    },
    grid: {
      containLabel: true,
      left: '10px',
      padding:['5px']
    },
    tooltip: {
      show: true,
      trigger: 'axis',
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      // show: false
    },
    yAxis: {
    	name: '日活（万）',
    	nameTextStyle : {
        color: "red",
        padding : [0, 0, 10, 20],
    },
      axisLabel: {                   
             formatter: function (value, index) {           
              return value.toFixed(2) + '%';   //   
               }                
      },
      x: 'center',
      type: 'value',
      nameGap : 5 ,
      splitNumber: 5  ,
      splitLine: {
        lineStyle: {
          type: 'dolid'
        }
      }
      // show: false
    },
    series: [{
      name: 'A',
      type: 'line',
      smooth: false,
      data: [18, 19, 20, 21 , 22, 23, 24],
    }, {
      name: 'B',
      type: 'line',
      smooth: false,
      data: [12, 14, 13, 11, 12, 13, 12],
    }, {
      name: 'C',
      type: 'line',
      smooth: false,
      data: [15, 16, 17, 15, 16, 15, 16],
}]
  };

  chart.setOption(option);
  return chart;
}

Page({
  onShareAppMessage: function (res) {
    return {
      title: 'ECharts 可以在微信小程序中使用啦！',
      path: '/pages/index/index',
      success: function () { },
      fail: function () { }
    }
  },
  data: {
    ec: {
      onInit: initChart
    }
  },

  onReady() {
  }
});