微信小程序插入Echarts折线图

应项目要求，需要在小程序插入折线图，并且折线图根据返回的数据动态渲染。

Echarts文档：https://echarts.baidu.com/tutorial.html#%E5%9C%A8%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts

自己配置的简单折线图方法（假数据）：

首先，去Git上下载为方便在小程序上使用ECharts的组件，https://github.com/ecomfe/echarts-for-weixin

下载成功后就可以在微信开发者工具中打开项目，里面有很多不同类型的数据图表，选择符合自己的即可进行属性配置，这里，我选择的是最简单的且很常用的折线数据图；

拷贝 ec-canvas 目录到自己的项目根目录下，打开需要绘制折线图的 index 文件：

首先，在index.json中进行配置，

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

其次，在index.wxml中引入 <ec-canvas> 组件,  

<view class="container">
  <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
</view>

再次，在index.js中书写方法，配置折线图属性，下面是按照我个人风格配置的折线图样式，如果还有其他属性需要配置可以参考ECharts配置项文档

// 根据ec-canvas添加位置，正确引入路径
import * as echarts from '../../ec-canvas/echarts';

let chart = null;

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

  var option = {
    //折线图配置项添加位置
  };
  chart.setOption(option);
  return chart;
}

Page({

  /**
   * 页面的初始数据
   */
  data: {
    ec: {
      onInit: initChart
    }
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {

  }
})

因为配置项太多，所以我进行了省略，如果需要参考研究可以去我的git上下载https://github.com/chenlun1000/ECharts01.git

项目是小程序项目，下载下来需要导入自己的appID才能运行。

~~~~~~~~~

下一篇文章会接入数据接口进行动态的渲染折线图，请继续关注！