小程序使用echarts记录(二)

前言

上一篇文章介绍了简单的小程序使用echarts画图，这一篇介绍一下，如何在一个小程序页面完成多个图表

---

一、项目需求

一个页面需要展示2个图表，图表数据是请求后台得到的

二、改造步骤

1.index.wxml用循环

代码如下,添加了tuData和titleData两个属性：

<block wx:for="{{chartsArr}}">
        <view class="chart-view" >
          <ec-canvas id="mychart-dom-bar" class="mychart" canvas-id="mychart-bar" tuData="{{item.data}}" titleData="{{item.name}}"ec="{{ ec }}"></ec-canvas>
        </view>
</block>

2.index.js中改造initChart函数,将data和title传入函数中

代码如下：

function initChart(canvas, width, height,data, title, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // 像素
  });
  canvas.setChart(chart);

  var option = {
    title: {
      text: title,
      left: 'center'
    },
    ...//这里省略其他配置的内容
    data:data
  };
  chart.setOption(option);
  return chart;
}

3.改造ec-canvas.js文件（不知道这个文件在哪的小伙伴看一下上一篇文章），将tuData和titleData写入

代码如何一共需要修改3个地方

• 第一处大约在40行

properties: {
    canvasId: {
      type: String,
      value: 'ec-canvas'
    },

    ec: {
      type: Object
    },
    tuData: {//这是新增的参数
      type: Object
    },
    titleData: {//这是新增的参数
      type: String
    },
    forceUseOldCanvas: {
      type: Boolean,
      value: false
    }
  }

• 第二处大约在130行

var query = wx.createSelectorQuery().in(this);
      query.select('.ec-canvas').boundingClientRect(res => {
        if (typeof callback === 'function') {
          this.chart = callback(canvas, res.width, res.height, canvasDpr);
        }
        else if (this.data.ec && typeof this.data.ec.onInit === 'function') {
          this.chart = this.data.ec.onInit(canvas, res.width, res.height, this.data.tuData, this.data.titleData,canvasDpr);
        }
        else {
          this.triggerEvent('init', {
            canvas: canvas,
            width: res.width,
            height: res.height,
            canvasDpr: canvasDpr // 增加了dpr，可方便外面echarts.init
          });
        }
      }).exec();

• 第三处大约168行

 if (typeof callback === 'function') {
            this.chart = callback(canvas, canvasWidth, canvasHeight, canvasDpr)
          } else if (this.data.ec && typeof this.data.ec.onInit === 'function') {
            this.chart = this.data.ec.onInit(canvas, canvasWidth, canvasHeight, this.data.tuData,this.data.titleData,canvasDpr)
          } else {
            this.triggerEvent('init', {
              canvas: canvas,
              width: canvasWidth,
              height: canvasHeight,
              dpr: canvasDpr
            })
          }

4.如此如此，这般这般，就可以了

基于互联网思维，先实现需求，后期慢慢优化，代码的性能我还没测试，欢迎同志们帮忙指正

本人先去写点bug 不然周报没法搞定