echart 折线图设置y轴单位_echarts折线图有两个图例时如何实现分别采用两个不同单位的y轴...

(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'

}

}

}

},

}

]

};