echars中yAxisIndex解释为:
使用的 y 轴的 index,在单个图表实例中存在多个 y轴的时候有用。很模棱两可,在网上也找不到,只能自己慢慢试。
经过我自己实验我发现在series中的yAxisIndex他的值(从零开始)等于几,这个数据对应的y轴就是yAxis对应的第几条y轴。
上代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script src="https://cdn.bootcss.com/echarts/4.4.0-rc.1/echarts-en.common.min.js"></script>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
tooltip: {
trigger: 'axis',
formatter: '{b0}({a0}): {c0}<br />{b1}({a1}): {c1}%'
},
legend: {
data: ['销量', '占比']
},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: [{
type: 'value',
name: '销量',
show: true,
splitLine: { show: false },
axisLine: {
lineStyle: {
color: '#5e859e',
width: 2
}
}
},
{
type: 'value',
name: '占比',
min: 0,
max: 100,
interval: 10,
splitLine: { show: false },
axisLabel: {
formatter: '{value} %'
},
axisLine: {
lineStyle: {
color: '#5e859e',//纵坐标轴和字体颜色
width: 2
}
}
}],
series: [{
name: '销量',
type: 'bar',
barWidth: '50%',
data: [15, 30, 46, 20, 20, 30]
}, {
name: '占比',
type: 'line',
smooth: true,
yAxisIndex: 0,
data: [5, 1, 2, 4, 9, 66]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
这段代码,值得注意的是series中的第二个数据中,有yAxisIndex,且值为0。这表示 第二个数据 对应的y轴是yAxis对应的第一条y轴。
展示图如下:
由此可知,第二条数据对应的是第一条轴 。
第二次代码:
接下来我会把,这段代码,的series中的第二个数据中的yAxisIndex改为1。这表示 第二个数据 对应的y轴是yAxis对应的第二条y轴。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script src="https://cdn.bootcss.com/echarts/4.4.0-rc.1/echarts-en.common.min.js"></script>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
tooltip: {
trigger: 'axis',
formatter: '{b0}({a0}): {c0}<br />{b1}({a1}): {c1}%'
},
legend: {
data: ['销量', '占比']
},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: [{
type: 'value',
name: '销量',
show: true,
splitLine: { show: false },
axisLine: {
lineStyle: {
color: '#5e859e',
width: 2
}
}
},
{
type: 'value',
name: '占比',
min: 0,
max: 100,
interval: 10,
splitLine: { show: false },
axisLabel: {
formatter: '{value} %'
},
axisLine: {
lineStyle: {
color: '#5e859e',//纵坐标轴和字体颜色
width: 2
}
}
}],
series: [{
name: '销量',
type: 'bar',
barWidth: '50%',
data: [15, 30, 46, 20, 20, 30]
}, {
name: '占比',
type: 'line',
smooth: true,
yAxisIndex: 1,
data: [5, 1, 2, 4, 9, 66]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
展示图如下:
由此可知,第二条数据此时对应的是第二条轴 。
这个就是,yAxisIndex的作用了。如果有补充的,可以再