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 }
}


相关文章
|
7月前
|
前端开发 JavaScript
Echarts堆叠折线图ajax获取数据展示
Echarts堆叠折线图ajax获取数据展示
73 0
|
9月前
|
缓存 JavaScript 数据可视化
echarts在vue3中的使用——其他页面跳转回echarts图表页面时,不显示图表的问题
echarts在vue3中的使用——其他页面跳转回echarts图表页面时,不显示图表的问题
179 0
|
11月前
Echarts实战GEO3D和bar3D延迟显示动画发光柱图的练习(未成功)
Echarts实战GEO3D和bar3D延迟显示动画发光柱图的练习(未成功)
89 0
|
11月前
|
数据可视化
Echarts高级进阶教程(3):appendData大数据量分片加载数据增量渲染和常规思路异步加载数据的对比,对折线图是无效的
Echarts高级进阶教程(3):appendData大数据量分片加载数据增量渲染和常规思路异步加载数据的对比,对折线图是无效的
214 0
|
1月前
|
JavaScript
Echarts渲染不报错但是没有内容
Echarts渲染不报错但是没有内容
102 0
Echarts渲染不报错但是没有内容
|
7月前
|
JavaScript 前端开发
echarts同一页面四个图表切换的js数据交互
echarts同一页面四个图表切换的js数据交互
48 0
|
前端开发
五分钟时间告诉你React全局配置项目主题色是怎么实现的
博主最近在自研Concis组件库,全局配置项目主题色的大体意思其实和antd一样,可以通过一款色系来全局配置Concis中所有组件的主题色,比如Concis默认的色系是蓝色(#1890FF),如果公司业务的主题色是绿色、黄色,一个个去给单独组件加样式是很麻烦的,因此就有了需求的来源
306 1
五分钟时间告诉你React全局配置项目主题色是怎么实现的
|
前端开发 JavaScript Java
【日志显示】vue实现前端展示后端带颜色的日志
vue实现后端日志到前端展示中能带颜色。
2102 0
【日志显示】vue实现前端展示后端带颜色的日志
|
10月前
|
数据可视化 Python
基础 | Pyecharts 动态时序图(时间线轮播图各参数配置)
基础 | Pyecharts 动态时序图(时间线轮播图各参数配置)
|
11月前
|
前端开发
Echarts实战案例代码(43):折线图中splitLine配置数据自动分组分段显示效果的解决方案
Echarts实战案例代码(43):折线图中splitLine配置数据自动分组分段显示效果的解决方案
367 0