Echarts實現環形圖自動高亮
阿新 • • 發佈：2018-12-21
摘要：需求一個接一個的來，剛實現了tootip自動顯示，緊接著的需求就是希望環形圖自動tootip的同時圖形跟著高亮顯示。
實現：由於之前看了官方文件，就是使用Echarts的api中的dispatchAction方法，type設為highlight。
想要的結果如下圖所示：（備註：請忽略我中間的資料，因為資料都是模擬的，中間的資料忘記讓兩者資料相加，沒修改）
1、記錄坑的過程（先上我的程式碼，再附上坑的效果圖）：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>echart</title> <link rel="stylesheet" href="css/indexView.css"> <style> #faultPie{ width:480px; height:280px; border:1px solid #000; } </style> </head> <body> <div id="faultPie"></div> <script src="js/jquery-3.2.1.min.js"></script> <!-- 引入 ECharts 檔案 --> <script src="js/echarts.js"></script> <script> var faultPieEchart = echarts.init(document.getElementById('faultPie')); //初始化echarts例項 var faultPieOption = { legend: { data: ['已報名', '未報名'], icon: 'rect', top: 100, right: '14.17004%', itemGap: 35, itemWidth: 10, itemHeight: 10, orient: 'vertical', textStyle: { padding: [0, 0, 0, 5], color: 'rgba(255,255,255,0.87)' } }, tooltip: { trigger: 'item', formatter: "{b} : <br>{c}起({d}%)", backgroundColor: 'rgba(0,0,0,0.3)', // 背景 padding: [8, 10], //內邊距 extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.87);', //新增陰影 }, color: ['#289df5', '#ff5050'], series: [{ type: 'pie', radius: ['80%', '62%'], center: ['40%', '60%'], label: { normal: { position: 'center' } }, data: [{ value: 42, name: '已報名', label: { normal: { formatter: '{c}', textStyle: { color: '#fff', fontSize: 33 } } } }, { value: 132, name: '未報名', label: { normal: { formatter: '\n09月資料', textStyle: { color: 'rgba(255,255,255,0.87)', fontSize: 14 } } } }] }] }; var index = 0; //播放所在下標,使得tootip每隔三秒自動顯示 var mTime = setInterval(function() { faultPieEchart.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: index }); faultPieEchart.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: index }); index++; if (index > faultPieOption.series[0].data.length) { index = 0; } }, 3000); </script> </body> </html>
這個只有第一次迴圈的時候管用，後面就是沒有消除高亮。錯誤的效果如下：
針對這個問題，進行如下思考：
- 當高亮顯示後，該下標對應的應該清除高亮，我沒有進行清除
- 下個下標應該是處於高亮狀態
修改後的程式碼如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>echart</title> <link rel="stylesheet" href="css/indexView.css"> <style> #faultPie{ width:480px; height:280px; border:1px solid #000; } </style> </head> <body> <div id="faultPie"></div> <script src="js/jquery-3.2.1.min.js"></script> <!-- 引入 ECharts 檔案 --> <script src="js/echarts.js"></script> <script> var faultPieEchart = echarts.init(document.getElementById('faultPie')); //初始化echarts例項 var faultPieOption = { legend: { data: ['已報名', '未報名'], icon: 'rect', top: 100, right: '14.17004%', itemGap: 35, itemWidth: 10, itemHeight: 10, orient: 'vertical', textStyle: { padding: [0, 0, 0, 5], color: 'rgba(255,255,255,0.87)' } }, tooltip: { trigger: 'item', formatter: "{b} : <br>{c}起({d}%)", backgroundColor: 'rgba(0,0,0,0.3)', // 背景 padding: [8, 10], //內邊距 extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.87);', //新增陰影 }, color: ['#289df5', '#ff5050'], series: [{ type: 'pie', radius: ['80%', '62%'], center: ['40%', '60%'], label: { normal: { position: 'center' } }, data: [{ value: 42, name: '已報名', label: { normal: { formatter: '{c}', textStyle: { color: '#fff', fontSize: 33 } } } }, { value: 132, name: '未報名', label: { normal: { formatter: '\n09月資料', textStyle: { color: 'rgba(255,255,255,0.87)', fontSize: 14 } } } }] }] }; var currentIndex = -1; setInterval(function() { var dataLength= faultPieOption.series[0].data.length; // 取消之前高亮的圖形 faultPieEchart.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: currentIndex }); currentIndex = (app.currentIndex + 1) % dataLength; // 高亮當前圖形 faultPieEchart.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: currentIndex }); // 顯示 tooltip faultPieEchart.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: currentIndex }); }, 3000); </script> </body> </html>
如果轉載請標註文章來源，謝謝~