Echarts3例項 雙Y軸柱狀圖
阿新 • • 發佈:2019-02-05
實現效果
知識點
- 雙Y軸:yAxisIndex
- Y軸垂直標題
- 最大最小值顯示
- 調整左側Y軸刻度
程式碼實現
option == {
title: {
text: '2018年管線設施分類統計',
top:10,
left:10
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c}"
},
toolbox: {
show : true ,
top:10,
right:10,
feature : {
mark : {show: true},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
grid:{
top:60 ,
right:70,
bottom:30,
left:60
},
legend: {
top:32,
left:'center',
data:['管線長度','管點數量']
},
calculable : true,
xAxis : [
{
type : 'category',
data : ['排水' ,'供水','燃氣','熱力','通訊','電力','工業','廣播','其他']
}
],
yAxis : [
{
type: 'value',
name:"管\n線\n長\n度\n︵\n公\n裡\n︶",
nameLocation:"center",
nameGap:35,
nameRotate:0,
nameTextStyle:{
fontSize: 16,
},
//預設以千分位顯示,不想用的可以在這加一段
axisLabel : { //調整左側Y軸刻度, 直接按對應資料顯示
show:true,
showMinLabel:true,
showMaxLabel:true,
formatter: function (value) {
return value;
}
}
},
{
type: 'value',
name:"管\n點\n數\n量\n︵\n個\n︶",
nameLocation:"center",
nameGap:50,
nameRotate:0,
nameTextStyle:{
fontSize: 16,
},
//預設以千分位顯示,不想用的可以在這加一段
axisLabel : { //調整左側Y軸刻度, 直接按對應資料顯示
show:true,
showMinLabel:true,
showMaxLabel:true,
formatter: function (value) {
return value;
}
}
}
],
series : [
{
name:'管線長度',
type:'bar',
yAxisIndex: 0,
data:[409.07,187.48,94.86,161.11,327.68,355.9,0.56,49.86,0.56],
// itemStyle : { normal: {label : {show: true}}},
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
}
},
{
name:'管點數量',
type:'bar',
yAxisIndex: 1,
data:[18447,7800,2843,6547,15170,26569,506,1873,542],
// itemStyle : { normal: {label : {show: true}}},
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
}
}
]
};