实现效果
知识点
- 双Y轴：yAxisIndex
- Y轴垂直标题
- 调整左侧Y轴刻度
代码实现
option = {
title: {
text: '2018年管线数据利用统计',
top:10,
left:10
},
tooltip : {
trigger: 'item',
formatter: "{a}
{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 : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
}
],
yAxis : [
{
type: 'value',
name:"管\n线\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︵\n次\n︶",
nameLocation:"center",
nameGap:35,
nameRotate:0,
nameTextStyle:{
fontSize: 16,
},
//默认以千分位显示，不想用的可以在这加一段
axisLabel : { //调整左侧Y轴刻度， 直接按对应数据显示
show:true,
showMinLabel:true,
showMaxLabel:true,
formatter: function (value) {
return value;
}
}
}
],
series : [
{
name:'管线查询',
type:'line',
smooth: true,
yAxisIndex: 0,
data:[35,15,8,12,11,6,3,0,0,0,0,0],
itemStyle : { normal: {label : {show: true}}},
},
{
name:'在线调用',
type:'line',
smooth: true,
yAxisIndex: 1,
data:[16,16,6,5,4,4,3,0,0,0,0,0],
itemStyle : { normal: {label : {show: true}}},
}
]
};
