相信大家在工作中，經常會用到echarts，今天我說下我在工作中浪費時間較長的坑
先來看看我的終極需要實現的圖吧：
相信以上效果對於常用的小伙伴來說並不困難，
在此我只說option的配置，關於數據，就不在此贅述了，畢竟大家的情況都不太相同，處理就起來也不太一樣。
option : {
grid: [{
left: '20%',
right: 50,
height: '35%'
}, {
left: '20%',
right: 50,
top: '55%',
height: '35%'
}],
tooltip: {
trigger: 'axis',
axisPointer: {
animation: false
}
},
dataZoom: [{
type: 'inside',
xAxisIndex: 0,
startValue: `${moment().subtract(12, 'h').format()}/${moment().format()}`,
filterMode: 'weakFilter',
borderColor: 'transparent',
backgroundColor: '#e2e2e2',
handleSize: 500
},{
type: 'inside',
xAxisIndex: 1,
startValue: `${moment().subtract(12, 'h').format()}/${moment().format()}`,
filterMode: 'weakFilter',
borderColor: 'transparent',
backgroundColor: '#e2e2e2',
handleSize: 500
}],
axisPointer: {
link: {
// 表示所有 xAxisIndex 為 0、3、4 和 yAxisName 為 'someName' 的坐標軸聯動。
xAxisIndex: [0, 1],
}
},
legend: {
data: ['泵壓(MPa)','頂驅轉速(RPM)', '扭矩(KN.m)', '排量(L/min)', '井深(m)']
},
xAxis: [
{
type : 'category',
gridIndex: 0,
boundaryGap : false,
data: this.date,
axisTick: {
show: true,
alignWithLabel: true,
interval: 'auto'
},
axisLabel: {
interval: 'auto',
},
},
{
gridIndex: 1,
type : 'category',
boundaryGap : false,
data: this.date,
position: 'bottom',
axisTick: {
show: true,
alignWithLabel: true,
interval: 'auto'
},
axisLabel: {
interval: 'auto',
},
}
],
yAxis: [
{
type: 'value',
name: '',
position: 'left',
gridIndex: 0,
axisLine: {
lineStyle: {
color: '#797874'
}
},
splitLine: {
show: false
}
},
{
type: 'value',
name: '泵壓',
position: 'left',
gridIndex: 0,
nameLocation: 'center',
nameRotate: 0,
min: function(value) {
return value.min.toFixed(4);
},
max: function(value) {
return value.max.toFixed(4);
},
offset: 20,
axisLine: {
lineStyle: {
color: '#a333cc'
}
},
axisLabel: {
formatter: '{value}'
},
splitLine: {
show: false
},
splitNumber: 1
},
{
type: 'value',
name: '頂驅轉速',
nameLocation: 'center',
nameRotate: 0,
gridIndex: 0,
min: function(value) {
return value.min.toFixed(2);
},
max: function(value) {
return value.max.toFixed(2);
},
position: 'left',
offset: 90,
axisLine: {
lineStyle: {
color: '#ff9900'
}
},
axisLabel: {
formatter: '{value}'
},
splitLine: {
show: false // 是否顯示坐標得橫縱線
},
splitNumber: 1
}, {
type: 'value',
name: '扭矩',
gridIndex: 0,
min: function(value) {
return value.min.toFixed(4);
},
max: function(value) {
return value.max.toFixed(4);
},
offset: 160,
position: 'left',
nameLocation: 'center',
nameRotate: 0,
axisLine: {
lineStyle: {
color: '#ff0000'
}
},
axisLabel: {
formatter: '{value}'
},
splitLine: {
show: false // 是否顯示坐標得橫縱線
},
splitNumber: 1
},
{
type: 'value',
name: '',
position: 'left',
gridIndex: 1,
axisLine: {
lineStyle: {
color: '#797874'
}
},
splitLine: {
show: false
}
},
{
type: 'value',
name: '排量',
gridIndex: 1,
nameLocation: 'center',
nameRotate: 0,
min: function(value) {
return value.min.toFixed(2);
},
max: function(value) {
return value.max.toFixed(2);
},
offset: 20,
position: 'left',
axisLine: {
lineStyle: {
color: '#006600'
}
},
axisLabel: {
formatter: '{value}'
},
splitLine: {
show: false // 是否顯示坐標得橫縱線
},
splitNumber: 1
},
,{
type: 'value',
name: '井深',
gridIndex: 1,
min: function(value) {
return value.min.toFixed(2);
},
max: function(value) {
return value.max.toFixed(2);
},
position: 'left',
nameLocation: 'center',
nameRotate: 0,
offset: 90,
axisLine: {
lineStyle: {
color: '#0000cc'
}
},
axisLabel: {
formatter: '{value}'
},
splitLine: {
show: false
},
splitNumber: 1
}
],
series: [
{
name: '泵壓(MPa)',
type: 'line',
yAxisIndex: 1,
xAxisIndex: 0,
color: '#a333cc',
data: []
},
{
name: '頂驅轉速(RPM)',
type: 'line',
color: '#ff9900',
yAxisIndex: 2,
xAxisIndex: 0,
data: []
}, {
name: '扭矩(KN.m)',
type: 'line',
color: '#ff0000',
yAxisIndex: 3,
xAxisIndex: 0,
data: []
},
{
name: '排量(L/min)',
type: 'line',
yAxisIndex: 5,
xAxisIndex: 1,
color: '#006600',
data: []
},
{
name: '井深(m)',
type: 'line',
yAxisIndex: 6,
xAxisIndex: 1,
color: '#0000cc',
data: []
}
]
}
我想說的是關於series的設置，一定要把，橫坐標或者是縱坐標對應好，不然的話就很容易出現如下問題
'type is undefined' 我的是報這個錯嘍，具體你的是什么錯，我就不知道了，但是如果你的數據沒有問題，圖表不出來的話，就是 gridIndex ，yAxisIndex， xAxisIndex 沒有對應好