echarts 使用之柱狀圖
阿新 • • 發佈：2020-12-24
上篇已經說過echarts 簡單用法，這裡直接上程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 為ECharts準備一個具備大小（寬高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基於準備好的dom，初始化echarts例項
var Chart1 = echarts.init(document.getElementById('main'));
createChart1();
window.onresize = function(){
Chart1.resize();
};
function createChart1(){
option = {
color: ['#3398DB'],
tooltip: {
trigger: 'axis',
axisPointer: { // 座標軸指示器，座標軸觸發有效
type: 'shadow' // 預設為直線，可選為：'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '8%',
containLabel: true
},
xAxis: [
{
show:false,
type: 'category',
data: ['羊毛衫', '褲子', '高跟鞋', '襪子'],
axisTick: {
alignWithLabel: true
}
}
],
yAxis: {
show:false,
type: 'value',
splitLine:{
show:false
}
},
series: [
{
name: '',
type: 'bar',
itemStyle: {
normal: {
color: function(params) {
var colorList = [
'#249cf9','#fdb628','#67e0e3','#eb6f49','#27727B',
'#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
'#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
];
return colorList[params.dataIndex]
},
//以下為是否顯示，顯示位置和顯示格式的設定了
label: {
show: true,
color:'#fff',
position: 'bottom',
// formatter: '{b}\n{c}'
formatter: '{b}'
}
}
},
//設定柱的寬度，要是資料太少，柱子太寬不美觀~
barWidth:35,
data: [10, 52, 80, 30]
}
]
};
Chart1.setOption(option);
};
</script>
</body>
</html>
效果圖：（容易背景色是自己定義的css）
注：轉載請註明出處：https://www.cnblogs.com/Yjjhn/p/14185868.html
有bug請留言評論區