<!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: ['客运车', '危险品运输车', '网约车', '学生班车']
},
series: [{
name: '车辆类型统计1',
type: 'pie',
// 选中模式，表示是否支持多个选中，默认关闭，支持布尔值和字符串，字符串取值可选‘single’,‘multiple’,分别表示单选还是多选
selectedMode: 'single',
radius: [0, '32%'],
// 标签不显示
label: {
normal: {
show: false
}
},
// 标签线不显示
labelLine: {
normal: {
show: false
}
},
data: [{
value: 40,
name: '客运',
itemStyle: {
normal: {
color: 'rgba(37,243,230,.1)'
}
}
},
{
value: 46,
name: '危险品运输',
itemStyle: {
normal: {
color: 'rgba(255,255,67,.1)'
}
}
},
{
value: 54,
name: '网约',
itemStyle: {
normal: {
color: 'rgba(244,111,138,.1)'
}
}
},
{
value: 64,
name: '学生班',
itemStyle: {
normal: {
color: 'rgba(0,52,249,.1)'
}
}
}
]
},
{
name: '车辆类型统计2',
type: 'pie',
radius: ['43%', '54%'],
label: {
normal: {
show: false
}
},
labelLine: {
normal: {
show: false
}
},
data: [{
value: 40,
name: '客运车',
itemStyle: {
normal: {
color: 'rgba(0,52,249)'
}
}
},
{
value: 46,
name: '危险品运输车',
itemStyle: {
normal: {
color: 'rgba(244,111,13)'
}
}
},
{
value: 54,
name: '网约车',
itemStyle: {
normal: {
color: 'rgba(255,255,67)'
}
}
},
{
value: 64,
name: '学生班车',
itemStyle: {
normal: {
color: 'rgba(37,243,230)'
}
}
}
]
},
{
name: '车辆类型统计3',
type: 'pie',
radius: ['42%', '55%'],
label: {
normal: {
show: false
}
},
labelLine: {
normal: {
show: false
}
},
data: [{
value: 40,
name: '客运车1',
itemStyle: {
normal: {
color: 'rgba(37,243,230)'
}
}
},
{
value: 46,
name: '危险品运输车1',
itemStyle: {
normal: {
color: 'rgba(255,255,67)'
}
}
},
{
value: 54,
name: '网约车1',
itemStyle: {
normal: {
color: 'rgba(244,111,13)'
}
}
},
{
value: 64,
name: '学生班车1',
itemStyle: {
normal: {
color: 'rgba(0,52,249)'
}
}
}
]
}
]
}
myChart.setOption(option);
</script>
</body>
</html>
