有时候做echarts 环形图 饼图 某个数据集需要高亮效果 如下
可以通过 echarts的 dispatchActionAPI 来实现
相关代码如下
/**
* 定制高亮环形图.
* Author: Notfound404
* Description:
* Date: 2018/4/4
* Time: 10:07
*/
var circleCharts = echarts.init(document.getElementById('circle'));
circleCharts.setOption({
title: {
text: '{a|80}{b|%}',
x: 'center',
y: 'center',
textStyle: {
rich: {
a: {
fontWeight: 'bold',
fontSize: '18'
},
b: {
verticalAlign: 'bottom',
fontSize: '10'
}
}
}
},
toolbox: {
show: false
},
grid: {
top: '5%',
left: '2%',
bottom: '10%',
containLabel: true
},
tooltip: {
show: false
},
series: [
{
name: '',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
// 高亮偏移值
hoverOffset: 5,
label: {
normal: {
show: false
}
},
labelLine: {
normal: {
show: false
}
},
// highlight 自定义属性 有此属性该数据集保持高亮
data: [
{value: "11", name: "baidu"}
,
{value: "5", name: "google", highlight: true}
]
}
]
});
/**
* echarts 执行action
* @param instance ecahrts 实例
* @param type action 类型
* @param index 对应的 数据索引
*/
function chartAction(instance, type, index) {
instance.dispatchAction({
type: type,
dataIndex: index
})
}
/**
* 初始高亮状态
*/
circleCharts.on('finished', function(e) {
var data = this.getOption().series[0].data;
for (var i in data) {
if (data) {
if (data[i].highlight) {
chartAction(this, 'highlight', i);
}
}
}
});
/**
* 鼠标移出 判断 有高亮标识的数据集 保持高亮
*/
circleCharts.on('mouseout', function (e) {
var highlight = e.data.highlight;
if (highlight) {
chartAction(this, 'highlight', e.dataIndex)
}
})
/**
* 鼠标hover 动作判断 非高亮标识的数据集 保持原状
*/
circleCharts.on('mouseover', function (e) {
var highlight = e.data.highlight;
if (!highlight) {
chartAction(this, 'downplay', e.dataIndex)
}
})
