<!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)',
polar: {
center: ['50%', '50%'],
radius: '100%'
},
angleAxis: {
max: 100,
//顺时针、逆时针
clockwise: true,
//去掉坐标轴刻线
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: false
},
splitLine: {
show: false
}
},
radiusAxis: {
show: false,
type: 'category'
},
series: {
type: 'bar',
data: [{
name: '车辆总数',
value: 75,
itemStyle: {
normal: {
// 设置渐变色
color: new echarts.graphic.LinearGradient(
1, 0, 0, 1,
[{
offset: 0,
color: 'rgba(230,253,139,.7)'
},
{
offset: 1,
color: 'rgba(41,220,205,.7)'
}
]
)
}
}
}],
coordinateSystem: 'polar',
barWidth: 25
}
};
myChart.setOption(option);
</script>
</body>
</html>
