- 
-
-
- 生产工艺
-
+
+
-
生产工艺
+
+
-
-
-
- 能源监测
-
能源监测
- 
-
-
- 负荷管理
-
+
+
+
-
负荷管理
+
+
-
-
-
- 能效管理
-
能效管理
+
+
+ 
-
+
智能运维
-
-
-
- 智能运维
-
- 
-
-
- 碳资产管理
-
+
+
@@ -163,7 +166,8 @@ export default {
{
icon: "rect",
name: "实时负荷",
- }],
+ },
+ ],
x: "center",
y: "top",
itemGap: 200,
@@ -217,7 +221,7 @@ export default {
{
name: "2号生产线",
value: 88,
- }
+ },
],
statusChart: null,
option1: {},
@@ -1032,7 +1036,7 @@ export default {
align-items: center;
display: flex;
margin-top: 100px;
- .chartname{
+ .chartname {
position: absolute;
left: 24px;
top: 10px;
@@ -1057,7 +1061,7 @@ export default {
}
span:nth-of-type(2) {
font-size: 32px;
- color: #43FFF1;
+ color: #43fff1;
margin-left: 20px;
}
}
@@ -1094,4 +1098,3 @@ export default {
}
}
-
\ No newline at end of file
diff --git a/src/views/lll/NYJCD/SCX1.vue b/src/views/lll/NYJCD/SCX1.vue
index 83e724c..8c1addb 100644
--- a/src/views/lll/NYJCD/SCX1.vue
+++ b/src/views/lll/NYJCD/SCX1.vue
@@ -468,7 +468,6 @@ export default {
immediate: true, // 第一次初始化渲染就可以监听到
},
},
-
methods: {
defineEcharts(dom, option) {
var chartDom = document.getElementById(dom);
@@ -628,25 +627,6 @@ export default {
},
},
series: [
- {
- type: "bar",
- itemStyle: {
- color: "transparent",
- },
- data: yaxisData2,
- label: {
- normal: {
- show: true,
- position: "top",
- formatter: (e) => {
- return e.value === maxValue2 ? e.value : "";
- },
- fontSize: 20,
- color: "#3286FF",
- offset: [0, -15],
- },
- },
- },
{
type: "bar",
itemStyle: {
@@ -667,87 +647,25 @@ export default {
},
},
{
- type: "custom",
- name: "昨日",
- barCategoryGap: "20%",
- renderItem: (params, api) => {
- const location = api.coord([api.value(0), api.value(1)]);
- return {
- type: "group",
- children: [
- {
- type: "CubeLeft",
- shape: {
- api,
- xValue: api.value(0),
- yValue: api.value(1),
- x: location[0],
- y: location[1],
- xAxisPoint: api.coord([api.value(0), 0]),
- },
- style: {
- fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- {
- offset: 0,
- color: "#08E83C",
- },
- {
- offset: 0.35,
- color: "#1FE77D",
- },
- {
- offset: 1,
- color: "#38E7C5",
- },
- ]),
- },
- },
- {
- type: "CubeRight",
- shape: {
- api,
- xValue: api.value(0),
- yValue: api.value(1),
- x: location[0],
- y: location[1],
- xAxisPoint: api.coord([api.value(0), 0]),
- },
- style: {
- fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- {
- offset: 0,
- color: "#00C25D",
- },
- {
- offset: 0.35,
- color: "#05C269",
- },
- {
- offset: 1,
- color: "#0BC27B",
- },
- ]),
- },
- },
- {
- type: "CubeTop",
- shape: {
- api,
- xValue: api.value(0),
- yValue: api.value(1),
- x: location[0],
- y: location[1],
- xAxisPoint: api.coord([api.value(0), 0]),
- },
- style: {
- fill: "#05E861",
- },
- },
- ],
- };
+ type: "bar",
+ itemStyle: {
+ color: "transparent",
+ },
+ data: yaxisData2,
+ label: {
+ normal: {
+ show: true,
+ position: "top",
+ formatter: (e) => {
+ return e.value === maxValue2 ? e.value : "";
+ },
+ fontSize: 20,
+ color: "#3286FF",
+ offset: [0, -15],
+ },
},
- data: yaxisData,
},
+
{
type: "custom",
name: "今日",
@@ -831,6 +749,88 @@ export default {
},
data: yaxisData2,
},
+ {
+ type: "custom",
+ name: "昨日",
+ barCategoryGap: "20%",
+ renderItem: (params, api) => {
+ const location = api.coord([api.value(0), api.value(1)]);
+ return {
+ type: "group",
+ children: [
+ {
+ type: "CubeLeft",
+ shape: {
+ api,
+ xValue: api.value(0),
+ yValue: api.value(1),
+ x: location[0],
+ y: location[1],
+ xAxisPoint: api.coord([api.value(0), 0]),
+ },
+ style: {
+ fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 0,
+ color: "#08E83C",
+ },
+ {
+ offset: 0.35,
+ color: "#1FE77D",
+ },
+ {
+ offset: 1,
+ color: "#38E7C5",
+ },
+ ]),
+ },
+ },
+ {
+ type: "CubeRight",
+ shape: {
+ api,
+ xValue: api.value(0),
+ yValue: api.value(1),
+ x: location[0],
+ y: location[1],
+ xAxisPoint: api.coord([api.value(0), 0]),
+ },
+ style: {
+ fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 0,
+ color: "#00C25D",
+ },
+ {
+ offset: 0.35,
+ color: "#05C269",
+ },
+ {
+ offset: 1,
+ color: "#0BC27B",
+ },
+ ]),
+ },
+ },
+ {
+ type: "CubeTop",
+ shape: {
+ api,
+ xValue: api.value(0),
+ yValue: api.value(1),
+ x: location[0],
+ y: location[1],
+ xAxisPoint: api.coord([api.value(0), 0]),
+ },
+ style: {
+ fill: "#05E861",
+ },
+ },
+ ],
+ };
+ },
+ data: yaxisData,
+ },
],
};
@@ -840,6 +840,7 @@ export default {
init() {
//构建3d饼状图
let myChart = this.$echarts.init(document.getElementById("fhzb"));
+
// 传入数据生成 option ; getPie3D(数据，透明的空心占比（调节中间空心范围的0就是普通饼1就很镂空）)
this.option = this.getPie3D(this.optionData, 0.5);
//将配置项设置进去
@@ -917,32 +918,7 @@ export default {
k,
series[i].pieData.value
);
- // series[i].itemStyle.normal.label = {
- // show: true,
- // position: "outside",
- // color: "#ddd",
- // formatter: function (params) {
- // var percent = 0;
- // var total = 0;
- // for (var i = 0; i < trafficWay.length; i++) {
- // total += trafficWay[i].value;
- // }
- // percent = ((params.value / total) * 100).toFixed(0);
- // if (params.name !== "") {
- // return (
- // "设备状态：" +
- // params.name +
- // "\n" +
- // "\n" +
- // "占百分比：" +
- // percent +
- // "%"
- // );
- // } else {
- // return "";
- // }
- // },
- // };
+
startValue = endValue;
let bfb = that.fomatFloat(series[i].pieData.value / sumValue, 4);
legendData.push({
@@ -979,23 +955,67 @@ export default {
}
},
},
- labelLine: {
- normal: {
- show: true,
- lineStyle: {
- color: "#7BC0CB",
- },
- length: 0,
- length2: 10,
- },
- },
label: {
+ // normal: {
+ // show: true,
+ // position: "right",
+ // formatter: "{b} \n{c} {d}%",
+ // },
+
normal: {
show: true,
- position: "outside",
- formatter: "{b} \n{c} {d}%",
+ color: "#fff",
+ position: "right",
+ // distance:-10,
+ offset: [0, 3],
+ formatter: [
+ "{d|{d}%}",
+ "————",
+ // '{c|{c}}{b|台}',
+ "{b|{b}}",
+ ].join("\n"), // 用\n来换行
+ rich: {
+ b: {
+ lineHeight: 25,
+ align: "left",
+ color: "#fff",
+ },
+ c: {
+ fontSize: 22,
+ // color: '#fff',
+ textShadowColor: "#1c90a6",
+ textShadowOffsetX: 0,
+ textShadowOffsetY: 2,
+ textShadowBlur: 5,
+ color: "#fff",
+ },
+ d: {
+ color: "#fff",
+ align: "left",
+ },
+ },
},
},
+ labelLine: {
+ // normal: {
+ // show: true,
+ // lineStyle: {
+ // color: "#7BC0CB",
+ // },
+ // length: 0,
+ // length2: 100000,
+ // },
+
+ normal: {
+ show: true,
+ length2: 30,
+ lineStyle: {
+ width: 1,
+ color: "#fff",
+ },
+ },
+ },
+
//这个可以变形
xAxis3D: {
min: -1,
@@ -1270,11 +1290,273 @@ export default {
}
return s;
},
+
+ getEchart() {
+ var chartDom = document.getElementById("pdsydl");
+ var myChart = echarts.init(chartDom);
+ var option;
+ const sideData = [220, 182, 191, 234, 290];
+ const sideData1 = [100, 110, 120, 134, 190];
+
+ option = {
+ tooltip: {
+ trigger: "axis",
+ },
+ legend: {
+ data: [
+ {
+ name: "今日",
+ textStyle: {
+ color: "white",
+ },
+ },
+ {
+ name: "昨日",
+ textStyle: {
+ color: "white",
+ },
+ },
+ ],
+ },
+ grid: {
+ top: "10%",
+ bottom: "62%",
+ right: "15%",
+ containLabel: true,
+ },
+ toolbox: {
+ show: true,
+ },
+ calculable: true,
+ xAxis: [
+ {
+ type: "category",
+ splitLine: {
+ show: false,
+ },
+ data: ["1月", "2月", "3月", "4月", "5月"],
+ axisLabel: {
+ show: true,
+ textStyle: {
+ color: "#fff", //X轴文字颜色
+ },
+ },
+ },
+ ],
+ yAxis: [
+ {
+ type: "value",
+ splitLine: {
+ show: false,
+ },
+ axisLabel: {
+ show: true,
+ textStyle: {
+ color: "#fff", //X轴文字颜色
+ },
+ },
+ },
+ ],
+ series: [
+ {
+ name: "昨日",
+ tooltip: {
+ show: false,
+ },
+ type: "bar",
+ barWidth: 10,
+ itemStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(
+ 0,
+ 1,
+ 0,
+ 0,
+ [
+ {
+ offset: 0,
+ color: "#2d8cf0", // 0% 处的颜色
+ },
+ {
+ offset: 0.6,
+ color: "#2d8cf0", // 60% 处的颜色
+ },
+ {
+ offset: 1,
+ color: "#2d8cf0", // 100% 处的颜色
+ },
+ ],
+ false
+ ),
+ },
+ },
+ data: sideData,
+ barGap: 10,
+ },
+ {
+ name: "昨日",
+ type: "bar",
+ barWidth: 10,
+ itemStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(
+ 0,
+ 1,
+ 0,
+ 0,
+ [
+ {
+ offset: 0,
+ color: "#09337C", // 0% 处的颜色
+ },
+ {
+ offset: 0.6,
+ color: "#0761C0", // 60% 处的颜色
+ },
+ {
+ offset: 1,
+ color: "#0575DE", // 100% 处的颜色
+ },
+ ],
+ false
+ ),
+ },
+ },
+ barGap: 0,
+ data: sideData,
+ label: {
+ show: true,
+ position: "top",
+ textStyle: {
+ color: "white",
+ fontSize: 10,
+ },
+ },
+ },
+ {
+ name: "昨日",
+ tooltip: {
+ show: false,
+ },
+ type: "pictorialBar",
+ itemStyle: {
+ borderWidth: 1,
+ borderColor: "#0571D5",
+ color: "#288ef3", // 控制顶部方形的颜色
+ },
+ symbol: "path://M 0,0 l 90,0 l -60,60 l -90,0 z",
+ symbolSize: ["20", "7"], // 第一个值控制顶部方形大小
+ symbolOffset: ["-10", "-4"], // 控制顶部放行 左右和上下
+ symbolRotate: -16,
+ symbolPosition: "end",
+ data: sideData,
+ z: 3,
+ },
+ {
+ name: "今日",
+ tooltip: {
+ show: false,
+ },
+ type: "bar",
+ barWidth: 10,
+ itemStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(
+ 0,
+ 1,
+ 0,
+ 0,
+ [
+ {
+ offset: 0,
+ color: "#15a00f", // 0% 处的颜色
+ },
+ {
+ offset: 0.6,
+ color: "#11ad0a", // 60% 处的颜色
+ },
+ {
+ offset: 1,
+ color: "#19c213", // 100% 处的颜色
+ },
+ ],
+ false
+ ),
+ },
+ },
+ data: sideData1,
+ barGap: 0,
+ },
+ {
+ name: "今日",
+ type: "bar",
+ barWidth: 10,
+ itemStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(
+ 0,
+ 1,
+ 0,
+ 0,
+ [
+ {
+ offset: 0,
+ color: "#26ec10", // 0% 处的颜色
+ },
+ {
+ offset: 0.6,
+ color: "#26ec10", // 60% 处的颜色
+ },
+ {
+ offset: 1,
+ color: "#26ec10", // 100% 处的颜色
+ },
+ ],
+ false
+ ),
+ },
+ },
+ barGap: 0,
+ data: sideData1,
+ label: {
+ show: true,
+ position: "top",
+ textStyle: {
+ color: "white",
+ fontSize: 10,
+ },
+ },
+ },
+ {
+ name: "今日",
+ tooltip: {
+ show: false,
+ },
+ type: "pictorialBar",
+ itemStyle: {
+ borderWidth: 1,
+ borderColor: "#fff",
+ color: "#26ec10", // 顶部方块的颜色
+ },
+ symbol: "path://M 0,0 l 90,0 l -60,60 l -90,0 z",
+ symbolSize: ["20", "7"], // 第一个值控制顶部方形大小
+ symbolOffset: ["10", "-4"], // 控制顶部放行 左右和上下
+ symbolRotate: -16,
+ symbolPosition: "end",
+ data: sideData1,
+ z: 3,
+ },
+ ],
+ };
+
+ myChart.setOption(option, true);
+ },
},
mounted() {
this.defineEcharts("pdsssdh", this.option1);
// this.defineEcharts("pdsydl", this.option2);
this.pdsydl();
+ // this.getEchart();
this.defineEcharts("pdstpt", this.option3);
this.init();
},
diff --git a/src/views/lll/ZNYW.vue b/src/views/lll/ZNYW.vue
index 6065fcf..e906e02 100644
--- a/src/views/lll/ZNYW.vue
+++ b/src/views/lll/ZNYW.vue
@@ -1,5 +1,6 @@
+
碳资产管理
@@ -96,7 +111,12 @@ export default { components: { RouterView }, data() { return { - isShow: true, + flag1: true, + flag2: true, + flag3: true, + flag4: true, + flag5: true, + flag6: true, }; }, methods: { @@ -106,6 +126,84 @@ export default { message: "碳资产管理_true", }); }, + go1() { + this.flag1 = false; + this.flag2 = true; + this.flag3 = true; + this.flag4 = true; + this.flag5 = true; + this.flag6 = true; + // this.$router.push( + // "/znywjk", + // () => {}, + // () => {} + // ); + }, + go2() { + this.flag1 = true; + this.flag2 = false; + this.flag3 = true; + this.flag4 = true; + this.flag5 = true; + this.flag6 = true; + this.$router.push( + "/area", + () => {}, + () => {} + ); + }, + go3() { + this.flag1 = true; + this.flag2 = true; + this.flag3 = false; + this.flag4 = true; + this.flag5 = true; + this.flag6 = true; + this.$router.push( + "/fhgl", + () => {}, + () => {} + ); + }, + go4() { + this.flag1 = true; + this.flag2 = true; + this.flag3 = true; + this.flag4 = false; + this.flag5 = true; + this.flag6 = true; + this.$router.push( + "/nxgl", + () => {}, + () => {} + ); + }, + go5() { + this.flag1 = true; + this.flag2 = true; + this.flag3 = true; + this.flag4 = true; + this.flag5 = false; + this.flag6 = true; + this.$router.push( + "/znyw", + () => {}, + () => {} + ); + }, + go6() { + this.flag1 = true; + this.flag2 = true; + this.flag3 = true; + this.flag4 = true; + this.flag5 = true; + this.flag6 = false; + this.$router.push( + "/tzcgl", + () => {}, + () => {} + ); + }, }, }; @@ -263,7 +361,7 @@ export default { width: 316px; height: 46px; font-size: 50px; - font-family: FZZhengHeiS-B-GB; + font-family: "FZZhengHeiS-B-GB"; font-weight: 400; color: #ffffff; line-height: 20px; @@ -274,6 +372,9 @@ export default { width: 100%; height: 200px; position: relative; + div { + cursor: pointer; + } } } diff --git a/src/views/Zhou/FHGL.vue b/src/views/Zhou/FHGL.vue index 8953bac..0625dcd 100644 --- a/src/views/Zhou/FHGL.vue +++ b/src/views/Zhou/FHGL.vue @@ -93,9 +93,12 @@
{{ item.name }}
-
+
- {{ item.value *100 }}kW
+ {{ item.value * 100 }}kW
+ 
@@ -382,7 +383,7 @@ export default {
data: ["正常", "预警", "故障"],
x: "center",
y: "top",
- itemGap: 200,
+ itemGap: 100,
textStyle: {
color: "#fff",
fontSize: "16px",
@@ -409,7 +410,7 @@ export default {
yAxis: {
type: "value",
min: 0,
- max: 0.15,
+ max: 0.3,
interval: 0.05, // 指定刻度间隔
axisLabel: {
show: true,
@@ -430,40 +431,19 @@ export default {
{
name: "故障",
type: "bar",
+ stack: "total",
data: [0.08, 0.08, 0.06, 0.12, 0.09],
},
- // {
- // type: "bar",
- // data: data.map((item) => {
- // // 找到三个值中的最大值
- // let max = Math.max(item.value1, item.value2, item.value3);
- // return {
- // name: item.name,
- // value: max,
- // };
- // }),
- // // itemStyle: {
- // // colorStops: [
- // // {
- // // offset: 0,
- // // color: "#192060", // 0% 处的颜色
- // // },
- // // {
- // // offset: 0.9,
- // // color: "#2D6E38", // 90% 处的颜色
- // // },
- // // ],
- // // },
- // },
{
name: "预警",
-
+ stack: "total",
type: "bar",
data: [0.06, 0.07, 0.03, 0.06, 0.04],
},
{
name: "正常",
type: "bar",
+ stack: "total",
data: [0.13, 0.12, 0.08, 0.14, 0.12],
},
],
@@ -500,6 +480,10 @@ export default {
justify-content: space-between;
background-color: transparent;
}
+#img {
+ position: absolute;
+ right: 0px;
+}
.left {
width: 1237px;
height: 2500px;