微信小程序中使用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配置折线图
写在page或Component外面的：

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'
  },

在首页page—>index:index.json文件配置：

{
  "usingComponents": {
"v-lineChart":"../../components/lineChart/index"
  }
}

在首页 page—>index:index.wxml中使用：

 <view class="chart-container common-bk">
      <v-lineChart wx:if="{{!showDialog}}" />
    </view>

效果：