2020-3-3 seo達人
Echarts餅圖之數據展示
1、組件簡介
ECharts，一個使用 JavaScript 實現的開源可視化庫，可以流暢的運行在 PC 和移動設備上，兼容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴矢量圖形庫 ZRender，提供直觀，交互豐富，可高度個性化定制的數據可視化圖表。
官網鏈接：Echarts官網
W3C教程：W3C–Echarts教程
2、前端代碼實現
首先，下載庫，并引入到項目文件；
話不多說，直接上代碼。
/* 封裝的組件 HTML代碼
<div class="echart-wrap-box">
<div class="echart-content"></div>
</div>
*/
let echarts = require("echarts/echarts.min");
defaults: {
option: {
echartsObj: {},
tooltip: {//提示框浮層內容。
trigger: 'item',//數據項圖形觸發，主要在散點圖，餅圖等無類目軸的圖表中使用。
formatter: "{b} : {c}萬人"http://提示框浮層內容格式器,{a}（系列名稱），{b}（數據項名稱），{c}（數值）, cwo2mwk（百分比）
},
//如果系列沒有設置顏色，則會依次循環從默認列表中取顏色作為系列顏色。
color: ["#369DFD", "#32C8CA", "#49C872", "#F6CE36", "#EE607A", "#935CE3", "#3436C7", "#3E4D86"],
legend: {//圖例組件。
orient: 'vertical',//圖例列表的布局朝向:垂直的
x: '80%',//圖例組件離容器左側的距離。
y: '60%',//圖例組件離容器上側的距離。
// width: 100,
textStyle: {},//圖例文字的樣式
// left: 'right',//圖例組件離容器左側的距離。
top: 'center',//圖例組件離容器上側的距離。
data: [],//右側圖例小組件信息數據
},
series: [{//餅圖信息
name: '',
type: 'pie',//餅狀圖
radius: 140,//餅圖的半徑。
center: ['50%', '50%'],
minAngle: 5, //最小的扇區角度（0 ~ 360），用于防止某個值過小導致扇區太小影響交互
label: {//展示文本設置
normal: {
show: true,
formatter: "{b} : {c}萬人",//視覺引導線內容格式器,{a}（系列名稱），{b}（數據項名稱），{c}（數值）, cwo2mwk（百分比）
},
emphasis: { //文本樣式
show: true, //展示
textStyle: { //文本樣式
fontSize: '16',
fontWeight: '600',
}
}
},
labelLine: {//視覺引導線設置
normal: {
show: true
}
},
data: [],//餅狀圖信息數據,value(數量)和 name為默認數據；
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}],
},
onInit(event) {
vm = event.vmodel;
let data;//假設這里通過ajax獲取到了需要展示的數據；
if (data.length == 0) {
return
}
data = data.sort((a, b) => { return b.number - a.number });//數據根據數量number從大到小排序
if (data.length > 7) {//從大到小的第八個新增粉絲數量的年份 開始統一歸為 其他年份新增粉絲數量
let arr = data.slice(7);
let num = 0, rate = 0;
for (let i = 0; i < arr.length; i++) {//第七個之后累數量和比率
num += Number(arr[i].number);
rate += Number(arr[i].rate);
};
let objOtherYear = {
value: num,
name: '其他年份__nana新增粉絲數量',
rate: rate
};
let arr2 = data.slice(0, 7);
arr2.push(objOtherYear);
data = arr2;
data = data.sort((a, b) => { return b.number - a.number });//數據根據數量number從大到小排序
}
this.option.series[0].data = [];
this.option.legend.data = [];
for (let i = 0; i < data.length; i++) {
let seriesData = {
value: 0,
name: '',
rate: ''
};
seriesData.value = data[i].number;
seriesData.name = data[i].year;
seriesData.rate = data[i].rate;
this.option.series[0].data.push(seriesData);//給餅圖賦值數據
let legendData = {
name: '',
icon: 'circle',//強制設置圖形為:圓形
textStyle: {
color: '#000'
}
}
legendData.name = data[i].year;
this.option.legend.data.push(legendData);//給圖例組件賦值數據
}
},
callFun: avalon.noop,//點擊餅狀圖后的回調
isClickEchartsOUt: avalon.noop,//是否為餅圖外的點擊，父組件進行判斷后傳過來
onReady(event) {
this.echartsObj = echarts.init(event.target.children[0]);//初始化
this.echartsObj.setOption(this.option);
$(window).resize(() => {
this.echartsObj.resize();
});
let dataIndex;//保存選中扇區的序號
let _this = this;
this.$watch('isClickEchartsOUt', () => {
if (this.isClickEchartsOUt) {//如果不是餅狀圖扇區的點擊，則取消選中；
_this.echartsObj.dispatchAction({
type: 'pieUnSelect',//取消選中指定的餅圖扇形。
// 可選，系列 index，可以是一個數組指定多個系列
seriesIndex: 0,
// 可選，數據的 index
dataIndex: dataIndex,
})
}
});
// 處理點擊餅圖內部的事件
this.echartsObj.on('click', function (params) {
if (params.dataIndex != dataIndex) {//如果不是前一次選中的扇區，則取消選中
_this.echartsObj.dispatchAction({
type: 'pieUnSelect',//取消選中指定的餅圖扇形。
// 可選，系列 index，可以是一個數組指定多個系列
seriesIndex: 0,
// 可選，數據的 index
dataIndex: dataIndex,
})
}
dataIndex = params.dataIndex;
_this.echartsObj.dispatchAction({
type: 'pieSelect',//選中指定的餅圖扇形。
// 可選，系列 index，可以是一個數組指定多個系列
seriesIndex: 0,
// 數據的 index，如果不指定也可以通過 name 屬性根據名稱指定數據
dataIndex: dataIndex,
})
vm.callFun(params);//回調，傳點擊獲取到的數據給父組件
});
},
onDispose() {}
}