1 使用详解
yAxisIndex
说明:使用的 y 轴 的 index,在单个图表实例中存在多个 y轴的时候有用。
默认值:0。
参数类型:number。
2 原始效果图
3 实现代码(给数据指定y轴)
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<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>