1. 问题描述
最近忙着做H5的大屏, 碰到一个比较头疼的事, 圆环图默认选中高亮,切换成其他部分时,选中的部分高亮.
2. 网上相关案例
在网上搜索了不少的案例,比较符合要求的案例,其实是不多的. 如:https://www.cnblogs.com/perallina/p/8136215.html该篇文章,介绍了圆环图默认高亮,当鼠标选中其他部分时,选中部分高亮,未选中高亮,当鼠标移开图形时,圆环图恢复默认高亮状态.
但是这个案例还是有待改进,于是在此案例和echarts 的demo基础上进行了改进,基本上满足了目前的需求.
3. 代码实现
3.1 html页面代码
<div id="echarts_demo" style="width: 100%; height:100%;margin-left: 5%;"></div>
3.2 js代码
var index = 0;//默认选中高亮模块索引
var abnormalFile = document.getElementById("echarts_demo");
var myChart = echarts.init(abnormalFile);
window.onresize = myChart.resize;
window.onresize = myChart.resize;
option = {
color:['#00aced','#ffab00','#2bc38f','#b0cd3b','#dc6263','#4b70c6','#e6b9b8','#b4b8ca','#ffeada','#8064a2'],
legend: {
orient: 'vertical',
x: 'left', //图例位置
y: 'center', //图例对其方式
selectedMode:false,
itemWidth:5, //图例标记的图形宽度
itemHeight:5, //图例标记的图形高度
textStyle:{ //图例文字样式
fontSize:10,
color:'#fff'
},
data:['01:30.41亿','02:10.75亿','03:8.24亿','04:2.87亿','05:2.63亿','06:0.85亿','07:0.23亿','08:0.05亿','09:0.03亿','10:0.55亿']
},
series: [
{
name:'',
type:'pie',
center:['65%','50%'],
radius: ['65%', '85%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
formatter:function(params, ticket, callback) {
var name = params.data.name;
var arr = name.split(":");
var percent = params.percent;
var str = arr[0]+'占比\n'+ percent+'%';
return str;
},
textStyle: {
fontSize: '15',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data:[
{value:30.41, name:'01:30.41亿'},
{value:10.75, name:'02:10.75亿'},
{value:8.24, name:'03:8.24亿'},
{value:2.87, name:'04:2.87亿'},
{value:2.63, name:'05:2.63亿'},
{value:0.85, name:'06:0.85亿'},
{value:0.23, name:'07:0.23亿'},
{value:0.05, name:'08:0.05亿'},
{value:0.03, name:'09:0.03亿'},
{value:0.55, name:'10:0.55亿'}
]
}
]};
myChart.setOption(option);
myChart.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: 0});//设置默认选中高亮部分
myChart.on('mouseover',function(e){
if(e.dataIndex != index){
myChart.dispatchAction({type: 'downplay', seriesIndex: 0, dataIndex: index });
}
});
myChart.on('mouseout',function(e){
index = e.dataIndex;
myChart.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: e.dataIndex});
});
4.效果图
5. 致谢
感谢http://echarts.baidu.com/examples/editor.html?c=pie-doughnut百度echarts案例的基础技术支持.
感谢https://www.cnblogs.com/perallina/p/8136215.html的作者的文章技术导向.
