carInsightSystem_wxapp/components/c-echars/index.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: {
    show: true,
    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
    }
  }
})