更新：2022-3-8
安裝好vue-cli后，cd 到項(xiàng)目目錄下，npm 安裝ECharts
npm install echarts --save
安裝好后就正式開(kāi)始:
方式一
在 src >> assets 下新建名為 js 的文件夾痴怨，并在該文件夾下創(chuàng)建 myCharts.js 文件
這個(gè)文件用來(lái)寫(xiě)所有的 ECharts 圖表方法都封裝在這里
import echarts from 'echarts'
let install = function(Vue) {
Object.defineProperties(Vue.prototype, {
$chart: {
get() {
return {
//一個(gè)簡(jiǎn)單的示例
first_bar: function (id) {
this.chart = echarts.init(document.getElementById(id));
this.chart.clear();
const optionData = {
title: {
text: 'ECharts 入門(mén)示例'
},
tooltip: {},
xAxis: {
data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']
},
yAxis: {},
series: [{
name: '銷(xiāo)量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
this.chart.setOption(optionData);
},
}
}
}
})
}
export default {
install
}
在 main.js 文件內(nèi)引入剛剛所創(chuàng)建的文件
import myCharts from '@/assets/js/myCharts' //引入eCharts 文件
Vue.use(myCharts)
在需要引入ECharts圖表的插件頁(yè)，調(diào)用已封裝的方法搅窿，在頁(yè)面上畫(huà)出圖表
<template>
<div id="chart"></div>
</template>
<script>
export default {
name: 'Home',
mounted() {
this.$chart.first_bar('chart'); //方法調(diào)用
}
}
</script>
<style scoped>
#chart {
width: 300px;
height: 300px;
}
</style>
最后节值，在頁(yè)面上就可以看到畫(huà)好的圖表了
示例截圖.png
方式二（推薦）
不同于方式一，這種方式不需要新建單獨(dú)文件，也不需要在main.js中引入焰情，只需要在需要編輯圖表的組件中陌凳，如下：
import echarts from 'echarts' //引入echarts
export default {
name: 'comRadar',
data(){
return {
myChart: {},
}
},
methods:{ // 方法
init() {
/**
* 注意：當(dāng)組件被多次調(diào)用，控制臺(tái)會(huì)報(bào)錯(cuò)内舟，
* 原因：組件被多次渲染 document.getElementById 重復(fù)獲取dom
* 思路：通過(guò)ref獲取當(dāng)前組件下指定的 dom 節(jié)點(diǎn)
* 舉例：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 = {
// 圖表數(shù)據(jù)（略）
};
this.myChart.setOption(optionData);
},
beforeDestroy() {
// 移除監(jiān)聽(tīng)
window.removeEventListener('resize', this.resize);
},
}
這樣就可以了，同時(shí)這種方式验游，圖表大小可以根據(jù)窗口改變大小充岛。
EChart 5.x 變化
EChart 更新到5后，使用上邊的引入方式會(huì)報(bào)錯(cuò)８酢４薰！！請(qǐng)改用下邊的方式引入_
import * as echarts from "echarts";
頁(yè)面數(shù)據(jù)改變地圖顯示移位
有時(shí)候經(jīng)常遇到垒在，地圖引入蒜魄，在第一頁(yè)的時(shí)候?qū)⒌貓D大小改變，當(dāng)?shù)貓D數(shù)據(jù)切換時(shí)场躯，新的地圖位置移位谈为，這是因?yàn)橹皇歉淖兞说貓D數(shù)據(jù)，地圖并沒(méi)有重新生成踢关。
解決辦法：
//在setOption()方法中添加true伞鲫，表示重新繪制。
this.chart.setOption(this.setOption(),true)
自定義地圖數(shù)據(jù)網(wǎng)址
圖表實(shí)例網(wǎng)址（官網(wǎng)提供耘成，2022.2.15 以暫停使用）
PPChart（復(fù)刻 Make A Pie）
ChartLib（復(fù)刻 Make A Pie）
