echarts实现饼状图部分突出显示效果

您所在的位置：网站首页 › 饼状图其中一块再分区域 › echarts实现饼状图部分突出显示效果

echarts实现饼状图部分突出显示效果

2024-04-19 08:58| 来源: 网络整理| 查看: 265

此效果与鼠标进入饼状图的效果相同,使用echarts提供的api模拟出鼠标进入的效果即可.

1 html代码

2 css代码

.box{ width: 400px; height: 400px; border:1px solid #20b1aa; margin:10px auto; }

3 js部分.echarts提供了dispatchAction()方法,用于触发图表行为,例如显示提示框, 高亮指定的数据图形(鼠标进入饼图)等.所以:

初始化之后,指定某一部分图形突出显示;当鼠标进入图形时,将其他部分图形取消突出显示(排他);当鼠标离开图形时,将此图形突出显示状态保持,仿佛鼠标没有离开一样.var seriesData = [{value:"900",name:"吃饭"},{value:"200",name:"地铁"},{value:"500",name:"玩儿"}] var div = echarts.init(document.getElementById("box")); var option = { title: { text: "模拟鼠标进入状态", subtext: "", x: 'left', y: 15, textStyle:{ color:"yellowgreen" } }, backgroundColor: "transparent", tooltip: { trigger: 'item', formatter: "{c}({d}%)" }, legend: { orient: 'horizontal', left: 'right', y: 18, data: ["吃饭","地铁","玩儿"] }, color:["yellowgreen", "#F1760F","#20b1aa"], series: [{ name: "月花销", type: 'pie', radius: '55%', center: ['50%', '60%'], data: seriesData, label:{ normal:{ position:"inner", }, }, itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' }, normal: { label: { show: true, formatter: '{d}%', textStyle:{ fontSize:20, color:"rgba(255,255,255,0.5)" } } } } }] }; //初始化图表,默认"吃饭"突出显示,seriesIndex为series:[{},{}]的索引;dataIndex为数据索引; div.setOption(option); div.dispatchAction({ type: 'highlight',//突出高亮显示; seriesIndex: 0, dataIndex: 0 }); //鼠标进入图表事件,进入的部分由于鼠标hover会默认突出显示,将其他部分全部取消突出显示,类似排他行为; div.on("mouseover", function(e){//downplay; for(var i=0;i

5 备注:

echarts的行为查看:http://echarts.baidu.com/api.html#actiondispatchAction()方法说明http://echarts.baidu.com/api.html#echartsInstance.dispatchAction

【本文地址】

echarts实现饼状图部分突出显示效果

echarts实现饼状图部分突出显示效果

今日新闻

推荐新闻