微信小程序中使用echarts

一、需求和问题

将使用uniapp开发的App转为微信小程序，在App中使用了echarts制作图表用于显示。

在使用hbuilderx运行到微信开发者工具过程中发现图表未显示

二、原因

在将app转为小程序过程中发现很多不兼容的样式问题，因此猜测app和小程序中使用echarts的引入和编写方法不同导致小程序不能显示图表

查看官方文档之后，发现微信小程序的显示，确实需要引入一个小组件

三、解决办法

1、下载官方文档提供的项目、将提供的组件复制到自己的项目中；

2、打开下载的项目，根据项目中引入组件的方法对组件进行引用，并根据需求编写相关的图表显示代码。

<template>
    <view>
        <uni-ec-canvas class="uni-ec-canvas" id="uni-ec-canvas" ref="canvas" canvas-id="uni-ec-canvas" :ec="ec">
        </uni-ec-canvas>
    </view>
</template>

<script>
    import uniEcCanvas from '@/uni-ec-canvas/uni-ec-canvas.vue'
    import * as echarts from '@/uni-ec-canvas/echarts'
    let chart = null
    export default {
        components: {
            uniEcCanvas
        },
        data() {
            return {
                ec: {
                    //是否懒加载
                    lazyLoad: true
                },
                onlineRate: ''
            }
        },
        created() {
            this.queryOnlineRate()
        },
        methods: {
            initChart(canvas, width, height, canvasDpr) {
                chart = echarts.init(canvas, null, {
                    width: width,
                    height: height,
                    devicePixelRatio: canvasDpr
                })
                canvas.setChart(chart)
                const data = [{ value: '', name: '设备在线率', itemStyle: {color:'#559de6'} },];
                    console.log(data)
                const option = {
                    series: [{
                        name: '上下班统计',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        data: data,
                        label: {
                            normal: {
                                show: false,
                            },
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                    }]
                };
                chart.setOption(option)
                return chart
            },
        },
        mounted() {
            this.$refs.canvas.init(this.initChart)
        }
    }
</script>
<style>

    .uni-ec-canvas {
        width: 100%;
        height: 500rpx;
        display: block;
        margin-top: 30rpx;
    }
</style>

此为相关图表的代码

修改之后通过hbuilder运行项目，能够看到图表已经显示出来了。

四、后续问题

写完之后过段时间再回来看，自己都看不懂，这都什么步骤啊，怎么官网上是这个，引用又是另外的东西。直接裂开

然后出现了以下解释内容链接