关于使用echarts走过的坑（同grid多图、多轴系列）

相信大家在工作中，经常会用到echarts，今天我说下我在工作中浪费时间较长的坑

先来看看我的终极需要实现的图吧：

 

相信以上效果对于常用的小伙伴来说并不困难，

在此我只说option的配置，关于数据，就不在此赘述了，毕竟大家的情况都不太相同，处理就起来也不太一样。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280

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 没有对应好 

转载： https://www.cnblogs.com/fengxin666/p/10655133.html