正文
echarts多个数据添加多个纵坐标
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
在我们echarts开发中，肯定会遇到一个问题。
那就是当有多个数据且数据大小差距太大时，就会出现有些数据小到看不到的情况。
所以在遇到这种情况时，我通常的解决办法就是给他多加一个坐标轴。
option = {
title: {
text: '团队项目统计',
// subtext: '数据来自网络'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
toolbox: {
feature: {
dataView: {
show: false,
readOnly: false,
},
restore: {
show: false,
},
saveAsImage: {
show: false,
},
},
},
legend: {
data: ['项目总数', '经费总数', '人均经费'],
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
xAxis: {
type: 'category',
axisTick: {
alignWithLabel: false,
},
data: _self.yData,
},
// 关键性代码
yAxis: [
{
type: 'value',
name: '经费总数',
min: 0,
max: 25000000,
position: 'left',
axisLabel: {
formatter: '{value}', // 61A0A8
},
axisLine: {
lineStyle: {
color: '#61A0A8',
},
},
},
{
type: 'value',
name: '人均经费',
min: 0,
max: 6500000,
position: 'right',
axisLabel: {
formatter: '{value}',
},
axisLine: {
lineStyle: {
color: '#334B5C',
},
},
},
{
type: 'value',
name: '项目总数',
min: 0,
max: 200,
offset: 80, // 偏移
position: 'right',
axisLabel: {
formatter: '{value}',
},
axisLine: {
lineStyle: {
color: '#C23531',
},
},
},
],
series: [
{
name: '项目总数',
type: 'bar',
data: _self.optionData1,
yAxisIndex: 2, // 相对应的坐标轴
},
{
name: '人均经费',
type: 'bar',
data: _self.optionData3,
yAxisIndex: 1, // 相对应的坐标轴
},
{
name: '经费总数',
type: 'bar',
data: _self.optionData2,
yAxisIndex: 0, // 相对应的坐标轴
},
],
}
这样就可以添加多个坐标轴，不用担心出现数据显示不出来的问题了。
最后的效果如下：
