zoukankan      html  css  js  c++  java
  • 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;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毛买辣条行不行,所以如果你心情还比较高兴,也是可以扫码打赏博主(っ•̀ω•́)っ✎⁾⁾!

    想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!

    支付宝
    微信
    本文版权归作者所有,欢迎转载,未经作者同意须保留此段声明,在文章页面明显位置给出原文连接
    如果文中有什么错误,欢迎指出。以免更多的人被误导。
  • 相关阅读:
    复杂系统架构设计<1>
    DevExpress Applications<3>
    DevExpress Skins<2>
    DevExpress MVVM<1>
    Unity容器<1>
    spring cloud微服务快速教程之(九) Spring Cloud Alibaba--sentinel-限流、熔断降级
    spring cloud微服务快速教程之(八) Spring Cloud Alibaba--nacos(二)、配置中心
    spring cloud微服务快速教程之(七) Spring Cloud Alibaba--nacos(一)、服务注册发现
    小白的springboot之路(十五)、mybatis的PageHelper分页插件使用
    spring cloud微服务快速教程之(六) 应用监控 spring boot admin
  • 原文地址:https://www.cnblogs.com/IwishIcould/p/15356197.html
Copyright © 2011-2022 走看看