1. 問(wèn)題描述
最近忙著做H5的大屏, 碰到一個(gè)比較頭疼的事, 圓環(huán)圖默認(rèn)選中高亮,切換成其他部分時(shí),選中的部分高亮.
2. 網(wǎng)上相關(guān)案例
在網(wǎng)上搜索了不少的案例,比較符合要求的案例,其實(shí)是不多的. 如:https://www.cnblogs.com/perallina/p/8136215.html該篇文章,介紹了圓環(huán)圖默認(rèn)高亮,當(dāng)鼠標(biāo)選中其他部分時(shí),選中部分高亮,未選中高亮,當(dāng)鼠標(biāo)移開(kāi)圖形時(shí),圓環(huán)圖恢復(fù)默認(rèn)高亮狀態(tài).
但是這個(gè)案例還是有待改進(jìn),于是在此案例和echarts 的demo基礎(chǔ)上進(jìn)行了改進(jìn),基本上滿(mǎn)足了目前的需求.
3. 代碼實(shí)現(xiàn)
3.1 html頁(yè)面代碼
<div id="echarts_demo"?style="width: 100%; height:100%;margin-left: 5%;"></div>
3.2 js代碼
var index = 0;//默認(rèn)選中高亮模塊索引
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', ? //圖例對(duì)其方式 ? ??
????????selectedMode:false,? ? ? ?
?????????itemWidth:5,? //圖例標(biāo)記的圖形寬度? ? ? ? ? ? ? ?
?????????itemHeight:5, //圖例標(biāo)記的圖形高度? ? ? ??
????????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});//設(shè)置默認(rèn)選中高亮部分
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案例的基礎(chǔ)技術(shù)支持.
感謝https://www.cnblogs.com/perallina/p/8136215.html的作者的文章技術(shù)導(dǎo)向.
