1252 lines
37 KiB
JavaScript
1252 lines
37 KiB
JavaScript
//变电土建专业
|
|
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();
|
|
});
|
|
}
|
|
|