關於使用echarts走過的坑（同grid多圖、多軸系列）

相信你們在工做中，常常會用到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、三、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 沒有對應好