Echarts饼形图图例<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./echarts.min.js"></script>
</head>
<body>
<div id="a" ></div>
</body>
<script>
var myChart = echarts.ElementById('a'))
option = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
//饼图中间显⽰⽂字
graphic:{
type:'text',
left:'center',
top:'center',
style:{
text:"重点警情 \n 1,963",// \n是换⾏
textAlign:'center', //字体居中
fill:'#000',    //字体颜⾊
fontSize:15    //字体⼤⼩
}
},
legend: {
orient: 'vertical',
left: 10,
show:false
},
grid:{
show:false,
// 距离头部的距离
top:'10%',
left:'10%',
// x2:'90%',
// 距离底部的距离
bottom:'15%',
// 修改y轴⽂字样式
textStyle:{
fontSize: 12,//字体⼤⼩
color: '#fff'//字体颜⾊
},
} ,
series: [
{
name: '警情统计',
type: 'pie',
radius: ['50%', '80%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '30',
fontWeight: 'bold'
}
},
labelLine: {
show: true
},
// 图外样式
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'                        },
// 这⾥做改变
normal:{  //正常样式
setoption/
/    标签
label:{
show: true,
// 显⽰数据名称以及具体的数据
// formatter: '{b} : {c} ({d}%)' ,
// 只显⽰数据名称
formatter: '{b}',
fontSize: '14',
color:'red',
},
labelLine :{
show:false
}
}
},
color:['#E74A3B','#889B98','#3395D9'],                    data: [
{value: 400, name: ' '},
{value: 400, name:'两抢'},
{value: 500, name: '盗抢'},
]
}
]
}
myChart.setOption(option)
}
</script>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。