微信小程序中使用Echarts（折线图）

一、微信中使用 Echars
1.找到GitHub上的DEMO下载链接，官网有详细的使用步骤
官网：http://echarts.baidu.com/
github：https://github.com/ecomfe/echarts-for-weixin

2.下载完成后将解压好的ec-canvas文件夹放到项目根目录里或者components目录下：

3.在你要用到的.json里配置： 比如index.json （lineChart文件里-是自己封装的折线图组件）

{
    "component": true,
    "usingComponents": {
        "ec-canvas":"../../components/ec-canvas/ec-canvas"
    }
}

然后在index.wxml中引入 组件,

  <view class="pie-charts">
  <view class="lengendTitle">
  <image src="{{tipImg}}" class="tipLineImg" />
  <text class="tipTitle">时/分</text>
  </view>
    <ec-canvas
      id="mychart-dom-bar"
      canvas-id="mychart-bar"
      ec="{{ ec }}"
    ></ec-canvas>
  </view>

4 . 在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 = {
    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);
  return chart;
}

data中定义

data: {
    ec: {
      onInit: initChart
    },
    tipImg: '../../img/lineTip.png'
  },

效果：