• 自动旋转的饼图(echarts)


    const list=[
        {value: 1048, name: '搜索引擎'},
        {value: 735, name: '直接访问'},
        {value: 580, name: '邮件营销'},
        {value: 484, name: '联盟广告'},
        {value: 300, name: '视频广告'}    
    ]
    const values=list.map(o=>o.value)
    option = {
        title: {
            text: '某站点用户访问来源',
            subtext: '纯属虚构',
            left: 'center'
        },
        selectedOffset:100,
        clockwise:true,
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left',
        },
        series: [
            {
                name: '访问来源',
                type: 'pie',
                // roseType:true,
                startAngle:152,
                radius: ['25%', '40%'],
                data: list,
                itemStyle:{
                    // shadowOffsetX: 10,
                    borderWidth:20,
                    borderColor:"pink",
                    decal:{
                        symbolSize:0.2
                    } 
                },
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    
    const sum=list=>list.reduce((a,b)=>a+b,0)
    
    var idx =0
    var angle=0
    setInterval(()=>{
        idx++
        if(idx>=list.length){
            idx=0
        }
        angle=(360*(sum(values.slice(0,idx))+values[idx]/2)/sum(values)+90)%360
        console.log(currentAngle,angle)
        myChart.setOption({
            series:[{
                startAngle:angle,
                selectedOffset:0,
                selectedMode:true,
                // datasetIndex:idx,
                select:{
                    focus: 'series',
                    label:{
                        show:true,
                    },
                    itemStyle: {
                        shadowBlur: 10,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
                
            }]
        });
        myChart.dispatchAction({
            type: 'select',
            dataIndex:idx,
        });
    },5000)
    
    myChart.on('click',(args)=>{
        console.log(args,angle)
        const index=args.dataIndex
        angle=(360*(sum(values.slice(0,index))+values[index]/2)/sum(values)+90)%360
        //点击后自动旋转的时候就在指定的扇面后旋转
        idx = index
        myChart.setOption({
            series:[{
                startAngle:angle
            }]
        })
    })
    积累小的知识,才能成就大的智慧,希望网上少一些复制多一些原创有用的答案
  • 相关阅读:
    Java虚拟机的内存模型
    JAVA 对文件的操作
    JAVA 读取 YAML 文件
    Nginx 502 问题解决 及 安装
    Python pdb 调试 命令
    pycharm设置鼠标控制字体大小
    ISO9126 软件质量模型
    人生苦短我学Java9面向对象三大特性之多态 广深
    Golang微服务入门到精通之路3类的封装/继承/多态/接口类型 广深
    人生苦短我学Java10final关键字/代码块/抽象类 广深
  • 原文地址:https://www.cnblogs.com/llcdbk/p/15802748.html
Copyright © 2020-2023  润新知