' + '

' + '旅客' + paramsArray[0].seriesName + '

' + paramsArray[0].data + '人公里' + '

' + '

'; return result; } else { let result = '' + params[0].name + '' + '
'; result += '

' + '

' + '旅客' + params[0].seriesName + '

' + params[0].data + '人公里' + '

' + '

' + '旅客' + params[1].seriesName + '

' + params[1].data + '人公里' + '

' + '

'; return result; } }, }, grid: { borderWidth: 0, top: '20%', left: '65', bottom: '25%', textStyle: { color: '#fff', }, }, legend: { top: '0%', right: '10%', textStyle: { fontSize: '20px', fontFamily: 'MicrosoftYaHeiUI', color: '#FFFFFF', }, itemWidth: 28, itemHeight: 28, data: [ { name: '周转量', icon: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAA1ElEQVR4Xu2WsQ2AMBADP4ghYBtGZxsYAhHEAMQ19tF+g+/PSVqFfy08fwEAA8IJUIFwATgEqQAVCCdABcIF4BagAlQgnAAVCBeAW4AKUIFwAlQgXABuASpABcIJjCtw9O3vfOaquta2f+UYApjO3v8O4P3/e2mfOQEw2jAGpFeg0g9BhwNQZeAlqAi5zzHAfcMqHwYoQu5zDHDfsMqHAYqQ+xwD3Des8mGAIuQ+xwD3Dat8GKAIuc8xwH3DKh8GKELucwxw37DKhwGKkPscA9w3rPI9drIYQbytq9EAAAAASUVORK5CYII=', }, { name: '趋势', icon: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAA1UlEQVRYR+2UMQ7CMAxFvxdyFtqVhREpZ+AEnIyRM1RiY2NsOQgTXYzSUlVNm9ZWhwrJnvPjpxfHhI2LNu4PAzADZsAM/I+BT5FnAF8JqBl0cb6sNFu0z/N751+nLisy0ISJb2DkTZBQgukshYjyT+ergxhgEA6NQwUQIcQoH4HPGpgKtwZ+NhYglpq3MhM1F5ZcLDmTBJCE1wImZ0DSvAuvfaKRAU3zJIRySAczUBfZg4GjdMInIZTfNALY3wFy6xaNblGJFpFm42nPGoAZMANmwAx8ASjjyiGj/fCxAAAAAElFTkSuQmCC', }, ], }, xAxis: [ { type: 'category', axisLine: { lineStyle: { color: 'rgba(255,255,255,.5)', }, }, splitLine: { show: false, }, axisTick: { show: false, }, splitArea: { show: false, }, axisLabel: { interval: 0, color: 'rgba(255,255,255,0.7)', fontSize: 18, }, data: xData, }, ], yAxis: [ { type: 'value', splitLine: { show: false, }, axisLine: { show: false, }, axisTick: { show: false, }, axisLabel: { interval: 0, color: 'rgba(255,255,255,0.5)', fontSize: 20, }, splitArea: { show: false, }, }, ], // yAxis: [ // { // type: 'value', // show: false, // name: '', // min: 0, // max: 2400, // position: 'right', // axisLine: { // lineStyle: { // color: 'rgba(2, 13, 32, 1)' // } // }, // axisLabel: { // formatter: '{value}' // } // }, // { // type: 'value', // name: '周转量', // show: false, // min: 0, // max: 2400, // position: 'right', // offset: 80, // axisLine: { // lineStyle: { // color: 'rgba(2, 13, 32, 1)' // } // }, // axisLabel: { // formatter: '{value}' // } // }, // { // type: 'value', // // name: '单位：人公里', // min: 0, // max: 2400, // position: 'left', // axisLine: { // lineStyle: { // color: '#fff' // } // }, // axisLabel: { // formatter: '{value}' // } // } // ], series: [ { name: '周转量', type: 'bar', // "stack": "总量", barMaxWidth: 35, barGap: '10%', itemStyle: { normal: { color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: '#05F5FF', // 0% 处的颜色 }, { offset: 1, color: '#020D20', // 100% 处的颜色 }, ], global: false, // 缺省为 false }, }, }, data: data1, }, { name: '趋势', type: 'line', symbolSize: 10, symbol: 'circle', itemStyle: { normal: { color: 'rgba(255, 196, 53, 1)', barBorderRadius: 0, }, }, lineStyle: { normal: { width: 4, color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: '#F0B62A', // 0% 处的颜色 }, { offset: 0.45, color: '#FFC12B', // 45% 处的颜色 }, { offset: 0.85, color: '#FFC12B', // 85% 处的颜色 }, { offset: 1, color: '#FFC12B', // 100% 处的颜色 }, ], global: false, // 缺省为 false }, }, }, data: data2, }, ], };

柱状图+ 折线图和自定义图例