//变电土建专业 function getEngineeringOnePlan() { const leftChartOnePlan = echarts.init(document.getElementById("engineeringOnePlan")); const option = { grid: { left: '20%', right: '15%', bottom: '10%', containLabel: false, top: '10%' // 添加顶部间距 }, xAxis: { show: false, //不显示x轴相关信息 }, yAxis: [ { show: true, type: 'category', data: ['计划'], axisTick: {show: false}, //不显示刻度线 axisLabel: { color: '#fff', padding: [0, 10, 0, 10], // 增加标签内边距 }, axisLine: { show: false, }, }, { show: true, type: 'category', data: [15], axisTick: {show: false}, //不显示刻度线 axisLabel: { color: '#fff', formatter: '{value}%', padding: [0, 10, 0, 10], // 增加标签内边距 }, axisLine: { show: false, }, }, ], series: [ { name: '左间隔', type: 'bar', yAxisIndex: 0, barWidth: 15, stack: '内部', // 使用堆叠 data: [0.3], itemStyle: { normal: { color: 'transparent' } } }, { name: '条', z: 1, yAxisIndex: 0, type: 'bar', stack: '内部', data: [40], itemStyle: { normal: { barBorderRadius: 0, color: { x: 1, y: 0, x2: 0, y2: 0, colorStops: [{ offset: 0, color: '#9CF6FC' // 0% 处的颜色 }, { offset: 0.6, color: '#60E8FE' // 100% 处的颜色 }, { offset: 1, color: '#0BD4E3' // 100% 处的颜色 }], }, }, }, barWidth: 15, }, { name: '右间隔', type: 'bar', yAxisIndex: 0, barWidth: 15, stack: '内部', data: [0.3], itemStyle: { normal: { color: 'transparent' } } }, { name: '框', z: 0, yAxisIndex: 1, type: 'bar', data: [100], // 柱子之间的宽度 barWidth: 16, itemStyle: { normal: { color: 'none', borderColor: '#06DDDBFF', borderWidth: 1, barBorderRadius: 0, }, }, }, ], }; leftChartOnePlan.setOption(option); // 响应式调整 window.addEventListener("resize", function () { leftChartOnePlan.resize(); }); } function getEngineeringOneActual() { const leftChartOneActual = echarts.init(document.getElementById("engineeringOneActual")); const option = { grid: { left: '20%', right: '15%', bottom: '20%', containLabel: false, top: '10%' // 添加顶部间距 }, xAxis: { show: false, //不显示x轴相关信息 }, yAxis: [ { show: true, type: 'category', data: ['实际'], axisTick: {show: false}, //不显示刻度线 axisLabel: { color: '#fff', padding: [0, 10, 0, 10], // 增加标签内边距 }, axisLine: { show: false, }, }, { show: true, type: 'category', data: [12], axisTick: {show: false}, //不显示刻度线 axisLabel: { color: '#fff', formatter: '{value}%', padding: [0, 10, 0, 10], // 增加标签内边距 }, axisLine: { show: false, }, }, ], series: [ { name: '左间隔', type: 'bar', yAxisIndex: 0, barWidth: 15, stack: '内部', // 使用堆叠 data: [0.3], itemStyle: { normal: { color: 'transparent' } } }, { name: '条', z: 1, yAxisIndex: 0, type: 'bar', stack: '内部', data: [99], itemStyle: { normal: { barBorderRadius: 0, color: { x: 1, y: 0, x2: 0, y2: 0, colorStops: [{ offset: 0, color: '#9FF8E3' // 0% 处的颜色 }, { offset: 0.6, color: '#4FFDCF' // 100% 处的颜色 }, { offset: 1, color: '#1BF6BF' // 100% 处的颜色 }], }, }, }, barWidth: 15, }, { name: '右间隔', type: 'bar', yAxisIndex: 0, barWidth: 15, stack: '内部', data: [0.3], itemStyle: { normal: { color: 'transparent' } } }, { name: '框', z: 0, yAxisIndex: 1, type: 'bar', data: [100], // 柱子之间的宽度 barWidth: 16, itemStyle: { normal: { color: 'none', borderColor: '#06DDDBFF', borderWidth: 1, barBorderRadius: 0, }, }, }, ], }; leftChartOneActual.setOption(option); // 响应式调整 window.addEventListener("resize", function () { leftChartOneActual.resize(); }); } function getEngineeringTwoPlan() { const leftChartOnePlan = echarts.init(document.getElementById("engineeringTwoPlan")); const option = { grid: { left: '20%', right: '15%', bottom: '10%', containLabel: false, top: '10%' // 添加顶部间距 }, xAxis: { show: false, //不显示x轴相关信息 }, yAxis: [ { show: true, type: 'category', data: ['计划'], axisTick: {show: false}, //不显示刻度线 axisLabel: { color: '#fff', padding: [0, 10, 0, 10], // 增加标签内边距 }, axisLine: { show: false, }, }, { show: true, type: 'category', data: [15], axisTick: {show: false}, //不显示刻度线 axisLabel: { color: '#fff', formatter: '{value}%', padding: [0, 10, 0, 10], // 增加标签内边距 }, axisLine: { show: false, }, }, ], series: [ { name: '左间隔', type: 'bar', yAxisIndex: 0, barWidth: 15, stack: '内部', // 使用堆叠 data: [0.3], itemStyle: { normal: { color: 'transparent' } } }, { name: '条', z: 1, yAxisIndex: 0, type: 'bar', stack: '内部', data: [40], itemStyle: { normal: { barBorderRadius: 0, color: { x: 1, y: 0, x2: 0, y2: 0, colorStops: [{ offset: 0, color: '#9CF6FC' // 0% 处的颜色 }, { offset: 0.6, color: '#60E8FE' // 100% 处的颜色 }, { offset: 1, color: '#0BD4E3' // 100% 处的颜色 }], }, }, }, barWidth: 15, }, { name: '右间隔', type: 'bar', yAxisIndex: 0, barWidth: 15, stack: '内部', data: [0.3], itemStyle: { normal: { color: 'transparent' } } }, { name: '框', z: 0, yAxisIndex: 1, type: 'bar', data: [100], // 柱子之间的宽度 barWidth: 16, itemStyle: { normal: { color: 'none', borderColor: '#06DDDBFF', borderWidth: 1, barBorderRadius: 0, }, }, }, ], }; leftChartOnePlan.setOption(option); // 响应式调整 window.addEventListener("resize", function () { leftChartOnePlan.resize(); }); } function getEngineeringTwoActual() { const leftChartOneActual = echarts.init(document.getElementById("engineeringTwoActual")); const option = { grid: { left: '20%', right: '15%', bottom: '20%', containLabel: false, top: '10%' // 添加顶部间距 }, xAxis: { show: false, //不显示x轴相关信息 }, yAxis: [ { show: true, type: 'category', data: ['实际'], axisTick: {show: false}, //不显示刻度线 axisLabel: { color: '#fff', padding: [0, 10, 0, 10], // 增加标签内边距 }, axisLine: { show: false, }, }, { show: true, type: 'category', data: [12], axisTick: {show: false}, //不显示刻度线 axisLabel: { color: '#fff', formatter: '{value}%', padding: [0, 10, 0, 10], // 增加标签内边距 }, axisLine: { show: false, }, }, ], series: [ { name: '左间隔', type: 'bar', yAxisIndex: 0, barWidth: 15, stack: '内部', // 使用堆叠 data: [0.3], itemStyle: { normal: { color: 'transparent' } } }, { name: '条', z: 1, yAxisIndex: 0, type: 'bar', stack: '内部', data: [99], itemStyle: { normal: { barBorderRadius: 0, color: { x: 1, y: 0, x2: 0, y2: 0, colorStops: [{ offset: 0, color: '#9FF8E3' // 0% 处的颜色 }, { offset: 0.6, color: '#4FFDCF' // 100% 处的颜色 }, { offset: 1, color: '#1BF6BF' // 100% 处的颜色 }], }, }, }, barWidth: 15, }, { name: '右间隔', type: 'bar', yAxisIndex: 0, barWidth: 15, stack: '内部', data: [0.3], itemStyle: { normal: { color: 'transparent' } } }, { name: '框', z: 0, yAxisIndex: 1, type: 'bar', data: [100], // 柱子之间的宽度 barWidth: 16, itemStyle: { normal: { color: 'none', borderColor: '#06DDDBFF', borderWidth: 1, barBorderRadius: 0, }, }, }, ], }; leftChartOneActual.setOption(option); // 响应式调整 window.addEventListener("resize", function () { leftChartOneActual.resize(); }); } function getEngineeringThreePlan() { const leftChartOnePlan = echarts.init(document.getElementById("engineeringThreePlan")); const option = { grid: { left: '20%', right: '15%', bottom: '10%', containLabel: false, top: '10%' // 添加顶部间距 }, xAxis: { show: false, //不显示x轴相关信息 }, yAxis: [ { show: true, type: 'category', data: ['计划'], axisTick: {show: false}, //不显示刻度线 axisLabel: { color: '#fff', padding: [0, 10, 0, 10], // 增加标签内边距 }, axisLine: { show: false, }, }, { show: true, type: 'category', data: [15], axisTick: {show: false}, //不显示刻度线 axisLabel: { color: '#fff', formatter: '{value}%', padding: [0, 10, 0, 10], // 增加标签内边距 }, axisLine: { show: false, }, }, ], series: [ { name: '左间隔', type: 'bar', yAxisIndex: 0, barWidth: 15, stack: '内部', // 使用堆叠 data: [0.3], itemStyle: { normal: { color: 'transparent' } } }, { name: '条', z: 1, yAxisIndex: 0, type: 'bar', stack: '内部', data: [40], itemStyle: { normal: { barBorderRadius: 0, color: { x: 1, y: 0, x2: 0, y2: 0, colorStops: [{ offset: 0, color: '#9CF6FC' // 0% 处的颜色 }, { offset: 0.6, color: '#60E8FE' // 100% 处的颜色 }, { offset: 1, color: '#0BD4E3' // 100% 处的颜色 }], }, }, }, barWidth: 15, }, { name: '右间隔', type: 'bar', yAxisIndex: 0, barWidth: 15, stack: '内部', data: [0.3], itemStyle: { normal: { color: 'transparent' } } }, { name: '框', z: 0, yAxisIndex: 1, type: 'bar', data: [100], // 柱子之间的宽度 barWidth: 16, itemStyle: { normal: { color: 'none', borderColor: '#06DDDBFF', borderWidth: 1, barBorderRadius: 0, }, }, }, ], }; leftChartOnePlan.setOption(option); // 响应式调整 window.addEventListener("resize", function () { leftChartOnePlan.resize(); }); } function getEngineeringThreeActual() { const leftChartOneActual = echarts.init(document.getElementById("engineeringThreeActual")); const option = { grid: { left: '20%', right: '15%', bottom: '20%', containLabel: false, top: '10%' // 添加顶部间距 }, xAxis: { show: false, //不显示x轴相关信息 }, yAxis: [ { show: true, type: 'category', data: ['实际'], axisTick: {show: false}, //不显示刻度线 axisLabel: { color: '#fff', padding: [0, 10, 0, 10], // 增加标签内边距 }, axisLine: { show: false, }, }, { show: true, type: 'category', data: [12], axisTick: {show: false}, //不显示刻度线 axisLabel: { color: '#fff', formatter: '{value}%', padding: [0, 10, 0, 10], // 增加标签内边距 }, axisLine: { show: false, }, }, ], series: [ { name: '左间隔', type: 'bar', yAxisIndex: 0, barWidth: 15, stack: '内部', // 使用堆叠 data: [0.3], itemStyle: { normal: { color: 'transparent' } } }, { name: '条', z: 1, yAxisIndex: 0, type: 'bar', stack: '内部', data: [99], itemStyle: { normal: { barBorderRadius: 0, color: { x: 1, y: 0, x2: 0, y2: 0, colorStops: [{ offset: 0, color: '#9FF8E3' // 0% 处的颜色 }, { offset: 0.6, color: '#4FFDCF' // 100% 处的颜色 }, { offset: 1, color: '#1BF6BF' // 100% 处的颜色 }], }, }, }, barWidth: 15, }, { name: '右间隔', type: 'bar', yAxisIndex: 0, barWidth: 15, stack: '内部', data: [0.3], itemStyle: { normal: { color: 'transparent' } } }, { name: '框', z: 0, yAxisIndex: 1, type: 'bar', data: [100], // 柱子之间的宽度 barWidth: 16, itemStyle: { normal: { color: 'none', borderColor: '#06DDDBFF', borderWidth: 1, barBorderRadius: 0, }, }, }, ], }; leftChartOneActual.setOption(option); // 响应式调整 window.addEventListener("resize", function () { leftChartOneActual.resize(); }); } function getEngineeringFourPlan() { const leftChartOnePlan = echarts.init(document.getElementById("engineeringFourPlan")); const option = { grid: { left: '20%', right: '15%', bottom: '10%', containLabel: false, top: '10%' // 添加顶部间距 }, xAxis: { show: false, //不显示x轴相关信息 }, yAxis: [ { show: true, type: 'category', data: ['计划'], axisTick: {show: false}, //不显示刻度线 axisLabel: { color: '#fff', padding: [0, 10, 0, 10], // 增加标签内边距 }, axisLine: { show: false, }, }, { show: true, type: 'category', data: [15], axisTick: {show: false}, //不显示刻度线 axisLabel: { color: '#fff', formatter: '{value}%', padding: [0, 10, 0, 10], // 增加标签内边距 }, axisLine: { show: false, }, }, ], series: [ { name: '左间隔', type: 'bar', yAxisIndex: 0, barWidth: 15, stack: '内部', // 使用堆叠 data: [0.3], itemStyle: { normal: { color: 'transparent' } } }, { name: '条', z: 1, yAxisIndex: 0, type: 'bar', stack: '内部', data: [40], itemStyle: { normal: { barBorderRadius: 0, color: { x: 1, y: 0, x2: 0, y2: 0, colorStops: [{ offset: 0, color: '#9CF6FC' // 0% 处的颜色 }, { offset: 0.6, color: '#60E8FE' // 100% 处的颜色 }, { offset: 1, color: '#0BD4E3' // 100% 处的颜色 }], }, }, }, barWidth: 15, }, { name: '右间隔', type: 'bar', yAxisIndex: 0, barWidth: 15, stack: '内部', data: [0.3], itemStyle: { normal: { color: 'transparent' } } }, { name: '框', z: 0, yAxisIndex: 1, type: 'bar', data: [100], // 柱子之间的宽度 barWidth: 16, itemStyle: { normal: { color: 'none', borderColor: '#06DDDBFF', borderWidth: 1, barBorderRadius: 0, }, }, }, ], }; leftChartOnePlan.setOption(option); // 响应式调整 window.addEventListener("resize", function () { leftChartOnePlan.resize(); }); } function getEngineeringFourActual() { const leftChartOneActual = echarts.init(document.getElementById("engineeringFourActual")); const option = { grid: { left: '20%', right: '15%', bottom: '20%', containLabel: false, top: '10%' // 添加顶部间距 }, xAxis: { show: false, //不显示x轴相关信息 }, yAxis: [ { show: true, type: 'category', data: ['实际'], axisTick: {show: false}, //不显示刻度线 axisLabel: { color: '#fff', padding: [0, 10, 0, 10], // 增加标签内边距 }, axisLine: { show: false, }, }, { show: true, type: 'category', data: [12], axisTick: {show: false}, //不显示刻度线 axisLabel: { color: '#fff', formatter: '{value}%', padding: [0, 10, 0, 10], // 增加标签内边距 }, axisLine: { show: false, }, }, ], series: [ { name: '左间隔', type: 'bar', yAxisIndex: 0, barWidth: 15, stack: '内部', // 使用堆叠 data: [0.3], itemStyle: { normal: { color: 'transparent' } } }, { name: '条', z: 1, yAxisIndex: 0, type: 'bar', stack: '内部', data: [99], itemStyle: { normal: { barBorderRadius: 0, color: { x: 1, y: 0, x2: 0, y2: 0, colorStops: [{ offset: 0, color: '#9FF8E3' // 0% 处的颜色 }, { offset: 0.6, color: '#4FFDCF' // 100% 处的颜色 }, { offset: 1, color: '#1BF6BF' // 100% 处的颜色 }], }, }, }, barWidth: 15, }, { name: '右间隔', type: 'bar', yAxisIndex: 0, barWidth: 15, stack: '内部', data: [0.3], itemStyle: { normal: { color: 'transparent' } } }, { name: '框', z: 0, yAxisIndex: 1, type: 'bar', data: [100], // 柱子之间的宽度 barWidth: 16, itemStyle: { normal: { color: 'none', borderColor: '#06DDDBFF', borderWidth: 1, barBorderRadius: 0, }, }, }, ], }; leftChartOneActual.setOption(option); // 响应式调整 window.addEventListener("resize", function () { leftChartOneActual.resize(); }); } function getEngineeringFivePlan() { const leftChartOnePlan = echarts.init(document.getElementById("engineeringFivePlan")); const option = { grid: { left: '20%', right: '15%', bottom: '10%', containLabel: false, top: '10%' // 添加顶部间距 }, xAxis: { show: false, //不显示x轴相关信息 }, yAxis: [ { show: true, type: 'category', data: ['计划'], axisTick: {show: false}, //不显示刻度线 axisLabel: { color: '#fff', padding: [0, 10, 0, 10], // 增加标签内边距 }, axisLine: { show: false, }, }, { show: true, type: 'category', data: [15], axisTick: {show: false}, //不显示刻度线 axisLabel: { color: '#fff', formatter: '{value}%', padding: [0, 10, 0, 10], // 增加标签内边距 }, axisLine: { show: false, }, }, ], series: [ { name: '左间隔', type: 'bar', yAxisIndex: 0, barWidth: 15, stack: '内部', // 使用堆叠 data: [0.3], itemStyle: { normal: { color: 'transparent' } } }, { name: '条', z: 1, yAxisIndex: 0, type: 'bar', stack: '内部', data: [40], itemStyle: { normal: { barBorderRadius: 0, color: { x: 1, y: 0, x2: 0, y2: 0, colorStops: [{ offset: 0, color: '#9CF6FC' // 0% 处的颜色 }, { offset: 0.6, color: '#60E8FE' // 100% 处的颜色 }, { offset: 1, color: '#0BD4E3' // 100% 处的颜色 }], }, }, }, barWidth: 15, }, { name: '右间隔', type: 'bar', yAxisIndex: 0, barWidth: 15, stack: '内部', data: [0.3], itemStyle: { normal: { color: 'transparent' } } }, { name: '框', z: 0, yAxisIndex: 1, type: 'bar', data: [100], // 柱子之间的宽度 barWidth: 16, itemStyle: { normal: { color: 'none', borderColor: '#06DDDBFF', borderWidth: 1, barBorderRadius: 0, }, }, }, ], }; leftChartOnePlan.setOption(option); // 响应式调整 window.addEventListener("resize", function () { leftChartOnePlan.resize(); }); } function getEngineeringFiveActual() { const leftChartOneActual = echarts.init(document.getElementById("engineeringFiveActual")); const option = { grid: { left: '20%', right: '15%', bottom: '20%', containLabel: false, top: '10%' // 添加顶部间距 }, xAxis: { show: false, //不显示x轴相关信息 }, yAxis: [ { show: true, type: 'category', data: ['实际'], axisTick: {show: false}, //不显示刻度线 axisLabel: { color: '#fff', padding: [0, 10, 0, 10], // 增加标签内边距 }, axisLine: { show: false, }, }, { show: true, type: 'category', data: [12], axisTick: {show: false}, //不显示刻度线 axisLabel: { color: '#fff', formatter: '{value}%', padding: [0, 10, 0, 10], // 增加标签内边距 }, axisLine: { show: false, }, }, ], series: [ { name: '左间隔', type: 'bar', yAxisIndex: 0, barWidth: 15, stack: '内部', // 使用堆叠 data: [0.3], itemStyle: { normal: { color: 'transparent' } } }, { name: '条', z: 1, yAxisIndex: 0, type: 'bar', stack: '内部', data: [99], itemStyle: { normal: { barBorderRadius: 0, color: { x: 1, y: 0, x2: 0, y2: 0, colorStops: [{ offset: 0, color: '#9FF8E3' // 0% 处的颜色 }, { offset: 0.6, color: '#4FFDCF' // 100% 处的颜色 }, { offset: 1, color: '#1BF6BF' // 100% 处的颜色 }], }, }, }, barWidth: 15, }, { name: '右间隔', type: 'bar', yAxisIndex: 0, barWidth: 15, stack: '内部', data: [0.3], itemStyle: { normal: { color: 'transparent' } } }, { name: '框', z: 0, yAxisIndex: 1, type: 'bar', data: [100], // 柱子之间的宽度 barWidth: 16, itemStyle: { normal: { color: 'none', borderColor: '#06DDDBFF', borderWidth: 1, barBorderRadius: 0, }, }, }, ], }; leftChartOneActual.setOption(option); // 响应式调整 window.addEventListener("resize", function () { leftChartOneActual.resize(); }); }