<!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)',
grid: {
containLabel: true,
left: 20,
right: 20,
top: 0,
bottom: 0
},
xAxis: {
// x轴为数值轴，线、刻度、文字都不显示。
type: 'value',
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: false
}
},
yAxis: {
// y轴为类目轴，线、刻度、文字都不显示。
type: 'category',
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: false
}
},
series: [{
// 类型：柱形图
type: 'bar',
barWidth: 16,
barMinHeight: 20,
zlevel: 1,
data: [40],
itemStyle: {
normal: {
barBorderRadius: [0, 10, 10, 0],
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)'
}
]
)
}
}
},
{
type: 'bar',
barGap: '-100%',
barWidth: 16,
data: [100],
itemStyle: {
normal: {
barBorderRadius: [0, 16, 16, 0],
color: '#ccc',
}
}
}
]
};
myChart.setOption(option);
</script>
</body>
</html>
