echarts – 柱状图实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图二 -- 柱状图</title>
<script src="https://cdn.bootcss.com/echarts/3.7.1/echarts.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script>
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '询价数量',
x: 'center'
},
tooltip: {},
legend: {
data: ['询价数量'],
bottom: '0',
selectedMode:false // 取消图例的点击事件
},
xAxis: {
type: 'category',
data: ['JAN','FEB','MAR','APR','MAY','JUN','JUL','AUG','SEP','OCT','NOV','DEC'],
/*axisTick: { // x轴坐标点为准
alignWithLabel: true
}*/
},
yAxis: {
type: 'value',
splitLine:{show: false} // 去掉网格线
},
series: [
{
name:'询价数量',
type:'bar',
barWidth: '50%', // 柱状宽度
data:[120, 132, 101, 134, 90, 230, 210, 22],
itemStyle : { // 柱状颜色
normal : {
color: 'blue'
}
}
}
]
};
myChart.setOption(option);
</script>
</body>
</html>