大屏可视化常用图标效果表达

最新推荐文章于 2024-09-13 23:32:49 发布

fxshy

最新推荐文章于 2024-09-13 23:32:49 发布

阅读量234

点赞数 1

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/fxshy/article/details/142136170

版权

1-echarts-雷达图

2-echarts-仪表盘

3-echarts-水球图（利用插件，echarts-liquidfill）

4-element UI tree 添加连接线，修改样式或使用插件（element-tree-line）

5-echarts-漏斗图

6-echarts-饼状图嵌套

option = {
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    series: [
        {
            name:'大饼图',
            type:'pie',
            radius: ['50%', '70%'], // 设置外圈半径为50%，内圈半径为70%
            avoidLabelOverlap: false,
            label: {
                 normal: {
                    position: 'inner', // 标签显示在饼图内部
                    formatter: '{b}\n{d}%',
                    textStyle: {
                        fontSize: 12
                    }
                }
              
               
               
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data:[
                {value:335, name:'直接访问'},
                {value:310, name:'邮件营销'},
                {value:234, name:'联盟广告'},
                {value:135, name:'视频广告'},
                {value:1548, name:'搜索引擎'}
            ]
        },
        {
            name:'小饼图',
            type:'pie',
            radius: ['20%', '40%'], // 设置外圈半径为20%，内圈半径为40%
            center: ['50%', '50%'], // 确保两个饼图共享同一个中心点
            label: {
                normal: {
                    position: 'inner', // 标签显示在饼图内部
                    formatter: '{b}\n{d}%',
                    textStyle: {
                        fontSize: 12
                    }
                }
            },
            data:[
                {value:335, name:'A'},
                {value:679, name:'B'},
                {value:1548, name:'C'}
            ]
        }
    ]
};