zhaoqiang
/
v3tianjin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1

master
“yu” 2024-07-17 09:55:47 +08:00
parent 3ed21681f0
commit 2402fb4d81
3 changed files with 566 additions and 554 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
dist.zip
View File

Binary file not shown.

981
src/views/commonPage/3DPie.vue
View File

File diff suppressed because it is too large Load Diff

139
src/views/pages/homePage/index.vue
View File

@ -49,10 +49,10 @@
<div class="total_load_3dEchart"> <div class="total_load_3dEchart">
<div class="title_load fs40">负荷户数比例</div> <div class="title_load fs40">负荷户数比例</div>
<div class="echarts"> <div class="echarts">
<!-- <Threepie <Threepie
v-if="show" v-if="show"
:threeDPieData="leftData.threeDPieData" :threeDPieData="leftData.threeDPieData"
></Threepie> --> ></Threepie>
</div> </div>
</div> </div>
</div> </div>
@ -163,12 +163,12 @@
<p>可调负荷</p> <p>可调负荷</p>
</div> </div>
<div class="total_load_3dEchart"> <div class="total_load_3dEchart">
<div class="title_load fs40">负荷户数比例</div> <div class="title_load fs40">充电桩户数比例</div>
<div class="echarts"> <div class="echarts">
<!-- <Threepie <Threepie
v-if="show" v-if="show"
:threeDPieData="leftData.threeDPieData1" :threeDPieData="leftData.threeDPieData1"
></Threepie> --> ></Threepie>
</div> </div>
<!-- <threeDPie :threeDPieData="leftData.threeDPieData"></threeDPie> --> <!-- <threeDPie :threeDPieData="leftData.threeDPieData"></threeDPie> -->
@ -1073,12 +1073,12 @@ const getStatInfo = async () => {
// 资源总览 // 资源总览
// 荷 // 荷
interface leftDataInfo { interface leftDataInfo {
businessValue: string, businessValue: string;
residentValue: string, residentValue: string;
tableData: tableInfo1[][] tableData: tableInfo1[][];
tableData1: tableInfo1[][], tableData1: tableInfo1[][];
threeDPieData: any threeDPieData: any;
threeDPieData1:any threeDPieData1: any;
} }
interface tableInfo1 { interface tableInfo1 {
index: string; index: string;
@ -1089,113 +1089,106 @@ interface tableInfo1 {
} }
let show = ref(true); let show = ref(true);
let leftData = reactive<leftDataInfo>({ let leftData = reactive<leftDataInfo>({
businessValue: '0', businessValue: "0",
residentValue: '0', residentValue: "0",
tableData: [], tableData: [],
tableData1: [], tableData1: [],
// 3d饼图数据 // 3d饼图数据
threeDPieData: { threeDPieData: {
pieData: [ pieData: [
{ {
name: "谷段", //名称 name: "35kV", //名称
value: 10, //值 value: 3, //值
itemStyle: { itemStyle: {
color: "#EE5944",//半透明 color: "#EE5944", //半透明 232 158 205
// color: "rgba(250,189,101,.8)",//半透明 232 158 205
}, },
}, },
{ {
name: "高峰", name: "10kV",
value: 20, value: 5,
itemStyle: {
color: "#2E53F5",
},
},
{
name: "尖峰",
value: 40,
itemStyle: { itemStyle: {
// color: "#2E53F5",
color: "#F1BA50", color: "#F1BA50",
}, },
}, },
{ {
name: "平段", name: "0.4kV",
value: 40, value: 393,
itemStyle: { itemStyle: {
color: "#6FFBF7", // color: "#F1BA50",
color: "#2E53F5",
}, },
} },
], ],
total: 108, total: 108,
center: 0.9, // 是否圆环 center: 0.85, // 是否圆环
legend: { legend: {
show:false, // show:false,
orient: 'horizontal', orient: "horizontal",
left: 'center', show: false,
top: '-3%', left: "center",
itemGap: 20 top: "10%",
itemGap: 1990,
}, },
grid3D: { grid3D: {
viewControl: { viewControl: {
distance: 350, // 缩放视角 distance: 250, // 缩放视角
alpha: 45, // 角度 alpha: 45, // 角度
} },
}, },
// radius: ["40%", "40%"], getHeight3D: 20, // 高度
// center: ["50%", "50%"],
getHeight3D: 40, // 高度
}, },
// 3d饼图数据1 // 3d饼图数据1
threeDPieData1: { threeDPieData1: {
pieData: [ pieData: [
{ {
name: "谷段", //名称 name: "居民充电桩", //名称
value: 10, //值 value: 10, //值
itemStyle: { itemStyle: {
color: "#EE5944",//半透明 color: "#EE5944", //半透明 232 158 205
// color: "rgba(250,189,101,.8)",//半透明 232 158 205
}, },
}, },
{ {
name: "高峰", name: "商业充电桩",
value: 20, value: 20,
itemStyle: { itemStyle: {
color: "#2E53F5", color: "#2E53F5",
}, },
}, },
{ {
name: "尖峰", name: "V2G充电桩",
value: 40, value: 40,
itemStyle: { itemStyle: {
color: "#F1BA50", color: "#F1BA50",
}, },
}, },
{
name: "平段",
value: 40,
itemStyle: {
color: "#6FFBF7",
},
}
], ],
total: 108, total: 108,
center: 0.9, // 是否圆环 center: 0.85, // 是否圆环
legend: { legend: {
// show:false,
show: false, //工具栏不展示
tooltip: {
show: true,
},
orient: "horizontal",
orient: 'horizontal', left: "center",
left: 'center',
top: '-30%', top: "2%",
itemGap: 20 itemGap: 1990,
}, },
grid3D: { grid3D: {
viewControl: { viewControl: {
distance: 350, // 缩放视角 distance: 250, // 缩放视角
alpha: 45, // 角度 alpha: 35, // 角度
} },
}, },
// radius: ["40%", "40%"], getHeight3D: 30, // 高度
// center: ["50%", "50%"], },
getHeight3D: 40, // 高度 });
}
})
// 网 // 网
// 网盒子得标识 // 网盒子得标识
let networkContentFlag = ref(true); let networkContentFlag = ref(true);
@ -1870,6 +1863,12 @@ const styleVar = computed(() => {
top: changeHeight(-20); top: changeHeight(-20);
width: changeWidth(506.97); width: changeWidth(506.97);
height: changeHeight(325.41); height: changeHeight(325.41);
left: changeHeight(-200);
top: changeHeight(-120);
width: changeWidth(506.97);
height: changeHeight(325.41);
width: changeWidth(1006.97);
height: changeHeight(625.41);
} }
} }
} }
@ -1995,10 +1994,12 @@ const styleVar = computed(() => {
} }
.echarts { .echarts {
position: absolute; position: absolute;
left: changeHeight(-100); left: changeHeight(-220);
top: changeHeight(-20); top: changeHeight(-120);
width: changeWidth(506.97); width: changeWidth(506.97);
height: changeHeight(325.41); height: changeHeight(325.41);
width: changeWidth(1006.97);
height: changeHeight(625.41);
} }
} }
} }