<div id="main"></div>
data() {
return {
mTime: null,
echartsPie: "",
typeProportionList: []
}
}
mounted() {
this.getList()
}
methods: {
getList() {
getList()
.then(res => {
if (res.code == 1) {
this.typeProportionList = []
this.nameList = []
res.data.forEach(element => {
this.typeProportionList.push({
name: element.name,
value: element.proportion
})
this.nameList.push({
name: element.name
})
});
this.getPie()
}
})
},
pieActive() {
this.echartsPie = echarts.init(document.getElementById('main'))
let index = -1 //高亮所在下标
let dataLength = this.typeProportionList.length // 当前饼图有多少个扇形
console.log(dataLength, "dataLength")
this.mTime = setInterval(()=>{
// 清除之前的高亮
this.echartsPie.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: index
})
index = (index + 1) % dataLength
// 当前下标高亮
this.echartsPie.dispatchAction({
type: 'highlight',
// type: 'showTip', 会显示占比
seriesIndex: 0,
dataIndex: index
})
if (index > dataLength) {
index = 0
}
}, 1500)
// 鼠标划入
this.echartsPie.on('mouseover',()=>{
// 停止定时器，清除之前的高亮
clearInterval(this.mTime)
this.echartsPie.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: index
})
})
},
getPie() {
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
option = {
title: {
text: '',
subtext: '',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
data: this.nameList,
orient: "vertical", //垂直显示还是水平显示
right: 30, //legend相对位置
bottom: 40, //legend相对位置
textStyle: {
fontSize: "14",
color:'#fff'
}, //legend字体大小
},
toolbox: {
show: true,
feature: {
mark: {
show: true}
}
},
series: [
{
name: '面积模式',
type: 'pie',
radius: [20, 80],
center: ['35%', '50%'], // 设置饼图的位置
roseType: 'area',
itemStyle: {
borderRadius: 5,
label:{
show:true,
formatter:'{c}'
},
},
data: this.typeProportionList
}
]
};
option && myChart.setOption(option);
// 鼠标划出
this.pieActive()
this.echartsPie.on('mouseout',()=>{
this.pieActive()
})
},
}