标签：canvas 封装 自定义 ec chartLineId 组件 data echarts

小程序中自定义 echarts 组件，实现复用的方法。

1下载echarts

官网下载

2 json 中引入echarts 组件

"usingComponents": {
        "ec-canvas": "../ec-canvas/ec-canvas"
    }

3 js 中引入echarts 组件及方法

import * as echarts from '../ec-canvas/echarts'
Component({
    /**
     * 组件的属性列表
     */
    properties: {
        chartLineId: { type: String },
        canvasId: { type: String },
        height: { type: String },
        options: { type: Object }
    },

    /**
     * 组件的初始数据
     */
    data: {
        ec: {
            lazyLoad: true, // 延迟加载
        },
    },
    lifetimes: {
        ready() {
            this[this.data.chartLineId] = this.selectComponent('#' + this.data.chartLineId);

            this.getData();
        },
        detached(e) {
            this[this.data.chartLineId] = null
            this[this.data.canvasId] = null
        },
    },

    /**
     * 组件的方法列表
     */
    methods: {
        getData() {
            this.initChart();
        },
        initChart() {
            this[this.data.chartLineId].init((canvas, width, height, dpr) => {
                const chart = echarts.init(canvas, null, {
                    width: width,
                    height: height,
                    devicePixelRatio: dpr // new
                })

                chart.setOption(this.getOption())
                return chart
            })
        },
        getOption() {
            var option = this.data.options;
            return option;
        },
    }
})

4 wxml

子组件

<view style="height: {{ height }};width:100%">
      <ec-canvas id="{{ chartLineId }}" canvas-id="{{ canvasId }}" ec="{{ec}}" options="{{options}}"></ec-canvas>
</view>

父组件

 <chart options="{{ options }}" canvasId="{{aa}}" chartLineId="{{bb}}" height="300px"></chart>

标签：canvas,封装,自定义,ec,chartLineId,组件,data,echarts
来源： https://blog.51cto.com/u_14785218/2877429

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。