const option = { backgroundColor:"rgba(0,0,0,.6)", grid: { top: "60", bottom: "25"//也可设置left和right设置距离来控制图表的大小 }, tooltip: { trigger: 'axis', padding: [5, 10, 5, 10], backgroundColor: 'rgba(0,0,0,.6)', borderColor: 'transparent', axisPointer: { type: "shadow", }, formatter: (param) => ` ` }, legend: { data: ["水库汛期调度运用方案", "大坝安全管理(防汛)应急预案"], top: "0", icon: "circle", textStyle: { color: "#ffffff", fontSize: 12, } }, xAxis: { nameGap: 5, type: 'category', axisLine: { show: true, lineStyle: { color: '#999' }, }, axisLabel: { color: '#9eaaba', }, axisTick: { show: false, }, data: ["1区", "2区", "3区", "4区", "5区", "6区", "7区", "8区", "9区"], }, yAxis: [ { nameTextStyle: { color: '#9eaaba', }, offset: 0, name: '数量(座)', type: 'value', axisLabel: { show: true, color: "#9eaaba", }, axisLine: { show: true, lineStyle: { color: '#999' }, }, splitLine: { show: true, lineStyle: { color: "rgba(49,105,129,0.4)", type: 'dashed' } }, } ], series: [{ name: "水库汛期调度运用方案", type: "bar", barWidth: 10,//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用 symbol: "circle", //标记的图形为实心圆 itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ {offset: 0, color: '#1688EA'}, {offset: 1, color: 'rgba(60,221,235,0.1)'} ], false), borderRadius: [5, 5, 0, 0] }, data: [4, 5.8, 5, 9, 8, 6, 8, 4, 7] }, { name: "大坝安全管理(防汛)应急预案", type: "bar", barWidth: 10, itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ {offset: 0, color: '#37CEEA'}, {offset: 1, color: 'rgba(158,255,221,0.1)'} ], false), borderRadius: [5, 5, 0, 0] }, data: [4.2, 3.8, 5.3, 6.8, 7, 5, 9, 1, 4] } ] };

swgj-多轴柱形图