前几天有朋友问我，echarts怎么实现两个y轴，我告诉他了，他说不行，看到他的设计图我也是醉了，后来给解决了，我觉得这个我得和兄弟们分享分享。
上面这个就是他要实现的，但是如果他把柱状图改成横向的，两个y轴就会重合在一起如下
大家看到了吧，正常我们的图表都是竖直的，如下
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: 'demo'
},
tooltip: {
show:true,
trigger:'item'
},
legend: {},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: [{},{}],
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
myChart.setOption(option);
这个是官网给的例子，我就加了两行代码，因为一般我们项目的时候就差不多是这样的，但是一旦写成上面的那样，就出错。
后来我把官网的实例改了之后最终还是可以了加了一个属性，onZero: false,这个属性的意思就是x轴或者y轴是否显示在另一个轴的0刻度处。默认是true，然后这个问题就这样解决了
function indexmain2(id,numb1,numb2,numb3,numb4,numb5)
{
var myChartqj2 = echarts.init(document.getElementById(id));
optionqj2 =
{
tooltip:
{
trigger: 'axis',
axisPointer:
{
type: 'line',
}
},
legend: {},
grid:
{
top:'32px',
left: '15px',
right: '13px',
bottom: '50px',
containLabel: true,
},
xAxis:
{
type: 'value',
// data:["","",""],
min:0,
max:100,
splitNumber:10,
splitLine: {
show: false
},
axisTick:
{
show:false//不显示X轴的刻度
},
axisLine:
{ // X轴线...颜色
lineStyle:
{
color:'#c490bf'
},
},
name:'( % )',
nameLocation:'start',
nameTextStyle:
{
color:'#666',
padding:[0,0,0,0],
},
axisLabel:
{ // Y轴的0 5 10...颜色
textStyle:
{
color:'#666',
}
},
},
yAxis:
[
{
type: 'category',
boundaryGap: true,
axisTick:
{
show:false//不显示Y轴的刻度
},
axisLine:
{ // Y轴线...颜色
onZero: false,
lineStyle:
{
color:'#c490bf'
},
},
axisLabel:
{ // Y轴的0 5 10...颜色
textStyle:
{
color:'#666',
}
},
data: ['OAWEB01','OAWEB02', 'OADB01', 'OADB02', 'OALOG'],
position:'left',
name:'主机名称',
nameLocation:'end',
nameTextStyle:
{
color:'#30ad3a',
// padding:[0,80,0,0],
},
},
{
type: 'category',
// boundaryGap: true,
axisTick:
{
show:false//不显示Y轴的刻度
},
axisLine:
{ // Y轴线...颜色
onZero: false,
lineStyle:
{
color:'#c490bf'
},
},
axisLabel:
{ // Y轴的0 5 10...颜色
textStyle:
{
color:'#666',
}
},
data: ['192.168.66.102', '192.168.66.103', '192.168.66.104', '192.168.66.105', '192.168.66.102'],
position:'right',
name:'Ip地址',
nameLocation:'end',
nameTextStyle:
{
color:'#30ad3a',
fontWeight:'normal',
padding:[0,0,0,200],
},
// position:'right',
},
],
series:
[{
name: '',
type: 'bar',
itemStyle:
{
normal:
{
color: function(params)
{
console.log("adfadf" + params);
// build a color map as your need.
var colorList =
[
'#30ad3a','#30ad3a','#30ad3a','#30ad3a','#30ad3a' // 6条颜色
];
return colorList[params.dataIndex]
}
}
},
data: [numb1,numb2,numb3,numb4,numb5],
barWidth:'10px',
},]
};
// 使用刚指定的配置项和数据显示图表。
myChartqj2.setOption(optionqj2);
};
indexmain2('main',40,38,37,36,38);
