0 環境
-
系統：win10 -
前端框架：vue -
前端IDE：vscode
1 餅圖封裝
1 安裝echarts
npm install echarts --save
2 查看是否安裝成功
-
文件查看
-
界面查看(win+r --> 輸入cmd --> 輸入vue ui 等待啟動)
3 在main.js中引入echarts
import echarts from "echarts";
Vue.prototype.$echarts = echarts;
2 封裝組件
1 新建子組件
<!-- echartscom.vue -->
<template>
<div class="">
<div style="width: 500px; height: 500px" :id="id" class="echarts" ref="echarts"></div>
</div>
</template>
<script>
import * as echarts from 'echarts';
require('echarts/theme/shine'); //引入主題
export default {
name: 'echartscom',
// id --> 為了多圖渲染
// title --> 標題
// chartData --> value數組
// nameData --> name數組
props: ['id', 'title', 'chartData', 'nameData'],
data() {
return {
arr: []
};
},
methods: {
drawCharts() {
var myChart = echarts.init(document.getElementById(this.id));
myChart.setOption({
title: {
text: this.title,
subtext: '詳情',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
orient: 'vertical',
x: 'left',
data: this.nameData
},
series: [
{
name: '訪問來源',
type: 'pie',
radius: '40%',
center: ['50%', '60%'],
avoidLabelOverlap: false,
label: {
normal: {
formatter: '{b}:{c}' + '\n\r' + '({d}%)',
show: true,
position: 'left'
},
emphasis: {
show: true
}
},
labelLine: {
show: true, //數據標簽引導線
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
},
normal: {
// 設置引導線
show: true
// length: 18
}
},
data: this.arr
}
]
});
// window.addEventListener('resize', function () {
// myChart.resize();
// });
},
initData() {
this.nameData.forEach((val, i) => {
// 列數據
this.chartData.forEach((item, index) => {
if (i == index) {
this.arr.push({
value: item,
name: val
});
}
});
});
}
},
watch: {
chartData: {
// 在父組件數據發生改變后子組件要做到實時更新,就需要子組件用watch來監聽數據的變化
// 看情況是否需要newValue和oldValue之間值比較
handler(newValue, oldValue) {
this.arr.length = 0;
this.initData();
this.drawCharts();
},
deep: true
}
},
computed: {
echarts() {
return 'echarts' + Math.random() * 100000;
}
},
mounted() {
this.drawCharts();
},
beforeMount() {},
beforeCreate() {
},
created() {
this.initData();
},
components: {}
};
</script>
<style></style>
2 父組件調用子組件
<template>
<div class="">
<el-row :gutter="20">
<el-col :span="12">
<div>
<!-- v-if 數值存在時加載餅圖 -->
<echartscom
id="echarts"
v-if="msg.chartData.length > 0"
:nameData="msg.rows"
title="圖1查詢"
:chartData="msg.chartData2"
autoresize
/>
</div>
</el-col>
<el-col :span="12">
<div>
<echartscom
id="all"
v-if="msg.chartData1.length > 0"
:nameData="msg.rows1"
title="圖2查詢"
:chartData="msg.chartData3"
autoresize
/>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
//這里可以導入其他文件（比如：組件，工具js，第三方插件js，json文件，圖片文件等等）
//例如：import 《組件名稱》 from '《組件路徑》';
import echartscom from '你的子組件echartscom的位置';
export default {
//import引入的組件需要注入到對象中才能使用
components: {
echartscom
},
data() {
//這里存放數據
return {
msg: {
rows: ['直接訪問', '郵件營銷', '聯盟廣告', '視頻廣告'],
rows1: ['直接訪問', '郵件營銷', '聯盟廣告'],
chartData: [335, 310, 234, 135],
chartData1: [335, 310, 234]
}
};
},
//監聽屬性 類似於data概念
computed: {},
//監控data中的數據變化
watch: {},
//方法集合
methods: {
initData(){
// 請求后台數據 返回返回給chartData chartData1即可
}
},
//生命周期 - 創建完成（可以訪問當前this實例）
created() {},
//生命周期 - 掛載完成（可以訪問DOM元素）
mounted() {
// 在這里初始化你的數據
this.initData();
},
beforeCreate() {}, //生命周期 - 創建之前
beforeMount() {}, //生命周期 - 掛載之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 銷毀之前
destroyed() {}, //生命周期 - 銷毀完成
activated() {} //如果頁面有keep-alive緩存功能，這個函數會觸發
};
</script>
<style scoped>
</style>
3 效果圖
4 2個餅圖不加載/沒有實時刷新問題
1.「使用$nextTick方法 我試了沒用 需要在父組件添加v-if判斷 存在 加載自子組件(餅圖)」
2.「子組件添加watch 監聽父組件傳來的值是否變化 來決定是否加載餅圖」