echarts – 饼图实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图五 -- 饼状图</title>
<script src="https://cdn.bootcss.com/echarts/3.7.1/echarts.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 237px;height:237px;"></div>
<script>
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '{a|0.00%}',
subtext: '{b|有效匹配}',
show:true,
x: 'center',
y: '90',
textStyle: {
color: '#D0021B',
rich: {
a: {
color: '#D0021B',
fontWeight: 'bold',
fontSize: 12,
backgroundColor: '#FDEBEB',
borderRadius: 12,
padding: [5, 12]
}
}
},
subtextStyle: {
rich: {
b: {
color: '#999',
fontSize: 12,
lineHeight: 5
}
}
}
},
color:['#8AC34C', '#D68A8A'],
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
series: [
{
data: [
{value: 30, name:'有效匹配'},
{value: 20, name:'无效匹配'}
],
name:'',
type:'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
hoverOffset: 5,
label: {
normal: {
show: false,
},
emphasis: {
show: false
}
},
labelLine: {
normal: {
show: false
}
},
itemStyle: { //itemStyle有正常显示：normal，有鼠标hover的高亮显示：emphasis
emphasis:{//normal显示阴影,与shadow有关的都是阴影的设置
shadowBlur: 3,//阴影大小
shadowOffsetX:0,//阴影水平方向上的偏移
shadowColor:'rgba(0,0,0,0.5)'//阴影颜色
}
}
}
]
};
myChart.setOption(option);
</script>
</body>
</html>