echarts双Y轴时,不同组的数据设置对应y轴
2022-12-14 本文已影响0人
Pino
废话少说先上图
image.png
根据上图可知,折线图的颜色和左侧的y轴颜色是一样
所以折线图以左侧的y轴对齐,柱状图以右侧的y轴对齐
那么改如何设置对应y轴呢?
答案是 series中的data对应item配置yAxisIndex,如下
yAxis: [
{
type: "value",
name: "单位: 次",
max: 1000,//要写设置最大值最小值的时候有用
max: 0,//要写
scale: true,
nameGap: 40,
nameTextStyle: {
color: "#fff",
fontSize: 14,
},
splitLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
show: true,
color: "#c0c3cd", //y轴字颜色
fontSize: 14,
},
},
{
type: "value",
name: "单位: 次",
max: 800,//要写设置最大值最小值的时候有用
max: 0,//要写
scale: true,
nameGap: 40,
nameTextStyle: {
color: "#fff",
fontSize: 14,
},
splitLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
show: true,
color: "#c0c3cd", //y轴字颜色
fontSize: 14,
},
},
],
series: [
{
type: "bar",
name: "使用量(次)",
yAxisIndex: 0, // 设置数据对齐yAxis 第一个y轴
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: "top", //在上方显示
textStyle: {
//数值样式
color: "rgba(250,250,250,0.6)",
fontSize: 16,
},
},
borderWidth: 2,
},
},
data: [], //[19, 29, 39, 81, 47, 20, 18, 39, 81, 47, 20, 18]
},
{
type: "bar",
name: "效益(人/每天)",
yAxisIndex: 1, // // 设置数据对齐yAxis 第二个y轴
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: "top", //在上方显示
textStyle: {
//数值样式
color: "rgba(250,250,250,0.6)",
fontSize: 16,
},
},
borderWidth: 2,
},
},
data: [], //[12, 23, 35, 100, 53, 36, 22, 39, 81, 47, 20, 18]
},
]