使用echarts如何实现双y轴且实现指定数据使用y轴呢?
在项目中经常使用echarts，我们经常会用到双y轴伸直多y轴去展示数据，默认所有数据都是使用左边y轴去展示数据的 , 我们需要自己去设置，具体使用某一个y轴去展示指定的某一个具体的数据。
一、实现echarts双y轴
1、只有一个y轴时，yAxis为对象
yAxis: {
type: 'value',
name: 'y轴名称'
},
2、两个y轴时，yAxis为数组
yAxis: [
{
type: 'value',
name:'左侧Y轴名称',
axisLabel: {
textStyle: {
color: '#fff'
},
formatter: '{value}' //鼠标移动上去显示的数据
},
splitLine: {
show: false,
lineStyle: {
color: '#00ffff'
}
},
axisLine: {
show: true,
lineStyle: {
color: '#B1BBC5',
opacity: 0.3
}
}
},
{
type: 'value',
name:'右侧Y轴名称',
// min: 0, //指定最小刻度
// max: 6000, //指定最大刻度
axisLabel: {
textStyle: {
color: '#fff'
},
formatter: '{value}'
},
splitLine: {
show: false,
lineStyle: {
color: '#00ffff'
}
},
axisLine: {
show: true,
lineStyle: {
color: '#B1BBC5',
opacity: 0.3
}
}
}
]二、展示数据
series: [
{
name: '左边Y轴名称',
type: 'pictorialBar',
symbolSize: [20, 10],
symbolOffset: [-12, -5],
symbolPosition: 'end',
z: 12,
label: {
normal: {
show: false,
position: 'top',
formatter: '{c}%'
}
},
data: '数据',
itemStyle: {
normal: {
color: '#01BCD4',
opacity: 1
}
}
},
{
name: '右边Y轴名称',
type: 'pictorialBar',
symbolSize: [20, 10],
symbolOffset: [12, -5],
symbolPosition: 'end',
yAxisIndex: 1, //指定需要使用的Y轴
z: 12,
label: {
normal: {
show: false,
position: 'top',
formatter: '{c}%'
}
},
data: '数据',
itemStyle: {
normal: {
color: '#889665',
opacity: 1
}
}
}
]其中重要指定使用某个Y轴展示数据的属性:
yAxisIndex: 1, //指定需要使用的Y轴小知识 : 坐标轴刻度标签数值以某一值为分界点改变颜色
axisLabel: {
color: function(value, index) {
turn value >= 1000 ? "red" : "green";
}
}
三、参考代码
this.barOption = {
color: ['#3cefff'],
tooltip: {},
title: [
{
text: '光伏容量:MV',
left: '8%',
top: '8%',
textStyle: {
color: '#fff',
fontSize: 12,
fontWeight: 'normal'
}
},
{
text: '年度出力:MV',
right: '10%',
top: '8%',
textStyle: {
color: '#fff',
fontSize: 12,
fontWeight: 'normal'
}
}
],
legend: {
data: ['光伏容量', '年度出力'],
textStyle: {
color: '#fff'
}
// top:"0%"
},
grid: {
backgroundColor: '#ffffff',
borderWidth: 0,
top: '15%',
left: '8%',
bottom: '10%',
height: '75%',
width: '82%'
},
xAxis: [
{
type: 'category',
data: xData,
axisTick: {
alignWithLabel: true
},
nameTextStyle: {
color: '#82b0ec'
},
axisLine: {
lineStyle: {
color: '#B1BBC5',
opacity: 0.3
}
},
axisLabel: {
// rotate: 30,
textStyle: {
color: '#fff'
}
}
}
],
yAxis: [
{
type: 'value',
axisLabel: {
textStyle: {
color: '#fff'
},
formatter: '{value}'
},
splitLine: {
show: false,
lineStyle: {
color: '#00ffff'
}
},
axisLine: {
show: true,
lineStyle: {
color: '#B1BBC5',
opacity: 0.3
}
}
},
{
type: 'value',
// min: 0,
// max: 6000,
axisLabel: {
textStyle: {
color: '#fff'
},
formatter: '{value}'
},
splitLine: {
show: false,
lineStyle: {
color: '#00ffff'
}
},
axisLine: {
show: true,
lineStyle: {
color: '#B1BBC5',
opacity: 0.3
}
}
}
],
series: [
{
name: '光伏容量',
type: 'pictorialBar',
symbolSize: [20, 10],
symbolOffset: [-12, -5],
symbolPosition: 'end',
z: 12,
label: {
normal: {
show: false,
position: 'top',
formatter: '{c}%'
}
},
data: photovoltaicCapacity,
itemStyle: {
normal: {
color: '#01BCD4',
opacity: 1
}
}
},
{
name: '年度出力',
type: 'pictorialBar',
symbolSize: [20, 10],
symbolOffset: [12, -5],
symbolPosition: 'end',
yAxisIndex: 1, //在单个图表实例中存在多个y轴的时候有用
z: 12,
label: {
normal: {
show: false,
position: 'top',
formatter: '{c}%'
}
},
data: yearOutPutY,
itemStyle: {
normal: {
color: '#889665',
opacity: 1
}
}
}
]
}