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