<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Echarts图表</title>
<!-- 引入echarts.min.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var e = 75;
var option = {
color: ['rgba(255,255,255,.1)', '#fdd325'],
backgroundColor: '#06122a',
// 图表标题
title: {
show: true,
text: '司机',
// 二级标题
subtext: '总数: 100人\n今日工作: 25人',
x: 'center',
top: 165,
textStyle: {
fontSize: '17',
color: '#fdd325',
fontWeight: 'normal'
}
},
series: {
naem: '',
// 类型：饼图
type: 'pie',
radius: ['37%', '40%'],
avoidLabelOverLap: true,
hoverAnimation: false,
// 标签显示
label: {
show: true
},
// 标签线显示
labelLine: {
show: true
},
data: [{
value: e,
name: ''
},
{
value: 100 - e,
name: '25%'
}
]
}
}
myChart.setOption(option);
</script>
</body>
</html>