<!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 option = {
backgroundColor: 'rgba(1,202,217,.2)',
// 图例
legend: {
data: ['公路营运载客', '公路营运载货']
},
// 图表标题
title: {
left: '30%',
top: '60%',
text: '2018年公路运营拥有量(145.18万辆)',
textStyle: {
color: '#fff',
fontSize: 14,
//文字描边
textBorderColor: 'red'
}
},
series: [{
name: '公路',
type: 'pie',
// 选中模式，表示是否支持多个选中，默认关闭，支持布尔值和字符串，字符串取值可选‘single’,‘multiple’,分别表示单选还是多选。
selectedMode: 'single',
radius: [0, '32%'],
// 标签不显示
label: {
normal: {
show: false
}
},
// 标签线不显示
labelLine: {
normal: {
show: false
}
},
data: [{
value: 40,
name: '客运',
itemStyle: {
normal: {
color: '#ff4948'
}
}
}]
},
{
name: '营运',
type: 'pie',
radius: ['42%', '55%'],
label: {
normal: {
show: true
}
},
labelLine: {
normal: {
show: true
}
},
data: [{
value: 98.26,
name: '公路营运载客',
itemStyle: {
normal: {
color: '#ffa74d'
}
}
},
{
value: 1.74,
name: '公路营运载货',
itemStyle: {
normal: {
color: '#4af0fe'
}
}
}
]
}
]
}
myChart.setOption(option);
</script>
</body>
</html>
