Compare commits
2 Commits
0acead08f6
...
0dcfc36183
| Author | SHA1 | Date |
|---|---|---|
unknown
|
0dcfc36183 | |
|
unknown
|
267ea0ba2b |
|
|
@ -410,7 +410,7 @@ export default {
|
|||
// 这里需要进行修改
|
||||
// formatter: function (params) {
|
||||
// return params.chartData1.name + "/n" + params.chartData1.value + "kw"
|
||||
// }
|
||||
// }
|
||||
},
|
||||
labelLine: {
|
||||
//label线的长度
|
||||
|
|
@ -526,7 +526,7 @@ export default {
|
|||
initChart() {
|
||||
this.statusChart = echarts.init(this.$refs.chart);
|
||||
// 传入数据生成 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);
|
||||
// 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
|
||||
this.option.series.push({
|
||||
|
|
|
|||
|
|
@ -14,13 +14,47 @@
|
|||
<img src="../../assets/img/小标题栏.png" class="img" />
|
||||
<p>能源流向</p>
|
||||
</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 class="ffl">
|
||||
<div class="imgBox">
|
||||
<img src="../../assets/img/小标题栏.png" class="img" />
|
||||
<p>复费率</p>
|
||||
</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>
|
||||
<div class="nxdb">
|
||||
|
|
@ -185,6 +219,7 @@ export default {
|
|||
},
|
||||
],
|
||||
option1: {
|
||||
layoutIterations: 0,
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
triggerOn: "mousemove",
|
||||
|
|
@ -202,7 +237,8 @@ export default {
|
|||
top: "2%",
|
||||
bottom: "5%",
|
||||
left: "5%",
|
||||
right: "13%",
|
||||
right: "12%",
|
||||
draggable: false,
|
||||
lineStyle: {
|
||||
opacity: 0.3,
|
||||
color: "gradient",
|
||||
|
|
@ -215,21 +251,20 @@ export default {
|
|||
return params.name;
|
||||
},
|
||||
rich: {
|
||||
white: {
|
||||
fontSize: 20,
|
||||
padding: [10, 0, 0, 0],
|
||||
},
|
||||
// white: {
|
||||
// fontSize: 20,
|
||||
// padding: [10, 0, 0, 0],
|
||||
// },
|
||||
},
|
||||
},
|
||||
nodeGap: 20,
|
||||
layoutIterations: 1,
|
||||
nodeGap: 10,
|
||||
emphasis: {
|
||||
// focus: "adjacency",
|
||||
focus: "adjacency",
|
||||
},
|
||||
data: [
|
||||
{ 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 },
|
||||
{
|
||||
|
|
@ -268,20 +303,33 @@ export default {
|
|||
itemStyle: { color: "#52DBF1" },
|
||||
depth: 2,
|
||||
},
|
||||
{
|
||||
name: "",
|
||||
id: "121",
|
||||
itemStyle: { color: "transparent" },
|
||||
depth: 2,
|
||||
},
|
||||
{
|
||||
name: "",
|
||||
id: "122",
|
||||
itemStyle: { color: "transparent" },
|
||||
depth: 2,
|
||||
},
|
||||
],
|
||||
links: [
|
||||
// L1→L3 4509
|
||||
{ source: "原始值折标煤", target: "水", value: 800 },
|
||||
{ source: "原始值折标煤", target: "电", value: 800 },
|
||||
{ source: "原始值折标煤", target: "余热发电", value: 800 },
|
||||
{ source: "原始值折标煤", target: "煤", value: 800 },
|
||||
// L1→L2→L3 2404
|
||||
{ source: "煤", target: "11", value: 200 },
|
||||
{ source: "煤", target: "22", value: 200 },
|
||||
{ source: "煤", target: "33", value: 200 },
|
||||
{ source: "余热发电", target: "1", value: 200 },
|
||||
{ source: "余热发电", target: "2", value: 200 },
|
||||
{ source: "余热发电", target: "3", value: 200 },
|
||||
{ source: "原始值折标煤", target: "水", value: 5 },
|
||||
{ source: "原始值折标煤", target: "电", value: 5 },
|
||||
{ source: "原始值折标煤", target: "余热发电", value: 9 },
|
||||
{ source: "原始值折标煤", target: "煤", value: 9 },
|
||||
|
||||
{ source: "水", target: "121", value: 5 },
|
||||
{ source: "电", target: "122", value: 5 },
|
||||
{ source: "余热发电", target: "1", value: 3 },
|
||||
{ source: "余热发电", target: "2", value: 3 },
|
||||
{ source: "余热发电", target: "3", value: 3 },
|
||||
{ source: "煤", target: "11", value: 3 },
|
||||
{ source: "煤", target: "22", value: 3 },
|
||||
{ source: "煤", target: "33", value: 3 },
|
||||
],
|
||||
},
|
||||
},
|
||||
|
|
@ -996,19 +1044,19 @@ export default {
|
|||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#FFB41D",
|
||||
color: "rgba(255, 180, 29, .7)",
|
||||
},
|
||||
{
|
||||
offset: 0.5,
|
||||
color: "#FFB41D",
|
||||
color: "rgba(255, 180, 29, .5)",
|
||||
},
|
||||
{
|
||||
offset: 0.5,
|
||||
color: "#927719",
|
||||
color: "rgba(255, 180, 29, .5)",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#927719",
|
||||
color: "rgba(255, 180, 29, .7)",
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
@ -1021,19 +1069,19 @@ export default {
|
|||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#E7EE01",
|
||||
color: "rgba(231, 238, 1, .7)",
|
||||
},
|
||||
{
|
||||
offset: 0.5,
|
||||
color: "#E7EE01",
|
||||
color: "rgba(231, 238, 1, .5)",
|
||||
},
|
||||
{
|
||||
offset: 0.5,
|
||||
color: "#556B1E",
|
||||
color: "rgba(231, 238, 1, .7)",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#556B1E",
|
||||
color: "rgba(231, 238, 1, .5)",
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
@ -1046,19 +1094,19 @@ export default {
|
|||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#03D258",
|
||||
color: "rgba(3, 210, 88, .7)",
|
||||
},
|
||||
{
|
||||
offset: 0.5,
|
||||
color: "#03D258",
|
||||
color: "rgba(3, 210, 88, .5)",
|
||||
},
|
||||
{
|
||||
offset: 0.5,
|
||||
color: "#359542",
|
||||
color: "rgba(3, 210, 88, .5)",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#359542",
|
||||
color: "rgba(3, 210, 88, .7)",
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
@ -1071,19 +1119,19 @@ export default {
|
|||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#1B9EE4",
|
||||
color: "rgba(27, 158, 228, .7)",
|
||||
},
|
||||
{
|
||||
offset: 0.5,
|
||||
color: "#1B9EE4",
|
||||
color: "rgba(27, 158, 228, .5)",
|
||||
},
|
||||
{
|
||||
offset: 0.5,
|
||||
color: "#1B9EE4",
|
||||
color: "rgba(27, 158, 228, .5)",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#1B9EE4",
|
||||
color: "rgba(27, 158, 228, .7)",
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
@ -1096,19 +1144,19 @@ export default {
|
|||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#02CFCD",
|
||||
color: "rgba(2, 207, 205, .7)",
|
||||
},
|
||||
{
|
||||
offset: 0.5,
|
||||
color: "#02CFCD",
|
||||
color: "rgba(2, 207, 205, .5)",
|
||||
},
|
||||
{
|
||||
offset: 0.5,
|
||||
color: "#02CFCD",
|
||||
color: "rgba(2, 207, 205, .5)",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#02CFCD",
|
||||
color: "rgba(2, 207, 205, .7)",
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
@ -1118,7 +1166,7 @@ export default {
|
|||
tooltip: {
|
||||
show: true,
|
||||
trigger: "axis", //axis , item
|
||||
backgroundColor: "RGBA(0, 49, 85, 0.5)",
|
||||
// backgroundColor: "RGBA(0, 49, 85, 0.5)",
|
||||
borderColor: "rgba(0, 151, 251, 0)",
|
||||
borderWidth: 1,
|
||||
borderRadius: 0,
|
||||
|
|
@ -1136,23 +1184,23 @@ export default {
|
|||
grid: {
|
||||
left: "6%",
|
||||
right: "4%",
|
||||
top: 50,
|
||||
top: "6%",
|
||||
bottom: 40,
|
||||
},
|
||||
/**图例大小*/
|
||||
legend: {
|
||||
icon: "rect",
|
||||
data: Lengths,
|
||||
textStyle: {
|
||||
color: "#BFEBFF",
|
||||
fontSize: 30,
|
||||
},
|
||||
itemHeight: 16,
|
||||
itemWidth: 30,
|
||||
left: "15%",
|
||||
top: 0,
|
||||
itemGap: 50,
|
||||
},
|
||||
// legend: {
|
||||
// icon: "rect",
|
||||
// data: Lengths,
|
||||
// textStyle: {
|
||||
// color: "#BFEBFF",
|
||||
// fontSize: 30,
|
||||
// },
|
||||
// itemHeight: 16,
|
||||
// itemWidth: 30,
|
||||
// left: "15%",
|
||||
// top: 0,
|
||||
// itemGap: 50,
|
||||
// },
|
||||
//X轴
|
||||
xAxis: {
|
||||
data: xData,
|
||||
|
|
@ -1160,7 +1208,7 @@ export default {
|
|||
margin: 20,
|
||||
interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
|
||||
textStyle: {
|
||||
color: "#BFEBFF",
|
||||
color: "#FFFFFF",
|
||||
fontStyle: "normal",
|
||||
fontSize: 16,
|
||||
},
|
||||
|
|
@ -1168,7 +1216,7 @@ export default {
|
|||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#BFEBFF",
|
||||
color: "#FFFFFF",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
|
|
@ -1187,14 +1235,14 @@ export default {
|
|||
name: "单位：kWh",
|
||||
nameTextStyle: {
|
||||
fontSize: 18,
|
||||
color: "#BFEBFF",
|
||||
color: "#FFFFFF",
|
||||
},
|
||||
show: true,
|
||||
splitNumber: 4,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#BFEBFF",
|
||||
color: "#FFFFFF",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
|
|
@ -1208,7 +1256,7 @@ export default {
|
|||
//坐标轴刻度标签的相关设置。
|
||||
interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
|
||||
textStyle: {
|
||||
color: "#BFEBFF",
|
||||
color: "#FFFFFF",
|
||||
fontStyle: "normal",
|
||||
fontSize: 18,
|
||||
},
|
||||
|
|
@ -1329,7 +1377,7 @@ export default {
|
|||
// }
|
||||
},
|
||||
mounted() {
|
||||
this.defineEcharts("nylx", this.option1);
|
||||
// this.defineEcharts("nylx", this.option1);
|
||||
// this.dfdj();
|
||||
this.dfdj2();
|
||||
this.ffl();
|
||||
|
|
@ -1400,8 +1448,70 @@ export default {
|
|||
|
||||
#nylx {
|
||||
width: 1155px;
|
||||
height: 500px;
|
||||
height: 650px;
|
||||
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";
|
||||
}
|
||||
}
|
||||
|
||||
.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 {
|
||||
width: 1155px;
|
||||
height: 500px;
|
||||
height: 600px;
|
||||
margin-top: 50px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -427,8 +427,8 @@ export default {
|
|||
show: false
|
||||
},
|
||||
legend: {
|
||||
itemWidth:8,
|
||||
itemHeight:8,
|
||||
itemWidth:16,
|
||||
itemHeight:16,
|
||||
icon: "rect",
|
||||
orient: '',
|
||||
x: 'right',
|
||||
|
|
|
|||
|
|
@ -61,7 +61,49 @@
|
|||
<img src="../../assets/img/小标题栏.png" class="img" />
|
||||
<p>碳流图</p>
|
||||
</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 class="tpfl">
|
||||
<div class="imgBox">
|
||||
|
|
@ -264,7 +306,8 @@ export default {
|
|||
type: "line",
|
||||
name: "碳排放量",
|
||||
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,
|
||||
itemStyle: {
|
||||
|
|
@ -296,6 +339,8 @@ export default {
|
|||
],
|
||||
},
|
||||
option2: {
|
||||
// nodeWidth:120,
|
||||
layoutIterations: 0,
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
triggerOn: "mousemove",
|
||||
|
|
@ -314,6 +359,7 @@ export default {
|
|||
bottom: "5%",
|
||||
left: "5%",
|
||||
right: "13%",
|
||||
draggable: false,
|
||||
lineStyle: {
|
||||
opacity: 0.3,
|
||||
color: "gradient",
|
||||
|
|
@ -333,7 +379,6 @@ export default {
|
|||
},
|
||||
},
|
||||
nodeGap: 10,
|
||||
layoutIterations: 1,
|
||||
emphasis: {
|
||||
// focus: "adjacency",
|
||||
},
|
||||
|
|
@ -345,8 +390,8 @@ export default {
|
|||
depth: 0,
|
||||
},
|
||||
{
|
||||
name: "原材料",
|
||||
value: "461.71",
|
||||
name: "煤",
|
||||
value: "28.51",
|
||||
itemStyle: { color: "#55A9CE" },
|
||||
depth: 1,
|
||||
},
|
||||
|
|
@ -358,40 +403,48 @@ export default {
|
|||
},
|
||||
{
|
||||
name: "柴油",
|
||||
value: "290.76",
|
||||
value: "329",
|
||||
itemStyle: { color: "#55A9CE" },
|
||||
depth: 1,
|
||||
},
|
||||
{
|
||||
name: "煤",
|
||||
value: "28.51",
|
||||
name: "汽油",
|
||||
value: "18.31",
|
||||
itemStyle: { color: "#55A9CE" },
|
||||
depth: 1,
|
||||
},
|
||||
{
|
||||
name: "原材料",
|
||||
value: "255",
|
||||
itemStyle: { color: "#55A9CE" },
|
||||
depth: 1,
|
||||
},
|
||||
//1
|
||||
{
|
||||
name: "1号生产线",
|
||||
value: "28.51",
|
||||
value: "747.24",
|
||||
id: "1",
|
||||
itemStyle: { color: "#52DBF1" },
|
||||
depth: 2,
|
||||
},
|
||||
{
|
||||
name: "2号生产线",
|
||||
value: "28.51",
|
||||
value: "128.53",
|
||||
id: "2",
|
||||
itemStyle: { color: "#52DBF1" },
|
||||
depth: 2,
|
||||
},
|
||||
{
|
||||
name: "3号生产线",
|
||||
value: "28.51",
|
||||
value: "114.19",
|
||||
id: "3",
|
||||
itemStyle: { color: "#52DBF1" },
|
||||
depth: 2,
|
||||
},
|
||||
//2
|
||||
{
|
||||
name: "1号生产线",
|
||||
value: "28.51",
|
||||
value: "747.24",
|
||||
id: "11",
|
||||
itemStyle: { color: "#52DBF1" },
|
||||
depth: 2,
|
||||
|
|
@ -410,9 +463,31 @@ export default {
|
|||
itemStyle: { color: "#52DBF1" },
|
||||
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号生产线",
|
||||
value: "28.51",
|
||||
value: "747.24",
|
||||
id: "111",
|
||||
itemStyle: { color: "#52DBF1" },
|
||||
depth: 2,
|
||||
|
|
@ -432,46 +507,72 @@ export default {
|
|||
depth: 2,
|
||||
},
|
||||
{
|
||||
name: "1号生产线",
|
||||
value: "28.51",
|
||||
name: "移动源",
|
||||
value: "747.24",
|
||||
id: "444",
|
||||
itemStyle: { color: "#52DBF1" },
|
||||
depth: 2,
|
||||
},
|
||||
//4
|
||||
{
|
||||
name: "移动源",
|
||||
value: "747.24",
|
||||
id: "1111",
|
||||
itemStyle: { color: "#52DBF1" },
|
||||
depth: 2,
|
||||
},
|
||||
//5
|
||||
{
|
||||
name: "1号生产线",
|
||||
value: "747.24",
|
||||
id: "11111",
|
||||
itemStyle: { color: "#52DBF1" },
|
||||
depth: 2,
|
||||
},
|
||||
{
|
||||
name: "2号生产线",
|
||||
value: "28.51",
|
||||
id: "2222",
|
||||
id: "22222",
|
||||
itemStyle: { color: "#52DBF1" },
|
||||
depth: 2,
|
||||
},
|
||||
{
|
||||
name: "3号生产线",
|
||||
value: "28.51",
|
||||
id: "3333",
|
||||
id: "33333",
|
||||
itemStyle: { color: "#52DBF1" },
|
||||
depth: 2,
|
||||
},
|
||||
],
|
||||
links: [
|
||||
// L1→L3 4509
|
||||
{ source: "总量", target: "柴油", value: 1200 },
|
||||
{ source: "总量", target: "电", value: 1200 },
|
||||
{ source: "总量", target: "原材料", value: 1200 },
|
||||
{ source: "总量", target: "煤", value: 1200 },
|
||||
{ source: "总量", target: "煤", value: 1800 },
|
||||
{ source: "总量", target: "电", value: 3600 },
|
||||
{ source: "总量", target: "柴油", value: 2400 },
|
||||
{ source: "总量", target: "汽油", value: 800 },
|
||||
{ source: "总量", target: "原材料", value: 1800 },
|
||||
// L1→L2→L3 2404
|
||||
{ source: "电", target: "1", value: 300 },
|
||||
{ source: "电", target: "2", value: 300 },
|
||||
{ source: "电", target: "3", value: 300 },
|
||||
{ source: "煤", target: "11", value: 300 },
|
||||
{ source: "煤", target: "22", value: 300 },
|
||||
{ source: "煤", target: "33", value: 300 },
|
||||
{ source: "煤", target: "1", value: 300 },
|
||||
{ source: "煤", target: "2", value: 300 },
|
||||
{ source: "煤", target: "3", value: 300 },
|
||||
|
||||
{ source: "电", target: "11", 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: "222", value: 300 },
|
||||
{ source: "柴油", target: "333", value: 300 },
|
||||
{ source: "原材料", target: "1111", value: 300 },
|
||||
{ source: "原材料", target: "2222", value: 300 },
|
||||
{ source: "原材料", target: "3333", value: 300 },
|
||||
{ source: "柴油", target: "444", 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 index = 0;
|
||||
var color = [
|
||||
"#00ffff",
|
||||
"#00cfff",
|
||||
"#006ced",
|
||||
"#7EFAB7",
|
||||
"#55A9CE",
|
||||
"#53DCF1",
|
||||
"#ffe000",
|
||||
"#ffa800",
|
||||
"#ff5b00",
|
||||
|
|
@ -550,6 +651,7 @@ export default {
|
|||
shadowBlur: 20,
|
||||
borderColor: color[index],
|
||||
shadowColor: color[index],
|
||||
color: color[index],
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
@ -574,7 +676,7 @@ export default {
|
|||
labels = {
|
||||
show: true,
|
||||
position: "outside",
|
||||
color: "#ddd",
|
||||
color: "#fff",
|
||||
formatter: function (params) {
|
||||
var percent = 0;
|
||||
var total = 0;
|
||||
|
|
@ -600,7 +702,7 @@ export default {
|
|||
},
|
||||
rich: {
|
||||
colors: {
|
||||
color: color[index],
|
||||
color: color[1],
|
||||
fontSize: 40,
|
||||
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 = [
|
||||
{
|
||||
name: "",
|
||||
type: "pie",
|
||||
clockWise: false,
|
||||
radius: [105, 109],
|
||||
radius: [195, 199],
|
||||
center: ["36%", "50%"],
|
||||
hoverAnimation: false,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: labels,
|
||||
labelLine: {
|
||||
length: 40,
|
||||
length2: 100,
|
||||
length: 20,
|
||||
length2: 60,
|
||||
show: true,
|
||||
color: "#00ffff",
|
||||
},
|
||||
|
|
@ -698,10 +742,10 @@ export default {
|
|||
text: "257.1t",
|
||||
top: "48%",
|
||||
textAlign: "center",
|
||||
left: "49%",
|
||||
left: "36%",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 32,
|
||||
fontSize: 36,
|
||||
fontWeight: "400",
|
||||
},
|
||||
},
|
||||
|
|
@ -725,6 +769,8 @@ export default {
|
|||
show: false,
|
||||
},
|
||||
legend: {
|
||||
itemWidth: 16,
|
||||
itemHeight: 16,
|
||||
icon: "rect",
|
||||
orient: "",
|
||||
x: "right",
|
||||
|
|
@ -742,12 +788,15 @@ export default {
|
|||
value: "13.68",
|
||||
},
|
||||
],
|
||||
left: 900,
|
||||
left: 800,
|
||||
bottom: 240,
|
||||
align: "left",
|
||||
formatter: (name) => {
|
||||
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"
|
||||
},
|
||||
textStyle: {
|
||||
|
|
@ -1087,7 +1136,7 @@ export default {
|
|||
initChart() {
|
||||
this.statusChart = echarts.init(this.$refs.chart);
|
||||
// 传入数据生成 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);
|
||||
// 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
|
||||
this.option.series.push({
|
||||
|
|
@ -1277,7 +1326,7 @@ export default {
|
|||
},
|
||||
mounted() {
|
||||
this.defineEcharts("sstpf", this.option1);
|
||||
this.defineEcharts("tlt", this.option2);
|
||||
// this.defineEcharts("tlt", this.option2);
|
||||
this.$nextTick(() => {
|
||||
this.getbing();
|
||||
this.tpfl();
|
||||
|
|
@ -1389,7 +1438,7 @@ export default {
|
|||
}
|
||||
|
||||
#qybjzl {
|
||||
margin-top: 50px;
|
||||
margin-top: 40px;
|
||||
width: 1151px;
|
||||
height: 511px;
|
||||
background: url(../../assets/TZCGL/背景框6.png);
|
||||
|
|
@ -1524,7 +1573,7 @@ export default {
|
|||
|
||||
.tlt {
|
||||
position: relative;
|
||||
margin-top: 56px;
|
||||
margin-top: 40px;
|
||||
|
||||
.imgBox {
|
||||
height: 93px;
|
||||
|
|
@ -1542,14 +1591,223 @@ export default {
|
|||
|
||||
#tlt {
|
||||
width: 1155px;
|
||||
height: 500px;
|
||||
margin-top: 50px;
|
||||
height: 760px;
|
||||
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 {
|
||||
position: relative;
|
||||
margin-top: 56px;
|
||||
margin-top: 40px;
|
||||
|
||||
.imgBox {
|
||||
height: 93px;
|
||||
|
|
|
|||
|
|
@ -653,8 +653,8 @@ export default {
|
|||
show: false
|
||||
},
|
||||
legend: {
|
||||
itemWidth:8,
|
||||
itemHeight:8,
|
||||
itemWidth:16,
|
||||
itemHeight:16,
|
||||
icon: "rect",
|
||||
orient: '',
|
||||
x: 'right',
|
||||
|
|
|
|||
Loading…
Reference in New Issue