|
1 使用详解
yAxisIndex
说明：使用的 y 轴 的 index，在单个图表实例中存在多个 y轴的时候有用。
默认值：0。
参数类型：number。
2 原始效果图
3 实现代码（给数据指定y轴）
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
tooltip: {
trigger:'axis',
formatter: '{b0}({a0}): {c0}{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);
4 最终效果图（给数据指定y轴）
旭东怪的个人空间_哔哩哔哩_Bilibili旭东怪，人生低谷不可怕，可怕的是坚持不到人生转折点的那一天;旭东怪的主页、动态、视频、专栏、频道、收藏、订阅等。哔哩哔哩Bilibili，你感兴趣的视频都在B站。 https://space.bilibili.com/484264966?spm_id_from=333.1007.0.0
|