您的位置:首页 > 其它

echarts折线图有两个图例时如何实现分别采用两个不同单位的y轴

2017-10-19 14:25 423 查看
(1)做法为在series中添加yAxisIndex: 1,这个就可以,默认为yAxisIndex: 0,

(2)下面贴出来完整的代码option = {
backgroundColor : 'rgba(43, 62, 75, 0.5)',//背景颜色
title : {
text : '引流实体',
x : 'center',
textStyle : {
color : '#FFF'
}
},
dataZoom: [//给x轴设置滚动条
{
start:dataZoom_end,
end: 100,
type: 'slider',
show: true,
xAxisIndex: [0],
height: 15,//组件高度
showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
},
//下面这个属性是里面拖到
{
type: 'inside',
show: true,
xAxisIndex: [0],
start:dataZoom_end,
end: 100,
},
],
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'line' // 默认为直线,可选为:'line' | 'shadow'
}
},
grid : {//间距距离左右下
//top: '50',
bottom: '45',
left : '1%',
right : '1%',
containLabel : true
},
legend: {
data:['掌上营业厅相关内容点击量','环比增幅'],
textStyle : {
color : '#FFF',
fontSize : 14
},
top:30
},
calculable : true,
xAxis : [
{
type : 'category',
data : dates,
splitLine : {//去掉网格线
show : false
},
axisLine : {//坐标轴轴线相关设置。
show : false,
lineStyle : {
color : '#FFF'
}
},
axisTick : {//坐标轴刻度相关设置
lineStyle : {
color : '#FFF'
}
},
axisLabel: {//x轴文字显示不全并将文字倾斜
interval:0,
rotate:40
}
}
],
yAxis : [
{
type : 'value',
name : '点击量(次)',
axisLabel : {
formatter: '{value}'
},
/*splitLine : {//去掉网格线
show : false
},*/
axisLine : {//坐标轴轴线相关设置。
show : false,
lineStyle : {
color : '#FFF'
}
},
axisTick : {//坐标轴刻度相关设置
show : false,
lineStyle : {
color : '#FFF'
}
},
},
{
type : 'value',
name: '环比增幅(pp%)',
axisLabel : {
formatter: '{value}%'
},
splitLine : {//去掉网格线
show : false
},
axisLine : {//坐标轴轴线相关设置。
show : false,
lineStyle : {
color : '#FFF'
}
},
axisTick : {//坐标轴刻度相关设置
show : false,
lineStyle : {
color : '#FFF'
}
},
}
],
series : [
{
name:'掌上营业厅相关内容点击量',
type:'bar',
data:values,
itemStyle : {
normal : {
color:'#ccecff',
label : {
textStyle : {
fontSize : '15',//柱状上的显示的文字
color:'#0fdc97'
}
}
}
},
},
{
name:'环比增幅',
type:'line',
yAxisIndex: 1,
data:val_float,
itemStyle : {
normal : {
color:'#fe9484',
label : {
textStyle : {
fontSize : '15',//柱状上的显示的文字
color:'#0fdc97'
}
}
}
},
}
]
};
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐