vue-cli 中引入 ECharts

更新：2022-3-8

安装好vue-cli后，cd 到项目目录下，npm 安装ECharts

npm install echarts --save

安装好后就正式开始:

方式一

在 src >> assets 下新建名为 js 的文件夹，并在该文件夹下创建 myCharts.js 文件
这个文件用来写所有的 ECharts 图表方法都封装在这里

import echarts from 'echarts'
let install = function(Vue) {
    Object.defineProperties(Vue.prototype, {
        $chart: {
            get() {
                return {
                    //一个简单的示例
                    first_bar: function (id) {
                        this.chart = echarts.init(document.getElementById(id));
                        this.chart.clear();
                        const optionData = {
                            title: {
                                text: 'ECharts 入门示例'
                            },
                            tooltip: {},
                            xAxis: {
                                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
                            },
                            yAxis: {},
                            series: [{
                                name: '销量',
                                type: 'bar',
                                data: [5, 20, 36, 10, 10, 20]
                            }]
                        };
                        this.chart.setOption(optionData);
                    },
                }
            }
        }
    })
}
export default {
    install
}

在 main.js 文件内引入刚刚所创建的文件

import myCharts from '@/assets/js/myCharts' //引入eCharts 文件
Vue.use(myCharts)

在需要引入ECharts图表的插件页，调用已封装的方法，在页面上画出图表

<template>
    <div id="chart"></div>
</template>

<script>
export default {
    name: 'Home',
    mounted() {
        this.$chart.first_bar('chart'); //方法调用
    }
}
</script>

<style scoped>
    #chart {
        width: 300px;
        height: 300px;
    }
</style>

最后，在页面上就可以看到画好的图表了

示例截图.png

方式二（推荐）

不同于方式一，这种方式不需要新建单独文件，也不需要在main.js中引入，只需要在需要编辑图表的组件中，如下：

import echarts from 'echarts' //引入echarts
export default {
    name: 'comRadar', 
    data(){
        return {
            myChart: {},
        }
    },
    methods:{ // 方法
        init() {
            /**
             * 注意：当组件被多次调用，控制台会报错，
             * 原因：组件被多次渲染 document.getElementById 重复获取dom
             * 思路：通过ref获取当前组件下指定的 dom 节点
             * 举例：echarts.init(this.$refs.radarCase.querySelector('.radar_case))
             */
            this.myChart = echarts.init(document.getElementById("radar_case"));
            window.addEventListener('resize', this.resize)
        },
        sizeChange(){
            this.myChart.resize();
        }
    },
    mounted() {// 生命周期钩子，这里不能用 created
        this.init();
        let optionData = {
            // 图表数据（略）
        };
        this.myChart.setOption(optionData);
    },
    beforeDestroy() {
        // 移除监听
        window.removeEventListener('resize', this.resize);
    },
}

这样就可以了，同时这种方式，图表大小可以根据窗口改变大小。

EChart 5.x 变化

EChart 更新到5后，使用上边的引入方式会报错！！！请改用下边的方式引入^_

import * as echarts from "echarts";

页面数据改变地图显示移位

有时候经常遇到，地图引入，在第一页的时候将地图大小改变，当地图数据切换时，新的地图位置移位，这是因为只是改变了地图数据，地图并没有重新生成。

解决办法：

//在setOption()方法中添加true，表示重新绘制。
this.chart.setOption(this.setOption(),true)

自定义地图数据网址
 图表实例网址（官网提供，2022.2.15 以暂停使用）
PPChart（复刻 Make A Pie）
ChartLib（复刻 Make A Pie）

最后编辑于：2022.11.10 15:22:59