1. 程式人生 > 其它 >echarts輪訓展示某個

echarts輪訓展示某個

 //學校資產佔比的配置
    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毛買辣條行不行,所以如果你心情還比較高興,也是可以掃碼打賞博主(っ•̀ω•́)っ✎⁾⁾!

想問問題,打賞了卑微的博主,求求你備註一下的扣扣或者微信;這樣我好聯絡你;(っ•̀ω•́)っ✎⁾⁾!

支付寶 微信 本文版權歸作者所有,歡迎轉載,未經作者同意須保留此段宣告,在文章頁面明顯位置給出原文連線
如果文中有什麼錯誤,歡迎指出。以免更多的人被誤導。