echart多个柱状图 设置y轴显示_echarts柱状图轻松实现分别采用两个不同单位的y轴...

echarts柱状图轻松实现分别采用两个不同单位的y轴：

秘籍：

代码

// 基于准备好的dom，初始化echarts实例

var colors = ['#0089FF','#B865DF',/*'#5ADF63','#FFDD00',*/'#224666', '#675bba'];

// 指定图表的配置项和数据

option = {

/*grid:{

y:'25%'},*/

color: colors,

/* title: {

text: '各医院指标对比情况',

left: 16,

textStyle: {

fontSize: 18,

color:'#0089FF'

}

},*/

tooltip: {

trigger: 'axis',

axisPointer: {

type: 'cross',

crossStyle: {

color: '#999'

}

}

},

legend: {

data:['组数','CMI'],

x:'80%'

},

xAxis: [

{

type: 'category',

data: arr,

axisPointer: {

type: 'shadow'

},

axisLine: {

show: true,

/* lineStyle: {

color: '#05edfc'

}*/

},

axisLabel: {

show: true,

/* color: '#fff',*/

fontSize: 12,

interval: 0,

formatter:function(value)

{

return value;

}

//fontWeight: 'bold'

}

},

],

yAxis: [

{

type: 'value',

name: '组数整体指标',

position: 'left',

splitLine:{show: true},

axisLine: {

show: false,

/* lineStyle: {

color: '#E7E7E7'

}*/

},

axisLabel: {

show:true,

showMinLabel:true,

showMaxLabel:true,

formatter: '{value}'

},

},

{

type: 'value',

name: 'CMI',

position: 'right',

splitLine:{show: true},

axisLine: {

show: false,

/* lineStyle: {

color: '#E7E7E7'

}*/

},

axisLabel: {

show:true,

showMinLabel:true,

showMaxLabel:true,

formatter: '{value}'

},

},

],

series: [

{

name:'组数',

type:'bar',

barWidth : 20,

data:arr2,

yAxisIndex: 0,

/* markPoint : {

data : [

{type : 'max', name: '最大值'},

{type : 'min', name: '最小值'}

]

}*/

},

{

name:'CMI',

type:'bar',

barWidth : 20,

data:arr3,

yAxisIndex: 1,

/* markPoint : {

data : [

{type : 'max', name: '最大值'},

{type : 'min', name: '最小值'}

]

}*/

}

]

};