<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>多系柱狀圖</title>
<!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<!-- 為ECharts准備一個具備大小（寬高）的Dom -->
<div id="main" style="width: 1200px;height:600px;"></div>
<script type="text/javascript">
// 基於准備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
var colors = ['#FD2446','#248EFD','#C916F2','#6669B1'];//自定義一個顏色數組，多系時會按照順序使用自己定義的顏色數組，若不定義則使用默認的顏色數組
var months = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'];
// 指定圖表的配置項和數據
var option = {
color:colors,
title: {//標題，可以自定義標題的位置和樣式
text: '某地區的、單位數、職工人數、和平均工資'
},
legend: {//圖例，每一個系列獨有一個圖例，注意：圖例的名字必須跟下面series數組里面的name一致。
data: ['單位數','職工數', '平均工資' ],
},
tooltip: {//鼠標懸浮時的樣式，可自定義
trigger: 'axis',
axisPointer : { // 坐標軸指示器，坐標軸觸發有效
type : 'cross' // 默認為直線，可選為：'line' | 'shadow'
}
},
xAxis: {//x軸的配置
data: months
},
yAxis: [
{//第一個y軸位置在左側
position:'left',
type : 'value',
name: '單位數',
axisLine: {
lineStyle: {
color: colors[0]
}
},
axisLabel: {
formatter: '{value} 個'
}
},
{//第二個y軸在右側
position:'right',
type : 'value',
name: '職工數',
axisLine: {
lineStyle: {
color: colors[1]
}
},
axisLabel: {
formatter: '{value} 人'
}
},
{//第三個y軸也在右側，距第二個70個像素
position:'right',
offset:70,
type : 'value',
name: '平均工資',
axisLine: {
lineStyle: {
color: colors[2]
}
},
axisLabel: {
formatter: '{value} 萬元'
}
}
],
toolbox: {//工具欄組件
show : true,
feature : {
magicType : {show: true, type: ['line', 'bar']},//柱狀圖和折線圖相互轉換
dataView:{
show: true,
title: '某地區的、單位數、職工人數、和平均工資'
}
},
saveAsImage : {show:true},//保存圖片
restore : {show: true}//還原
},
series:[
{
name:'單位數',
type:'bar',
barMaxWidth:'20%',
label:{
normal:{
show:true,
position:'top'
}
},
yAxisIndex:'0',//使用第一個y軸，序號從0開始
data: [23,27,28,30,34,36,39,41,45,46,56,60]
},
{
name:'職工數',
type:'bar',
barMaxWidth:'20%',
label:{
normal:{
show:true,
position:'top'
}
},
yAxisIndex:'1',//使用第二個y軸
data:[1500,1700,1750,1800,1850,1900,1910,1941,1980,2000,2100,2200]
},
{
name:'平均工資',
type:'bar',
barMaxWidth:'20%',
label:{
normal:{
show:true,
position:'top'
}
},
yAxisIndex:'2',//使用第三個y軸
data:[3500,3600,4200,4800,5500,6500,4900,3500,5400,5500,6500,7000]
}
]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>
原載地址：https://blog.csdn.net/qq_21963133/article/details/79279848