// 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 }, flocShow:{ type:Boolean, value:false }, 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 } } })