更新：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）