(1)鼠标不移动上去得时候,饼图自动按照顺序高亮
(2)鼠标移入的时候,取消自动高亮展示,只高亮鼠标选中的那一块
(3)鼠标移出的时候,恢复自动高亮的代码
var chartDom = document.getElementById('middleLeft1');
var myChart = echarts.init(chartDom);
var option = {
tooltip: {
trigger: 'item'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: 14,
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
]
}
]
};
option && myChart.setOption(option);
var bool = true
var index = 0
myChart.on('mouseover', (param) => {
bool = false
clearInterval((window as any).startCharts)
myChart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: index
})
myChart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: param.dataIndex
})
myChart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: param.dataIndex
})
})
function chartHover() {
var dataLen = option.series[0].data.length
myChart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: index
})
index = (index + 1) % dataLen
myChart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: index
})
myChart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: index
})
}
chartHover();
(window as any).startCharts = setInterval(chartHover, 2000)
myChart.on('mouseout', function () {
if (!bool) {
(window as any).startCharts = setInterval(chartHover, 2000)
bool = true
}
})