<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个 ECharts 实例</title>
<!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 500px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
option = {
color : [ '#91C7AF', '#D38265' ],
backgroundColor : '#FFFFFF',
tooltip : {
trigger : 'item',
formatter: "{b} : {c} ({d}%)"
},
legend : {
icon : 'roundRect',
type : 'plain',
textStyle : { //图例文字的样式
color : '#8C8C8C',
fontSize : 12
},
orient : 'vertical',
left : 10,
top : 20,
bottom : 20,
data : [ '男性用户', '女性用户' ]
},
grid : {
left : '1%',
right : '4%',
bottom : '3%',
containLabel : true
},
series : [ {
type : 'pie',
center : [ "50%", "50%" ],
radius : [ '55%', '80%' ],
itemStyle : {
borderWidth : 0,
borderColor : '#fff'
},
emphasis : {
itemStyle : {
borderWidth : 0,
shadowBlur : 10,
shadowOffsetX : 0,
shadowColor : 'rgba(0, 0, 0, 0.5)'
}
},
data : [ {
value : 3,
name : '男性用户'
}, {
value : 4,
name : '女性用户'
}, ]
} ]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
1、Echarts空心圆
最新推荐文章于 2023-01-17 16:35:02 发布