liulonglong
/
shuinichang_
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Compare commits

base: liulonglong:0acead08f6de95067f5a2962c095856519f8b732
Branches Tags
liulonglong:master
..
compare: liulonglong:0dcfc36183cbe1ffb7674bb7bfe6882e376339d4
Branches Tags
liulonglong:master

2 Commits
0acead08f6 ... 0dcfc36183

Author SHA1 Message Date
unknown 0dcfc36183 Merge branch 'master' of http://git.umayle.com:2023/liulonglong/shuinichang_ 2023-12-07 18:20:41 +08:00
unknown 267ea0ba2b zyh 2023-12-07 18:20:36 +08:00
5 changed files with 648 additions and 180 deletions
Show Stats Expand all files Collapse all files

4
src/views/Zhou/FHGL.vue
View File

@ -410,7 +410,7 @@ export default {
// 这里需要进行修改 // 这里需要进行修改
// formatter: function (params) { // formatter: function (params) {
// return params.chartData1.name + "/n" + params.chartData1.value + "kw" // return params.chartData1.name + "/n" + params.chartData1.value + "kw"
// } // }
}, },
labelLine: { labelLine: {
//label线的长度 //label线的长度
@ -526,7 +526,7 @@ export default {
initChart() { initChart() {
this.statusChart = echarts.init(this.$refs.chart); this.statusChart = echarts.init(this.$refs.chart);
// 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细 // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
this.option = getPie3D(this.optionData, 0.6, 180, 26, 18, 1); this.option = getPie3D(this.optionData, 0, 270, 26, 40, 1);
this.statusChart.setOption(this.option); this.statusChart.setOption(this.option);
// 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
this.option.series.push({ this.option.series.push({

342
src/views/Zhou/NXGL.vue
View File

@ -14,13 +14,47 @@
<img src="../../assets/img/小标题栏.png" class="img" /> <img src="../../assets/img/小标题栏.png" class="img" />
<p>能源流向</p> <p>能源流向</p>
</div> </div>
<div id="nylx"></div> <div id="nylx">
<div class="zbm">原始值折标煤</div>
<div class="shui">水</div>
<div class="dian">电</div>
<div class="yrfd">余热发电</div>
<div class="mei">煤</div>
<div class="yr_one">1号生产线</div>
<div class="yr_two">2号生产线</div>
<div class="yr_three">3号生产线</div>
<div class="mei_one">1号生产线</div>
<div class="mei_two">2号生产线</div>
<div class="mei_three">3号生产线</div>
</div>
</div> </div>
<div class="ffl"> <div class="ffl">
<div class="imgBox"> <div class="imgBox">
<img src="../../assets/img/小标题栏.png" class="img" /> <img src="../../assets/img/小标题栏.png" class="img" />
<p>复费率</p> <p>复费率</p>
</div> </div>
<div class="tit">
<div class="first">
<span class="one"></span>
<span class="two">尖峰时段用电量</span>
</div>
<div class="second">
<span class="one"></span>
<span class="two">平时段用电量</span>
</div>
<div class="thrid">
<span class="one"></span>
<span class="two">深谷时段用电量</span>
</div>
<div class="fourth">
<span class="one"></span>
<span class="two">峰时段用电量</span>
</div>
<div class="fifth">
<span class="one"></span>
<span class="two">谷时段用电量</span>
</div>
</div>
<div id="ffl"></div> <div id="ffl"></div>
</div> </div>
<div class="nxdb"> <div class="nxdb">
@ -185,6 +219,7 @@ export default {
}, },
], ],
option1: { option1: {
layoutIterations: 0,
tooltip: { tooltip: {
trigger: "item", trigger: "item",
triggerOn: "mousemove", triggerOn: "mousemove",
@ -202,7 +237,8 @@ export default {
top: "2%", top: "2%",
bottom: "5%", bottom: "5%",
left: "5%", left: "5%",
right: "13%", right: "12%",
draggable: false,
lineStyle: { lineStyle: {
opacity: 0.3, opacity: 0.3,
color: "gradient", color: "gradient",
@ -215,21 +251,20 @@ export default {
return params.name; return params.name;
}, },
rich: { rich: {
white: { // white: {
fontSize: 20, // fontSize: 20,
padding: [10, 0, 0, 0], // padding: [10, 0, 0, 0],
}, // },
}, },
}, },
nodeGap: 20, nodeGap: 10,
layoutIterations: 1,
emphasis: { emphasis: {
// focus: "adjacency", focus: "adjacency",
}, },
data: [ data: [
{ name: "原始值折标煤", itemStyle: { color: "#5FE3D9" }, depth: 0 }, { name: "原始值折标煤", itemStyle: { color: "#5FE3D9" }, depth: 0 },
{ name: "水", itemStyle: { color: "#55A9CE" }, depth: 1 },
{ name: "电", itemStyle: { color: "#55A9CE" }, depth: 1 }, { name: "电", itemStyle: { color: "#55A9CE" }, depth: 1 },
{ name: "水", itemStyle: { color: "#55A9CE" }, depth: 1 },
{ name: "余热发电", itemStyle: { color: "#55A9CE" }, depth: 1 }, { name: "余热发电", itemStyle: { color: "#55A9CE" }, depth: 1 },
{ name: "煤", itemStyle: { color: "#55A9CE" }, depth: 1 }, { name: "煤", itemStyle: { color: "#55A9CE" }, depth: 1 },
{ {
@ -268,20 +303,33 @@ export default {
itemStyle: { color: "#52DBF1" }, itemStyle: { color: "#52DBF1" },
depth: 2, depth: 2,
}, },
{
name: "",
id: "121",
itemStyle: { color: "transparent" },
depth: 2,
},
{
name: "",
id: "122",
itemStyle: { color: "transparent" },
depth: 2,
},
], ],
links: [ links: [
// L1→L3 4509 { source: "原始值折标煤", target: "水", value: 5 },
{ source: "原始值折标煤", target: "水", value: 800 }, { source: "原始值折标煤", target: "电", value: 5 },
{ source: "原始值折标煤", target: "电", value: 800 }, { source: "原始值折标煤", target: "余热发电", value: 9 },
{ source: "原始值折标煤", target: "余热发电", value: 800 }, { source: "原始值折标煤", target: "煤", value: 9 },
{ source: "原始值折标煤", target: "煤", value: 800 },
// L1→L2→L3 2404 { source: "水", target: "121", value: 5 },
{ source: "煤", target: "11", value: 200 }, { source: "电", target: "122", value: 5 },
{ source: "煤", target: "22", value: 200 }, { source: "余热发电", target: "1", value: 3 },
{ source: "煤", target: "33", value: 200 }, { source: "余热发电", target: "2", value: 3 },
{ source: "余热发电", target: "1", value: 200 }, { source: "余热发电", target: "3", value: 3 },
{ source: "余热发电", target: "2", value: 200 }, { source: "煤", target: "11", value: 3 },
{ source: "余热发电", target: "3", value: 200 }, { source: "煤", target: "22", value: 3 },
{ source: "煤", target: "33", value: 3 },
], ],
}, },
}, },
@ -996,19 +1044,19 @@ export default {
colorStops: [ colorStops: [
{ {
offset: 0, offset: 0,
color: "#FFB41D", color: "rgba(255, 180, 29, .7)",
}, },
{ {
offset: 0.5, offset: 0.5,
color: "#FFB41D", color: "rgba(255, 180, 29, .5)",
}, },
{ {
offset: 0.5, offset: 0.5,
color: "#927719", color: "rgba(255, 180, 29, .5)",
}, },
{ {
offset: 1, offset: 1,
color: "#927719", color: "rgba(255, 180, 29, .7)",
}, },
], ],
}, },
@ -1021,19 +1069,19 @@ export default {
colorStops: [ colorStops: [
{ {
offset: 0, offset: 0,
color: "#E7EE01", color: "rgba(231, 238, 1, .7)",
}, },
{ {
offset: 0.5, offset: 0.5,
color: "#E7EE01", color: "rgba(231, 238, 1, .5)",
}, },
{ {
offset: 0.5, offset: 0.5,
color: "#556B1E", color: "rgba(231, 238, 1, .7)",
}, },
{ {
offset: 1, offset: 1,
color: "#556B1E", color: "rgba(231, 238, 1, .5)",
}, },
], ],
}, },
@ -1046,19 +1094,19 @@ export default {
colorStops: [ colorStops: [
{ {
offset: 0, offset: 0,
color: "#03D258", color: "rgba(3, 210, 88, .7)",
}, },
{ {
offset: 0.5, offset: 0.5,
color: "#03D258", color: "rgba(3, 210, 88, .5)",
}, },
{ {
offset: 0.5, offset: 0.5,
color: "#359542", color: "rgba(3, 210, 88, .5)",
}, },
{ {
offset: 1, offset: 1,
color: "#359542", color: "rgba(3, 210, 88, .7)",
}, },
], ],
}, },
@ -1071,19 +1119,19 @@ export default {
colorStops: [ colorStops: [
{ {
offset: 0, offset: 0,
color: "#1B9EE4", color: "rgba(27, 158, 228, .7)",
}, },
{ {
offset: 0.5, offset: 0.5,
color: "#1B9EE4", color: "rgba(27, 158, 228, .5)",
}, },
{ {
offset: 0.5, offset: 0.5,
color: "#1B9EE4", color: "rgba(27, 158, 228, .5)",
}, },
{ {
offset: 1, offset: 1,
color: "#1B9EE4", color: "rgba(27, 158, 228, .7)",
}, },
], ],
}, },
@ -1096,19 +1144,19 @@ export default {
colorStops: [ colorStops: [
{ {
offset: 0, offset: 0,
color: "#02CFCD", color: "rgba(2, 207, 205, .7)",
}, },
{ {
offset: 0.5, offset: 0.5,
color: "#02CFCD", color: "rgba(2, 207, 205, .5)",
}, },
{ {
offset: 0.5, offset: 0.5,
color: "#02CFCD", color: "rgba(2, 207, 205, .5)",
}, },
{ {
offset: 1, offset: 1,
color: "#02CFCD", color: "rgba(2, 207, 205, .7)",
}, },
], ],
}, },
@ -1118,7 +1166,7 @@ export default {
tooltip: { tooltip: {
show: true, show: true,
trigger: "axis", //axis , item trigger: "axis", //axis , item
backgroundColor: "RGBA(0, 49, 85, 0.5)", // backgroundColor: "RGBA(0, 49, 85, 0.5)",
borderColor: "rgba(0, 151, 251, 0)", borderColor: "rgba(0, 151, 251, 0)",
borderWidth: 1, borderWidth: 1,
borderRadius: 0, borderRadius: 0,
@ -1136,23 +1184,23 @@ export default {
grid: { grid: {
left: "6%", left: "6%",
right: "4%", right: "4%",
top: 50, top: "6%",
bottom: 40, bottom: 40,
}, },
/**图例大小*/ /**图例大小*/
legend: { // legend: {
icon: "rect", // icon: "rect",
data: Lengths, // data: Lengths,
textStyle: { // textStyle: {
color: "#BFEBFF", // color: "#BFEBFF",
fontSize: 30, // fontSize: 30,
}, // },
itemHeight: 16, // itemHeight: 16,
itemWidth: 30, // itemWidth: 30,
left: "15%", // left: "15%",
top: 0, // top: 0,
itemGap: 50, // itemGap: 50,
}, // },
//X轴 //X轴
xAxis: { xAxis: {
data: xData, data: xData,
@ -1160,7 +1208,7 @@ export default {
margin: 20, margin: 20,
interval: 0, //设置为 1，表示『隔一个标签显示一个标签』 interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
textStyle: { textStyle: {
color: "#BFEBFF", color: "#FFFFFF",
fontStyle: "normal", fontStyle: "normal",
fontSize: 16, fontSize: 16,
}, },
@ -1168,7 +1216,7 @@ export default {
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: "#BFEBFF", color: "#FFFFFF",
}, },
}, },
splitLine: { splitLine: {
@ -1187,14 +1235,14 @@ export default {
name: "单位：kWh", name: "单位：kWh",
nameTextStyle: { nameTextStyle: {
fontSize: 18, fontSize: 18,
color: "#BFEBFF", color: "#FFFFFF",
}, },
show: true, show: true,
splitNumber: 4, splitNumber: 4,
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: "#BFEBFF", color: "#FFFFFF",
}, },
}, },
splitLine: { splitLine: {
@ -1208,7 +1256,7 @@ export default {
//坐标轴刻度标签的相关设置。 //坐标轴刻度标签的相关设置。
interval: 0, //设置为 1，表示『隔一个标签显示一个标签』 interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
textStyle: { textStyle: {
color: "#BFEBFF", color: "#FFFFFF",
fontStyle: "normal", fontStyle: "normal",
fontSize: 18, fontSize: 18,
}, },
@ -1329,7 +1377,7 @@ export default {
// } // }
}, },
mounted() { mounted() {
this.defineEcharts("nylx", this.option1); // this.defineEcharts("nylx", this.option1);
// this.dfdj(); // this.dfdj();
this.dfdj2(); this.dfdj2();
this.ffl(); this.ffl();
@ -1400,8 +1448,70 @@ export default {
#nylx { #nylx {
width: 1155px; width: 1155px;
height: 500px; height: 650px;
margin-top: 50px; margin-top: 50px;
background: url(../../assets/liutu/能效.png);
background-size: cover;
font-size: 24px;
font-family: MicrosoftYaHei;
color: #ffffff;
position: relative;
.zbm {
position: absolute;
left: 60px;
top: 200px;
}
.shui{
position: absolute;
left: 470px;
top: 15px;
}
.dian{
position: absolute;
left: 470px;
top: 96px;
}
.yrfd{
position: absolute;
left: 470px;
top: 272px;
}
.mei{
position: absolute;
left: 470px;
top: 526px;
}
.yr_one{
position: absolute;
left: 880px;
top: 182px;
}
.yr_two{
position: absolute;
left: 880px;
top: 262px;
}
.yr_three{
position: absolute;
left: 880px;
top: 342px;
}
.mei_one{
position: absolute;
left: 880px;
top: 432px;
}
.mei_two{
position: absolute;
left: 880px;
top: 512px;
}
.mei_three{
position: absolute;
left: 880px;
top: 592px;
}
} }
} }
@ -1422,10 +1532,110 @@ export default {
font-family: "MicrosoftYaHei"; font-family: "MicrosoftYaHei";
} }
} }
.tit {
width: 1000px;
height: 90px;
margin-top: 40px;
margin-left: 100px;
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
justify-content: flex-start;
align-content: space-around;
.first {
width: 234px;
margin-left: 80px;
height: 33px;
font-size: 20px;
font-family: MicrosoftYaHei;
color: #ffffff;
line-height: 20px;
display: flex;
.one {
width: 55px;
height: 23px;
background: #ffb41d;
opacity: 1;
display: block;
margin-right: 10px;
}
}
.second {
width: 234px;
margin-left: 80px;
height: 33px;
font-size: 20px;
font-family: MicrosoftYaHei;
color: #ffffff;
line-height: 20px;
display: flex;
.one {
width: 55px;
height: 23px;
background: #e7ee01;
opacity: 1;
display: block;
margin-right: 10px;
}
}
.thrid {
width: 234px;
margin-left: 80px;
height: 33px;
font-size: 20px;
font-family: MicrosoftYaHei;
color: #ffffff;
line-height: 20px;
display: flex;
.one {
width: 55px;
height: 23px;
background: #03d258;
opacity: 1;
display: block;
margin-right: 10px;
}
}
.fourth {
width: 234px;
margin-left: 80px;
height: 33px;
font-size: 20px;
font-family: MicrosoftYaHei;
color: #ffffff;
line-height: 20px;
display: flex;
.one {
width: 55px;
height: 23px;
background: #1b9ee4;
opacity: 1;
display: block;
margin-right: 10px;
}
}
.fifth {
width: 234px;
margin-left: 80px;
height: 33px;
font-size: 20px;
font-family: MicrosoftYaHei;
color: #ffffff;
line-height: 20px;
display: flex;
.one {
width: 55px;
height: 23px;
background: #02cfcd;
opacity: 1;
display: block;
margin-right: 10px;
}
}
}
#ffl { #ffl {
width: 1155px; width: 1155px;
height: 500px; height: 600px;
margin-top: 50px; margin-top: 50px;
} }
} }

4
src/views/Zhou/NXGLNH.vue
View File

@ -427,8 +427,8 @@ export default {
show: false show: false
}, },
legend: { legend: {
itemWidth:8, itemWidth:16,
itemHeight:8, itemHeight:16,
icon: "rect", icon: "rect",
orient: '', orient: '',
x: 'right', x: 'right',

474
src/views/Zhou/TZCGL.vue
View File

@ -61,7 +61,49 @@
<img src="../../assets/img/小标题栏.png" class="img" /> <img src="../../assets/img/小标题栏.png" class="img" />
<p>碳流图</p> <p>碳流图</p>
</div> </div>
<div id="tlt"></div> <div id="tlt">
<div class="zong">
<p>总量</p>
<p class="count">2641.76</p>
</div>
<div class="mei">
<p>煤</p>
<p class="count">28.51</p>
</div>
<div class="dian">
<p>电</p>
<p class="count">871</p>
</div>
<div class="chaiyou">
<p>柴油</p>
<p class="count">329</p>
</div>
<div class="qiyou">
<p>汽油<span class="count">18.31</span></p>
</div>
<div class="ycl">
<p>原材料</p>
<p class="count">255</p>
</div>
<div class="m_one">1号生产线<span class="count">747.24</span></div>
<div class="m_two">2号生产线<span class="count">128.53</span></div>
<div class="m_three">3号生产线<span class="count">114.19</span></div>
<div class="d_one">1号生产线<span class="count">747.24</span></div>
<div class="d_two">2号生产线<span class="count">128.53</span></div>
<div class="d_three">3号生产线<span class="count">114.19</span></div>
<div class="d_po">破碎<span class="count">747.24</span></div>
<div class="d_fen">粉磨站<span class="count">128.53</span></div>
<div class="d_fzgj">辅助工具<span class="count">114.19</span></div>
<div class="chai_one">1号生产线<span class="count">747.24</span></div>
<div class="chai_two">2号生产线<span class="count">128.53</span></div>
<div class="chai_three">3号生产线<span class="count">114.19</span></div>
<div class="chai_ydy">移动源<span class="count">747.24</span></div>
<div class="qi_ydy">移动源<span class="count">747.24</span></div>
<div class="ycl_one">1号生产线<span class="count">747.24</span></div>
<div class="ycl_two">2号生产线<span class="count">128.53</span></div>
<div class="ycl_three">3号生产线<span class="count">114.19</span></div>
</div>
</div> </div>
<div class="tpfl"> <div class="tpfl">
<div class="imgBox"> <div class="imgBox">
@ -264,7 +306,8 @@ export default {
type: "line", type: "line",
name: "碳排放量", name: "碳排放量",
data: [ data: [
15, 30, 25, 20, 30, 20, 25, 23, 21, 19, 32, 36, 19, 20, 18, 20, 9,28,21,32,24 15, 30, 25, 20, 30, 20, 25, 23, 21, 19, 32, 36, 19, 20, 18, 20, 9,
28, 21, 32, 24,
], ],
// smooth: true, // smooth: true,
itemStyle: { itemStyle: {
@ -296,6 +339,8 @@ export default {
], ],
}, },
option2: { option2: {
// nodeWidth:120,
layoutIterations: 0,
tooltip: { tooltip: {
trigger: "item", trigger: "item",
triggerOn: "mousemove", triggerOn: "mousemove",
@ -314,6 +359,7 @@ export default {
bottom: "5%", bottom: "5%",
left: "5%", left: "5%",
right: "13%", right: "13%",
draggable: false,
lineStyle: { lineStyle: {
opacity: 0.3, opacity: 0.3,
color: "gradient", color: "gradient",
@ -333,7 +379,6 @@ export default {
}, },
}, },
nodeGap: 10, nodeGap: 10,
layoutIterations: 1,
emphasis: { emphasis: {
// focus: "adjacency", // focus: "adjacency",
}, },
@ -345,8 +390,8 @@ export default {
depth: 0, depth: 0,
}, },
{ {
name: "原材料", name: "煤",
value: "461.71", value: "28.51",
itemStyle: { color: "#55A9CE" }, itemStyle: { color: "#55A9CE" },
depth: 1, depth: 1,
}, },
@ -358,40 +403,48 @@ export default {
}, },
{ {
name: "柴油", name: "柴油",
value: "290.76", value: "329",
itemStyle: { color: "#55A9CE" }, itemStyle: { color: "#55A9CE" },
depth: 1, depth: 1,
}, },
{ {
name: "煤", name: "汽油",
value: "28.51", value: "18.31",
itemStyle: { color: "#55A9CE" }, itemStyle: { color: "#55A9CE" },
depth: 1, depth: 1,
}, },
{
name: "原材料",
value: "255",
itemStyle: { color: "#55A9CE" },
depth: 1,
},
//1
{ {
name: "1号生产线", name: "1号生产线",
value: "28.51", value: "747.24",
id: "1", id: "1",
itemStyle: { color: "#52DBF1" }, itemStyle: { color: "#52DBF1" },
depth: 2, depth: 2,
}, },
{ {
name: "2号生产线", name: "2号生产线",
value: "28.51", value: "128.53",
id: "2", id: "2",
itemStyle: { color: "#52DBF1" }, itemStyle: { color: "#52DBF1" },
depth: 2, depth: 2,
}, },
{ {
name: "3号生产线", name: "3号生产线",
value: "28.51", value: "114.19",
id: "3", id: "3",
itemStyle: { color: "#52DBF1" }, itemStyle: { color: "#52DBF1" },
depth: 2, depth: 2,
}, },
//2
{ {
name: "1号生产线", name: "1号生产线",
value: "28.51", value: "747.24",
id: "11", id: "11",
itemStyle: { color: "#52DBF1" }, itemStyle: { color: "#52DBF1" },
depth: 2, depth: 2,
@ -410,9 +463,31 @@ export default {
itemStyle: { color: "#52DBF1" }, itemStyle: { color: "#52DBF1" },
depth: 2, depth: 2,
}, },
{
name: "破碎",
value: "747.24",
id: "44",
itemStyle: { color: "#52DBF1" },
depth: 2,
},
{
name: "粉磨站",
value: "128.53",
id: "55",
itemStyle: { color: "#52DBF1" },
depth: 2,
},
{
name: "辅助办公",
value: "114.19",
id: "66",
itemStyle: { color: "#52DBF1" },
depth: 2,
},
//3
{ {
name: "1号生产线", name: "1号生产线",
value: "28.51", value: "747.24",
id: "111", id: "111",
itemStyle: { color: "#52DBF1" }, itemStyle: { color: "#52DBF1" },
depth: 2, depth: 2,
@ -432,46 +507,72 @@ export default {
depth: 2, depth: 2,
}, },
{ {
name: "1号生产线", name: "移动源",
value: "28.51", value: "747.24",
id: "444",
itemStyle: { color: "#52DBF1" },
depth: 2,
},
//4
{
name: "移动源",
value: "747.24",
id: "1111", id: "1111",
itemStyle: { color: "#52DBF1" }, itemStyle: { color: "#52DBF1" },
depth: 2, depth: 2,
}, },
//5
{
name: "1号生产线",
value: "747.24",
id: "11111",
itemStyle: { color: "#52DBF1" },
depth: 2,
},
{ {
name: "2号生产线", name: "2号生产线",
value: "28.51", value: "28.51",
id: "2222", id: "22222",
itemStyle: { color: "#52DBF1" }, itemStyle: { color: "#52DBF1" },
depth: 2, depth: 2,
}, },
{ {
name: "3号生产线", name: "3号生产线",
value: "28.51", value: "28.51",
id: "3333", id: "33333",
itemStyle: { color: "#52DBF1" }, itemStyle: { color: "#52DBF1" },
depth: 2, depth: 2,
}, },
], ],
links: [ links: [
// L1→L3 4509 // L1→L3 4509
{ source: "总量", target: "柴油", value: 1200 }, { source: "总量", target: "煤", value: 1800 },
{ source: "总量", target: "电", value: 1200 }, { source: "总量", target: "电", value: 3600 },
{ source: "总量", target: "原材料", value: 1200 }, { source: "总量", target: "柴油", value: 2400 },
{ source: "总量", target: "煤", value: 1200 }, { source: "总量", target: "汽油", value: 800 },
{ source: "总量", target: "原材料", value: 1800 },
// L1→L2→L3 2404 // L1→L2→L3 2404
{ source: "电", target: "1", value: 300 }, { source: "煤", target: "1", value: 300 },
{ source: "电", target: "2", value: 300 }, { source: "煤", target: "2", value: 300 },
{ source: "电", target: "3", value: 300 }, { source: "煤", target: "3", value: 300 },
{ source: "煤", target: "11", value: 300 },
{ source: "煤", target: "22", value: 300 }, { source: "电", target: "11", value: 300 },
{ source: "煤", target: "33", value: 300 }, { source: "电", target: "22", value: 300 },
{ source: "电", target: "33", value: 300 },
{ source: "电", target: "44", value: 300 },
{ source: "电", target: "55", value: 300 },
{ source: "电", target: "66", value: 300 },
{ source: "柴油", target: "111", value: 300 }, { source: "柴油", target: "111", value: 300 },
{ source: "柴油", target: "222", value: 300 }, { source: "柴油", target: "222", value: 300 },
{ source: "柴油", target: "333", value: 300 }, { source: "柴油", target: "333", value: 300 },
{ source: "原材料", target: "1111", value: 300 }, { source: "柴油", target: "444", value: 300 },
{ source: "原材料", target: "2222", value: 300 },
{ source: "原材料", target: "3333", value: 300 }, { source: "汽油", target: "1111", value: 400 },
{ source: "原材料", target: "11111", value: 300 },
{ source: "原材料", target: "22222", value: 300 },
{ source: "原材料", target: "33333", value: 300 },
], ],
}, },
}, },
@ -531,9 +632,9 @@ export default {
var labels = ""; var labels = "";
// var index = 0; // var index = 0;
var color = [ var color = [
"#00ffff", "#7EFAB7",
"#00cfff", "#55A9CE",
"#006ced", "#53DCF1",
"#ffe000", "#ffe000",
"#ffa800", "#ffa800",
"#ff5b00", "#ff5b00",
@ -550,6 +651,7 @@ export default {
shadowBlur: 20, shadowBlur: 20,
borderColor: color[index], borderColor: color[index],
shadowColor: color[index], shadowColor: color[index],
color: color[index],
}, },
}, },
}, },
@ -574,7 +676,7 @@ export default {
labels = { labels = {
show: true, show: true,
position: "outside", position: "outside",
color: "#ddd", color: "#fff",
formatter: function (params) { formatter: function (params) {
var percent = 0; var percent = 0;
var total = 0; var total = 0;
@ -600,7 +702,7 @@ export default {
}, },
rich: { rich: {
colors: { colors: {
color: color[index], color: color[1],
fontSize: 40, fontSize: 40,
align: "left", align: "left",
}, },
@ -611,78 +713,20 @@ export default {
}, },
}; };
}); });
// for (var i = 0; i < trafficWay.length; i++) {
// data.push({
// value: trafficWay[i].value,
// name: trafficWay[i].name,
// itemStyle: {
// normal: {
// borderWidth: 5,
// shadowBlur: 20,
// borderColor: color[i],
// shadowColor: color[i],
// }
// }
// }, {
// value: 40,
// name: '',
// itemStyle: {
// normal: {
// label: {
// show: false
// },
// labelLine: {
// show: false
// },
// color: 'rgba(0, 0, 0, 0)',
// borderColor: 'rgba(0, 0, 0, 0)',
// borderWidth: 0
// }
// }
// });
// labels = {
// show: true,
// position: 'outside',
// color: '#ddd',
// formatter: function (params) {
// var percent = 0;
// var total = 0;
// for (var k = 0; k < trafficWay.length; k++) {
// total += trafficWay[k].value;
// }
// percent = ((params.value / total) * 100).toFixed(0);
// if (params.name !== '') {
// return "{colors|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
// } else {
// return '';
// }
// },
// rich: {
// colors: {
// color: color[index],
// fontSize: 40,
// align: "left",
// },
// names: {
// color: "#fff",
// fontSize: 30,
// }
// },
// }
// }
var seriesOption = [ var seriesOption = [
{ {
name: "", name: "",
type: "pie", type: "pie",
clockWise: false, clockWise: false,
radius: [105, 109], radius: [195, 199],
center: ["36%", "50%"],
hoverAnimation: false, hoverAnimation: false,
itemStyle: { itemStyle: {
normal: { normal: {
label: labels, label: labels,
labelLine: { labelLine: {
length: 40, length: 20,
length2: 100, length2: 60,
show: true, show: true,
color: "#00ffff", color: "#00ffff",
}, },
@ -698,10 +742,10 @@ export default {
text: "257.1t", text: "257.1t",
top: "48%", top: "48%",
textAlign: "center", textAlign: "center",
left: "49%", left: "36%",
textStyle: { textStyle: {
color: "#fff", color: "#fff",
fontSize: 32, fontSize: 36,
fontWeight: "400", fontWeight: "400",
}, },
}, },
@ -725,6 +769,8 @@ export default {
show: false, show: false,
}, },
legend: { legend: {
itemWidth: 16,
itemHeight: 16,
icon: "rect", icon: "rect",
orient: "", orient: "",
x: "right", x: "right",
@ -742,12 +788,15 @@ export default {
value: "13.68", value: "13.68",
}, },
], ],
left: 900, left: 800,
bottom: 240, bottom: 240,
align: "left", align: "left",
formatter: (name) => { formatter: (name) => {
const item = trafficWay.filter((item) => item.name === name)[0]; const item = trafficWay.filter((item) => item.name === name)[0];
return `{name|${name}}` + `{num|${item.value}}{name|kWh}`; return (
`\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
`{num|${item.value}}{num|t}`
);
// return "\t" + "\t" + name + "\t" + "\t" + item.value + "\t" + "\t" + "kWh" // return "\t" + "\t" + name + "\t" + "\t" + item.value + "\t" + "\t" + "kWh"
}, },
textStyle: { textStyle: {
@ -1087,7 +1136,7 @@ export default {
initChart() { initChart() {
this.statusChart = echarts.init(this.$refs.chart); this.statusChart = echarts.init(this.$refs.chart);
// 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细 // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
this.option = getPie3D(this.optionData, 0.6, 180, 26, 18, 1); this.option = getPie3D(this.optionData, 0, 270, 26, 40, 1);
this.statusChart.setOption(this.option); this.statusChart.setOption(this.option);
// 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
this.option.series.push({ this.option.series.push({
@ -1277,7 +1326,7 @@ export default {
}, },
mounted() { mounted() {
this.defineEcharts("sstpf", this.option1); this.defineEcharts("sstpf", this.option1);
this.defineEcharts("tlt", this.option2); // this.defineEcharts("tlt", this.option2);
this.$nextTick(() => { this.$nextTick(() => {
this.getbing(); this.getbing();
this.tpfl(); this.tpfl();
@ -1389,7 +1438,7 @@ export default {
} }
#qybjzl { #qybjzl {
margin-top: 50px; margin-top: 40px;
width: 1151px; width: 1151px;
height: 511px; height: 511px;
background: url(../../assets/TZCGL/背景框6.png); background: url(../../assets/TZCGL/背景框6.png);
@ -1524,7 +1573,7 @@ export default {
.tlt { .tlt {
position: relative; position: relative;
margin-top: 56px; margin-top: 40px;
.imgBox { .imgBox {
height: 93px; height: 93px;
@ -1542,14 +1591,223 @@ export default {
#tlt { #tlt {
width: 1155px; width: 1155px;
height: 500px; height: 760px;
margin-top: 50px; margin-top: 40px;
background: url(../../assets/liutu/碳1.png);
background-size: cover;
position: relative;
font-size: 24px;
color: #ffffff;
font-family: MicrosoftYaHei;
}
.zong {
position: absolute;
left:56px;
top: 400px;
.count{
color: #5FFFF3;
}
}
.mei {
position: absolute;
left:456px;
top: 28px;
.count{
color: #48C4FB;
}
}
.dian {
position: absolute;
left:456px;
top: 228px;
.count{
color: #48C4FB;
}
}
.chaiyou {
position: absolute;
left:456px;
top: 456px;
.count{
color: #48C4FB;
}
}
.qiyou {
position: absolute;
left:456px;
top: 585px;
.count{
margin-left: 20px;
color: #48C4FB;
}
}
.ycl {
position: absolute;
left:456px;
top: 668px;
.count{
color: #48C4FB;
}
}
.m_one {
position: absolute;
left:846px;
top: 0px;
.count{
margin-left: 30px;
color: #52DBF1;
}
}
.m_two {
position: absolute;
left:846px;
top: 45px;
.count{
margin-left: 30px;
color: #52DBF1;
}
}
.m_three {
position: absolute;
left:846px;
top: 90px;
.count{
margin-left: 30px;
color: #52DBF1;
}
}
.d_one {
position: absolute;
left:846px;
top: 140px;
.count{
margin-left: 30px;
color: #52DBF1;
}
}
.d_two {
position: absolute;
left:846px;
top: 185px;
.count{
margin-left: 30px;
color: #52DBF1;
}
}
.d_three {
position: absolute;
left:846px;
top: 230px;
.count{
margin-left: 30px;
color: #52DBF1;
}
}
.d_po {
position: absolute;
left:846px;
top: 270px;
.count{
margin-left: 30px;
color: #52DBF1;
}
}
.d_fen {
position: absolute;
left:846px;
top: 310px;
.count{
margin-left: 30px;
color: #52DBF1;
}
}
.d_fzgj {
position: absolute;
left:846px;
top: 355px;
.count{
margin-left: 30px;
color: #52DBF1;
}
}
.chai_one {
position: absolute;
left:846px;
top: 405px;
.count{
margin-left: 30px;
color: #52DBF1;
}
}
.chai_two {
position: absolute;
left:846px;
top: 450px;
.count{
margin-left: 30px;
color: #52DBF1;
}
}
.chai_three {
position: absolute;
left:846px;
top: 495px;
.count{
margin-left: 30px;
color: #52DBF1;
}
}
.chai_ydy {
position: absolute;
left:846px;
top: 535px;
.count{
margin-left: 30px;
color: #52DBF1;
}
}
.qi_ydy {
position: absolute;
left:846px;
top: 585px;
.count{
margin-left: 30px;
color: #52DBF1;
}
}
.ycl_one {
position: absolute;
left:846px;
top: 640px;
.count{
margin-left: 30px;
color: #52DBF1;
}
}
.ycl_two {
position: absolute;
left:846px;
top: 680px;
.count{
margin-left: 30px;
color: #52DBF1;
}
}
.ycl_three {
position: absolute;
left:846px;
top: 725px;
.count{
margin-left: 30px;
color: #52DBF1;
}
} }
} }
.tpfl { .tpfl {
position: relative; position: relative;
margin-top: 56px; margin-top: 40px;
.imgBox { .imgBox {
height: 93px; height: 93px;

4
src/views/Zhou/TZCGLSL.vue
View File

@ -653,8 +653,8 @@ export default {
show: false show: false
}, },
legend: { legend: {
itemWidth:8, itemWidth:16,
itemHeight:8, itemHeight:16,
icon: "rect", icon: "rect",
orient: '', orient: '',
x: 'right', x: 'right',