【微信小程序使用echarts】

微信小程序使用echarts

1、实现原理

将echarts的option作为页面data对象的数据，利用this.setData更改option对象引起图表渲染。我们都知道，微信小程序使用的是ec-canvas个人使用的ec-canvas包实现echarts绘制，在这里我将ec-canvas放入我的项目中，自定义了一个通用的echarts渲染组件，监听父级页面对data中option对象修改的变化，图表就会进行刷新，这样就实现了echarts的绘制。

2、具体实现

2.1 下载ec-canvas文件

这个操作简单，不在过多赘述

2.2 本人的通用自定义组件custom-echarts文件

为了避免造成代码冗余，多次对多个图标进行初始化渲染，我单独创建了一个渲染组件，作为通用渲染组件。
custom-echarts自定义初始化echarts 再渲染组件

2.2.1自定义组件js内容

// pages/components/custom-echarts/index.js
import * as echarts from '../../../ec-canvas/echarts'  //将ec-canvas文件中的echarts对象引进来
Component({
  /**
   * 组件的属性列表
   */
  properties: {  // 
    chartId: {     //  图表id
      type: String
    },
    canvasId: { type: String },      // canvas 的id
    height: { type: String },   	  // 图表的高度
    showChart: {   					 // 控制图表的显示时机
      type: Boolean
    },
    chartOption: {                   // 图表option对象
      type: Object,
      observer: function () {   // 监听图表option的变化，实现动态渲染
        this[this.data.chartId] = this.selectComponent('#' + this.data.chartId)
        this.initChart()
      }
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    ec: {
      lazyLoad:true  // 设置图表懒加载
    }
  },
  lifetimes: {// 定义组件声明周期函数,在特定时机触发
    // ready() { // 组件加载完成--初始化echarts
    //   this[this.data.chartId] = this.selectComponent('#' + this.data.chartId)
    //   this.initChart()
    // },
    detached(e) {      // 组件移除
      this[this.data.chartId] = null
      this[this.data.canvasId] = null
      this[this.data.showChart]=false
  },
},
  /**
   * 组件的方法列表
   */
  methods: {
    initChart() {
      this[this.data.chartId]?.init((canvas, width, height, dpr) => {
        const chart = echarts.init(canvas, null, {    // 配置图表的配置项
          width:width,   // 宽度
          height: height,   // 高度
          devicePixelRatio:dpr// 像素
        })
        chart.setOption(this.getOption())
        return chart
      })
    },
    getOption() {
      var chartOption = this.data.chartOption
      return chartOption
    }
  }
})

2.2.2 自定义组件json文件

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

2.2.3 自定义组件wxml

<!--pages/components/custom-echarts/index.wxml-->
<view style="height: {{ height }};width:100%">
  <ec-canvas force-use-old-canvas="{{true}}" wx:if="{{showChart}}" id="{{ chartId }}" canvas-id="eventBar" ec="{{ec}}" options="{{chartOption}}"></ec-canvas>
</view>

2.2.4 自定义组件wxss

ec-canvas {
    width: 100%;
    height: 100%;
}
canvas {
    width: 100%;
    height: 100%;
}

3、具体使用

在我们的页面json配置文件中

  "usingComponents": {
    "custom-echarts":"/pages/components/custom-echarts"
  },

在页面wxml中

 <custom-echarts showChart="{{showChart}}" canvasId="eventbar-canvas" chartId="eventbar" chartOption="{{chartOption}}" height="100%"></custom-echarts>
 // showChart   控制图表显示时机
 // canvasId    绘制图表canvas的id      
 // chartid      图表id
 // chartOption   echart中配置项option对象数据

我的js

// pages/operate-maintence/index.js
const app = getApp();
import { getOpearteStatistics } from '../../api/operate';  // 这是我的图表数据接口
import chart from '../../pages/components/chart/operate-chart'  // 我的echarts option对象
Page({

  /**
   * 页面的初始数据
   */
  data: {
    chartOption: chart,  //   option对象作为data数据
    showChart:false  //    图表出现时机控制
  },
  /**
   * 生命周期函数--监听页面加载
   */
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  async init_Chart() {  // 接口调用
    const res = await getOpearteStatistics()
    //  下面是针对个人需求  对option内对象值的修改
    const inspectionTaskCount ='chartOption.series[0].data[0].value'
    const workPlanTaskCount ='chartOption.series[0].data[1].value'
    const maintenanceTaskCount ='chartOption.series[0].data[2].value'
    const patrolTaskCount ='chartOption.series[0].data[3].value'
    this.setData({
      [inspectionTaskCount]:res?.data?.inspectionTaskCount || 0,
      [workPlanTaskCount]:res?.data?.workPlanTaskCount || 0,
      [maintenanceTaskCount]:res?.data?.maintenanceTaskCount || 0,
      [patrolTaskCount]: res?.data?.patrolTaskCount || 0,
      showChart:true
    })
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    wx.removeStorageSync('currTemplateType')
    if (typeof this.getTabBar === 'function' &&
      this.getTabBar()) {
      this.getTabBar().setData({
        selected: 1,
        show: true
      })
    }
    this.init_Chart()   
  }
})