echarts安全等级三角

最新推荐文章于 2025-04-12 10:33:01 发布
原创最新推荐文章于 2025-04-12 10:33:01 发布 · 1.8k 阅读
1 ·
CC 4.0 BY-SA版权
echarts 专栏收录该内容
9 篇文章
订阅专栏
工作当中遇到了需要的图形

但是echarts重视倒三角的，而且他需要外面显示什么警告，里面显示数据，所以做起来有点难度，因为你放的数据不一样他可能就不是三角形了，所以下面这个案例其实是两个三角形叠一块儿了，其中一个用于显示样式，另一个用作显示真正的数据。好了代码如下，自己研究吧。



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/echarts/4.0.4/echarts-en.min.js"></script>
</head>
<body>
<div id="f_an" style="width: 500px; height: 300px"></div>
<script>
    var f_an= echarts.init(document.getElementById('f_an'));
    var  option = {
        color:['#8fc31f','#00ccff','#ffcc00','#f35833'],
        title: {
            text: '安全威胁级别',
            subtext: '实时监控',
            top:"3%",
            left:"5%",
            textStyle:{
                color:"#fff"
            }
        },
        calculable: true,
        series: [
            //修改名字改这一块儿
            {
                name:'安全威胁级别',
                type:'funnel',
                left: '0',
                // top: "25%",
                x2: 80,
                bottom: 50,
                width: '80%',
                min: 0,
                max: 100,
                minSize: '0%',
                maxSize: '100%',
                sort: 'ascending',
                gap: 5,
                label: {
                    normal: {
                        show: true,
                        position: 'right'
                    },
                    emphasis: {
                        textStyle: {
                            fontSize: 20
                        }
                    }
                },
                labelLine: {
                    normal: {
                        length: 40,
                        lineStyle: {
                            width: 1,
                            type: 'solid'
                        }
                    }
                },
                itemStyle: {
                    normal: {
                        borderColor: '#fff',
                        borderWidth: 1
                    }
                },

                data: [
                    {value: 80, name: '低级漏洞'},   //数据不动，只是假的，否则就不是三角形了，改下面的数据
                    {value: 60, name: '中级漏洞'},
                    {value: 40, name: '高级漏洞'},
                    {value: 20, name: '紧急漏洞'},
                ]
            },
            //修改数据改这一块儿
            {
                name:'安全威胁级别',
                type:'funnel',
                top: "25%",
                left:0,
                //x2: 80,
                bottom: 50,
                width: '80%',
                min: 0,
                max: 100,
                minSize: '0%',
                maxSize: '100%',
                sort: 'ascending',
                gap: 3,
                label: {
                    align:"center",
                    normal: {
                        position: 'center',
                        formatter: '{c}',
                        textStyle: {
                            color: '#fff',
                            fontSize:"14"
                        }
                    },
                },
                labelLine: {
                    show:false
                },
                itemStyle: {
                    normal: {
                        borderColor: '#fff',
                        borderWidth: 1
                    }
                },
                data: [
                    {value: 68,
                        itemStyle:{
                            color:"#fff",
                            opacity:"0"
                        },
                    },
                    {value: 2,
                        itemStyle:{
                            color:"#fff",
                            opacity:"0"
                        },
                    },
                    {value: 0,
                        itemStyle:{
                            color:"#fff",
                            opacity:"0"
                        },
                    },
                    {value: 0,
                        itemStyle:{
                            color:"#fff",
                            opacity:"0"
                        },
                    }
                ]
            },
        ]
    };
    f_an.setOption(option);
</script>
</body>
</html>