uni-app引用Echarts

因为项目分为web端和小程序端，而echart又能满足项目中变态的效果，web端好解决，小程序端被坑了好长时间，下面记录完整过程：

1、创建一个空的文件夹如：test-echarts。
2、进入 test-echarts 打开命令行工具，执行 npm init 一路回车即可。
3、下载第三方库：

npm install echarts mpvue-echarts --save

4、进入 node_modules 目录，里面的三个目录：echarts、mpvue-echats 、zrender 就是我们需要的第三方库。
5、将刚才下载的node_modules里面的三个文件夹拷贝到项目根目录，最终项目截图如下：


6、在需要显示的地方加上：

<div class="wrap">
    <mpvue-echarts class="ec-canvas" @onInit="onInit" canvasId="line" ref="lineChart" />
</div>

7、在页面中加入下面的代码：

import * as echarts from 'echarts'  
import mpvueEcharts from 'mpvue-echarts'
function lineInit(e) {
    let { width, height } = e;
    let canvas = this.$refs.lineChart.canvas;
    echarts.setCanvasCreator(() => canvas);
    let lineChart = echarts.init(canvas, null, {
        width: width,
        height: height
    });
    canvas.setChart(lineChart);
    var lineOption =  {
        title: {
            text: '某站点用户访问来源',
            subtext: '纯属虚构',
            x: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} {b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            bottom: '10%',
            data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
        },
        series: [{
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '40%'],
            data: [{
                    value: 335,
                    name: '直接访问'
                },
                {
                    value: 310,
                    name: '邮件营销'
                },
                {
                    value: 234,
                    name: '联盟广告'
                },
                {
                    value: 135,
                    name: '视频广告'
                },
                {
                    value: 1548,
                    name: '搜索引擎'
                }
            ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }]
    };
    lineChart.setOption(lineOption);
    this.$refs.lineChart.setChart(lineChart);
}
export default {
    components: {
        mpvueEcharts
    },
    data() {
        return {
            state:0,
            //初始化图表
            echarts,
            onInit: lineInit
        }
    },
    methods: {
        openHelpPopup(){
            this.$refs.helpPopup.open()
        },
        closeHelpPopup(){
            this.$refs.helpPopup.close()
        },
    }
}

8、找到mpvue-echarts/src/echarts.vue，换成下面的代码：

<template>
    <canvas v-if="canvasId" class="ec-canvas" :id="canvasId" :canvasId="canvasId" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd" @error="error"></canvas>
</template>

<script>
import WxCanvas from './wx-canvas';
export default {
    props: {
        canvasId: {
            type: String,
            default: 'ec-canvas'
        },
        lazyLoad: {
            type: Boolean,
            default: false
        },
        disableTouch: {
            type: Boolean,
            default: false
        },
        throttleTouch: {
            type: Boolean,
            default: false
        }
    },
    // #ifdef H5
    mounted() {
        if (!this.lazyLoad) this.init();
    },
    // #endif
    // #ifndef H5
    onReady() {
        if (!this.lazyLoad) this.init();
    },
    // #endif
    methods: {
        setChart(chart){
            this.chart = chart
        },
        init() {
            const { canvasId } = this;
            this.ctx = wx.createCanvasContext(canvasId, this);
            this.canvas = new WxCanvas(this.ctx, canvasId);
            const query = wx.createSelectorQuery().in(this);
            query
                .select(`#${canvasId}`)
                .boundingClientRect(res => {
                    if (!res) {
                        setTimeout(() => this.init(), 50);
                        return;
                    }
                    this.$emit('onInit', {
                        width: res.width,
                        height: res.height
                    });
                })
                .exec();
        },
        canvasToTempFilePath(opt) {
            const { canvasId } = this;
            this.ctx.draw(true, () => {
                wx.canvasToTempFilePath({
                    canvasId,
                    ...opt
                });
            });
        },
        touchStart(e) {
            const { disableTouch, chart } = this;
            if (disableTouch || !chart || !e.mp.touches.length) return;
            const touch = e.mp.touches[0];
            chart._zr.handler.dispatch('mousedown', {
                zrX: touch.x,
                zrY: touch.y
            });
            chart._zr.handler.dispatch('mousemove', {
                zrX: touch.x,
                zrY: touch.y
            });
        },
        touchMove(e) {
            const { disableTouch, throttleTouch, chart, lastMoveTime } = this;
            if (disableTouch || !chart || !e.mp.touches.length) return;
            if (throttleTouch) {
                const currMoveTime = Date.now();
                if (currMoveTime - lastMoveTime < 240) return;
                this.lastMoveTime = currMoveTime;
            }
            const touch = e.mp.touches[0];
            chart._zr.handler.dispatch('mousemove', {
                zrX: touch.x,
                zrY: touch.y
            });
        },
        touchEnd(e) {
            const { disableTouch, chart } = this;
            if (disableTouch || !chart) return;
            const touch = e.mp.changedTouches ? e.mp.changedTouches[0] : {};
            chart._zr.handler.dispatch('mouseup', {
                zrX: touch.x,
                zrY: touch.y
            });
            chart._zr.handler.dispatch('click', {
                zrX: touch.x,
                zrY: touch.y
            });
        }
    }
};
</script>

<style scoped>
.ec-canvas {
    width: 100%;
    height: 100%;
    flex: 1;
}
</style>

至此，应该在小程序就能显示了。


部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！