美文网首页
echarts饼状图 扇形图 自动循环突出放大

echarts饼状图 扇形图 自动循环突出放大

作者: 码农界四爷__King | 来源:发表于2021-03-27 10:33 被阅读0次
var ProportionTasksEchars = echarts.init(document.getElementById('ProportionTasksEchars'));
    // 指定图表的配置项和数据
    var option = {
        darkMode: true,
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '5%',
            type: 'scroll',
            orient: 'vertical',
            left: 10,
            top: 20,
            bottom: 20,
            textStyle: {
                color: "#fff"
            }
        },

        color: ['#58d9f9', '#4992ff', '#7cffb2', '#fddd60', '#ff6e76', '#ff6efa'],
        series: [{
            type: 'pie',
            center: ['50%', '60%'],
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center',
                formatter: '{b}({d}%)',
                textStyle: {
                    color: '#ffffff'
                },
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '18',
                    fontWeight: 'bold'
                }
            },

            labelLine: {
                show: false
            },
            data: zhanData
        }]
    };

    ProportionTasksEchars.setOption(option);
       // 自动循环突出放大功能
    var currentIndex = 0;
    // 计时器
    timeSetIntervalFun()

    function timeSetIntervalFun() {
        timeSetInterval = setInterval(function() {
            var dataLen = option.series[0].data.length;
            // 取消之前高亮的图形
            ProportionTasksEchars.dispatchAction({
                type: 'downplay',
                seriesIndex: 0,
                dataIndex: currentIndex
            });
            currentIndex = (currentIndex + 1) % dataLen;
            // 高亮当前图形
            ProportionTasksEchars.dispatchAction({
                type: 'highlight',
                seriesIndex: 0,
                dataIndex: currentIndex
            });
        }, 2000);
    }

    ProportionTasksEchars.on('mouseover', function(e) {
        clearInterval(timeSetInterval)
        //当检测到鼠标悬停事件,取消默认选中高亮
        ProportionTasksEchars.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: currentIndex
        });
        //高亮显示悬停的那块
        ProportionTasksEchars.dispatchAction({
            type: 'highlight',
            seriesIndex: 1,
            dataIndex: e.dataIndex
        });
        currentIndex = e.dataIndex;
    });

    //检测鼠标移出后显示之前默认高亮的那块
    ProportionTasksEchars.on('mouseout', function(e) {
        timeSetIntervalFun()
        ProportionTasksEchars.dispatchAction({
            type: 'highlight',
            seriesIndex: 1,
            dataIndex: 0
        });
    });

相关文章

网友评论

      本文标题:echarts饼状图 扇形图 自动循环突出放大

      本文链接:https://www.haomeiwen.com/subject/ykwehltx.html