<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',
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,
bottom: 40,
textStyle: {
fontSize: "14",
color:'#fff'
},
},
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()
})
},
}