echarts輪訓展示某個
阿新 • • 發佈:2021-09-30
作者:明月人倚樓//學校資產佔比的配置 function schollAssets() { var myChart = window.$echarts.init( document.getElementById('schollproportion') ) var index = 0 var preindex = 0 function fun() { secondData.timerSet = setInterval(function () { // // 顯示提示框,如果後期需要可以 // myChart.dispatchAction({ // type: 'showTip', // seriesIndex: 0, // dataIndex: index, // }) // 取消高亮指定的資料圖形 myChart.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: preindex, }) // 讓影象凸出來 myChart.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: index, }) // 檢視賦值,展示當前顯示的是那一個 if ( secondData.schollZhan && secondData.schollZhan[index] && secondData.schollZhan[index].value ) { secondData.assestNumPro = secondData.schollZhan[index].value } else { secondData.assestNumPro = 0 } if ( secondData.schollZhan && secondData.schollZhan[index] && secondData.schollZhan[index].name ) { secondData.assetsNamePro = secondData.schollZhan[index].name } else { secondData.assetsNamePro = '' } if ( secondData.schollZhan && secondData.schollZhan[index] && secondData.schollZhan[index].totalCount ) { secondData.assetsProPercent = ( (secondData.schollZhan[index].value / secondData.schollZhan[index].totalCount) * 100 ).toFixed(2) + '%' } else { secondData.assetsProPercent = '0%' } preindex = index index++ if (index > secondData.schollZhan.length - 1) { index = 0 } }, 3000) } // 只有一條資料的的時候就不迴圈展示了 if (secondData.schollZhan.length > 1) { fun() } // 指定圖表的配置項和資料 var option = { tooltip: { trigger: 'item', formatter: function (params) { return ( params.marker + params.name + '<span style="display:inline-block;margin-right:8px;border-radius:10px;width:10px;height:10px;"></span>' + params.value + '個' ) }, }, series: [ { type: 'pie', radius: ['50%', '70%'], center: ['30%', '50%'], itemStyle: { borderRadius: 0, borderColor: '#fff', borderWidth: 2, }, label: { show: false, formatter: function (arg) { return arg.name + ':' + arg.percent + '%' }, }, data: secondData.schollZhan, }, ], } // 使用剛指定的配置項和資料顯示圖表。 myChart.setOption(option) // 第一次預設第一條資料高亮 myChart.dispatchAction({ type: 'highlight', dataIndex: index }) function showInfoNumBaifen(myorIndex) { secondData.assestNumPro = secondData.schollZhan[myorIndex].value //資產數量 secondData.assetsProPercent = ( (secondData.schollZhan[myorIndex].value / secondData.schollZhan[myorIndex].totalCount) * 100 ).toFixed(2) + '%' //佔比 secondData.assetsNamePro = secondData.schollZhan[myorIndex].name //名稱 } // 最初一開始就展示第一個小板塊的資料 showInfoNumBaifen(0) // 點選的時候,讓某一個圖案高亮,右側顯示對應的資訊資料 myChart.on('click', function (param) { myChart.dispatchAction({ type: 'downplay', dataIndex: preindex }) myChart.dispatchAction({ type: 'highlight', dataIndex: param.dataIndex, }) // 迴圈下一次的小板塊 preindex = param.dataIndex index = param.dataIndex // 點選的哪一個展示哪一個 showInfoNumBaifen(param.dataIndex) }) } return { overviewLeftassets, schollAssets } }
出處:https://www.cnblogs.com/IwishIcould/
想問問題,打賞了卑微的博主,求求你備註一下的扣扣或者微信;這樣我好聯絡你;(っ•̀ω•́)っ✎⁾⁾!
如果覺得這篇文章對你有小小的幫助的話,記得在右下角點個“推薦”哦,或者關注博主,在此感謝!
萬水千山總是情,打賞5毛買辣條行不行,所以如果你心情還比較高興,也是可以掃碼打賞博主(っ•̀ω•́)っ✎⁾⁾!
想問問題,打賞了卑微的博主,求求你備註一下的扣扣或者微信;這樣我好聯絡你;(っ•̀ω•́)っ✎⁾⁾!
如果文中有什麼錯誤,歡迎指出。以免更多的人被誤導。