工作当中遇到了需要的图形
但是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>
echarts安全等级三角
猜你喜欢
转载自blog.csdn.net/fengxiaopeng74/article/details/81185711
今日推荐
周排行