微信小程序，实现Echarts，并获取数据渲染

1、ehcats组件库可自行到echats官网下载，下载好之后放到你的项目包里面。

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

2、echarts.json 部分

首先在json文件里引入echarts组件

{ "usingComponents": { "ec-canvas": "../../ec-canvas/ec-canvas" //这里使用了相对路径 } }

2、echarts.html 部分

<view class="container">
  <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
<!-- 在这引入echarts组件标签 -->
</view>

这里ec-canvas绑定id就可以使用echarts组件

3、echarts.css 部分

.container{
  width: 100%; 
  height: 520rpx; 
}
.ec-canvas{
  width: 100%;
  height: 520rpx;
}

组件ec-canvas默认宽高100%，它的宽高大小取决于它的父元素view标签

4、echarts.js 部分

import * as echarts from '../../ec-canvas/echarts';
// chart为图表实例，记得要声明为全局的
var chart = null
function initChart(canvas, width, height, dpr) {
      chart = echarts.init(canvas, null, {
      width: width,
      height: height,
      devicePixelRatio: dpr
		});
      chart.showLoading() //显示Loading
      canvas.setChart(chart);
      var option = {
      title: {
      text: '获取数据中',
      left: 'center'
      },
      };
      chart.setOption(option);
      return chart;
}
Page({
      data: {
      ec: {
      onInit: initChart
      }
      },
      onLoad() {},
      getData() {
          //这里是模拟的数据请求，项目中请使用wx.request替换掉setTimeouot
          setTimeout(() => {
          chart.hideLoading() //隐藏Loading
          chart.setOption({
          title: {
          text: '获取数据完成',
          },
          legend: {
          data: ['A', 'B', 'C'],
          top: 50,
          left: 'center',
          backgroundColor: 'red',
          z: 100
          },
          grid: {
          containLabel: true
          },
          tooltip: {
          show: true,
          trigger: 'axis'
          },
          xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          // show: false
          },
          yAxis: {
          x: 'center',
          type: 'value',
          splitLine: {
          lineStyle: {
          type: 'dashed'
          }
          }
          // show: false
          },
          series: [{
          name: 'A',
          type: 'line',
          smooth: true,
          data: [18, 36, 65, 30, 78, 40, 33]
          }, {
          name: 'B',
          type: 'line',
          smooth: true,
          data: [12, 50, 51, 35, 70, 30, 20]
          }, {
          name: 'C',
          type: 'line',
          smooth: true,
          data: [10, 30, 31, 50, 40, 20, 10]
          }]
          })
      }, 1000);
},
   /**
   * 生命周期函数--监听页面初次渲染完成  根据项目需求在不同周期调用
   */
  onReady() {
    //获取数据
    this.getData()
    },
});

5、最终的效果图如下：

6、最后总结一下JS思路，首先import引入echats组件库，在data中定义好key，然后进行echats的初始化，在初始化中需要echats组件的配置信息(在echats官网示例里找)，最后在生命周期函数中进行初始化函数的调用，把必要的参数传进去就可以出效果了。