小程序使用echarts封装成自定义组件的实现方法以及踩坑记录

这是我参与11月更文挑战的第7天，活动详情查看：2021最后一次更文挑战

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

已经有人在GitHub上发布了echarts的小程序版本。echarts微信小程序版下载地址

1. 安装echarts

我们将下载好的文件中的ec-canvas目录放到小程序项目的根目录中（如下图所示）。然后在需要引入的Page中的JSON,js引入（如下代码块所示）。

2. json 中引入echarts 组件

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

3. js 中引入echarts 组件及方法

import * as echarts from '../ec-canvas/echarts'

4.封装图表组件,建立ec-canvas，并且设置它的高度

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

5.图表初始化

Component({
    /**
     * 组件的属性列表
     */
    properties: {
        chartLineId: { type: String },
        canvasId: { type: String },
        height: { type: String },
        options: { type: Object }
    },

    /**
     * 组件的初始数据
     */
    data: {
        ec: {
            lazyLoad: true, // 设置echarts延时加载
        },
    },
    lifetimes: {
        ready() {
            this[this.data.chartLineId] = this.selectComponent('#' + this.data.chartLineId); //通过`id`获取echarts组件

            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;
        },
    }
})

6.异步请求数据并渲染

父组件使用方法，通过异步请求获取图表数据，得到数据之后再通过 this.setData 渲染图表。

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

提示： ec-canvas 目录下有一个 echarts.js，它不是最新版本。我建议去官网在线定制。定制版的体积会更小，况且小程序本来就限制代码体积，然后将自己定制的echarts.js替换就可以了。

小程序 echarts 使用踩坑记录

1、echarts不可以配合scroll-view+tabbar使用，在tabbar切换的时候，如果echarts在scroll-view中，切换后会消失。

2、自定义的tabbar中，切换tabbar时，对echarts需使用wx:if进行显示隐藏处理，否则切换后也会消失。比如下图：

3、echarts 的所有父级元素都不能有定位，否则在测试时就会出现echarts不随屏幕滚动的bug。overflow：auto 也不行。

4、echarts的层级最高 如果自定义的tabar 要使用 cover—view，不然echarts会显示在tabar的上面

5、自定义tabbar中，建议设置延迟1秒左右再通过id获取echarts组件，渲染数据。否则会寻找不到echarts，小程序报错。