饼图---04

let myChart = echarts.init(document.getElementById(“fiveChart”));
let option = {
tooltip: {
// show: false,
_trigger: ‘item’,
backgroundColor: ‘rgba(26,52,88,0.8)’,
formatter: function (param) {
// console.log(param)
return ‘‘ + param.name + ‘  ’ + param.value + ‘‘;
},
},
legend: {
orient: ‘vertical’,
left:’30%’,
align:’left’,
bottom:’10%’,
icon: ‘circle’,
width: “30%”,
itemGap: 15,
itemHeight: 10,
textStyle: {
fontSize: 13,
color: ‘#a9d2ff’,
rich: {
name: {
color: ‘#a9d2ff’,
align: ‘left’,
width: 150,
// padding:[0,10,0,0]
},
value: {
color: ‘#fff’,
align: ‘right’,
},
}
},
formatter(name) {
let data = option.series[0].data;
let value = ‘’;
for (let i = 0; i < data.length; i++) {
if (data[i].name == name) {
value = data[i].value;
break;
}
}
let arr = []
for (let i = 0; i < data.length; i++) {
arr.push(data[i].value);
}
sum = arr.reduce(function(prev,cur,index,array){
return prev + cur
})
let percent = 0
percent = (value / sum)*100
return ‘{name|’ + name + ‘} {value|’ + value + ‘}’;
}
},
series: [
{
// name: ‘Access From’,
type: ‘pie’,
radius: [‘30%’, ‘50%’],
center:[‘50%’,’30%’],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: ‘#111527’,
borderWidth: 2
},
labelLine: {
show: true
},
label: {
position: ‘outside’,
fontSize: 8,
formatter: params => {
return ‘{a|’ + params.name + ‘}’
},
rich: {
a: {
color: ‘#a5cdf8’,
align: “left”,
height: 20
},
},
padding:[0,20,0,20],
},
data: [
{ value: 1048, name: ‘预报高风险船’ },
{ value: 735, name: ‘在港高风险船’ },
{ value: 580, name: ‘保钓人员出现’ },
{ value: 484, name: ‘关闭AIS’ },
{ value: 390, name: ‘偷渡人员出现’ },
]
}
]
};
var currentIndex = 0;
var timer = 0;
function animate() {
timer = _setInterval(function () {
var dataLen = option.series[0].data.length;
// 取消之前高亮的图形
_myChart.dispatchAction({
type: ‘downplay’,
seriesIndex: 0,
dataIndex: currentIndex,
});
currentIndex = (currentIndex + 1) % dataLen;
// 高亮当前图形
myChart.dispatchAction({
type: ‘highlight’,
seriesIndex: 0,
dataIndex: currentIndex,
});
}, 1500);
}
// animate();

myChart.on(“mouseover”, function(e) {
_clearInterval(timer);
_// 取消之前高亮的图形
_myChart.dispatchAction({
type: ‘downplay’,
seriesIndex: 0,
});
myChart.dispatchAction({
type: ‘highlight’,
dataIndex: e.dataIndex
});
});

myChart.on(“mouseout”, function(e) {
currentIndex = e.dataIndex;
// animate();
});

myChart.setOption(option);
$(window).resize(myChart.resize);