在我們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, // 相對應的坐標軸
},
],
}
這樣就可以添加多個坐標軸，不用擔心出現數據顯示不出來的問題了。
最后的效果如下：
