zhouyonghang
/
zhuzhansheji
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Compare commits

base: zhouyonghang:fca835969340c03fe75a4225bc961c0f1a342582
Branches Tags
zhouyonghang:master
..
compare: zhouyonghang:787023b2bd765d37cd1f5fe9180f7c653a19d0c3
Branches Tags
zhouyonghang:master

No commits in common. "fca835969340c03fe75a4225bc961c0f1a342582" and "787023b2bd765d37cd1f5fe9180f7c653a19d0c3" have entirely different histories.
fca8359693 ... 787023b2bd

1 changed files with 70 additions and 121 deletions
Show Stats Expand all files Collapse all files

191
src/views/KHC.vue
View File

@ -83,11 +83,7 @@
</div>
<div class="ynflzb">
<p class="title">用能分类占比</p>
<img
src="../assets/客户侧总体用能情况分析/底盘.png"
alt=""
class="pic"
/>
<img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
<div id="ynflzb"></div>
</div>
<div class="qyydlpm">
@ -131,6 +127,7 @@
</template>
<script>
import * as echarts from "echarts";
import { fontSizeRem } from "../assets/function";
export default {
data() {
return {
@ -195,7 +192,7 @@ export default {
{ icon: "roundRect", name: "今日" },
],
textStyle: {
fontSize: "0.07rem",
fontSize: fontSizeRem(14),
fontFamily: "AlibabaPuHuiTi",
fontWeight: 400,
color: "rgba(255,255,255,0.8)",
@ -216,7 +213,7 @@ export default {
axisLabel: {
show: true,
textStyle: {
fontSize: "0.07rem",
fontSize: fontSizeRem(14),
fontFamily: "AlibabaPuHuiTi",
fontWeight: 400,
color: "rgba(255,255,255,0.8)",
@ -230,13 +227,13 @@ export default {
name: "单位:KW",
nameTextStyle: {
color: "#fff",
fontSize: "0.07rem",
fontSize: fontSizeRem(14),
padding: 10,
},
axisLabel: {
show: true,
textStyle: {
fontSize: "0.07rem",
fontSize: fontSizeRem(14),
fontFamily: "AlibabaPuHuiTi",
fontWeight: 400,
color: "rgba(255,255,255,0.8)",
@ -318,7 +315,7 @@ export default {
left: "right",
data: [{ icon: "roundRect", name: "用电量" }],
textStyle: {
fontSize: "0.07rem",
fontSize: fontSizeRem(14),
fontFamily: "AlibabaPuHuiTi",
fontWeight: 400,
color: "rgba(255,255,255,0.8)",
@ -339,7 +336,7 @@ export default {
axisLabel: {
show: true,
textStyle: {
fontSize: "0.07rem",
fontSize: fontSizeRem(14),
fontFamily: "AlibabaPuHuiTi",
fontWeight: 400,
color: "rgba(255,255,255,0.8)",
@ -353,13 +350,13 @@ export default {
name: "单位:MWH",
nameTextStyle: {
color: "#fff",
fontSize: "0.07rem",
fontSize: fontSizeRem(14),
padding: 10,
},
axisLabel: {
show: true,
textStyle: {
fontSize: "0.07rem",
fontSize: fontSizeRem(14),
fontFamily: "AlibabaPuHuiTi",
fontWeight: 400,
color: "rgba(255,255,255,0.8)",
@ -468,18 +465,17 @@ export default {
{
text: "{name|" + "总量" + "}\n{val|" + formatNumber(total) + "}",
top: "center",
// left: 110,
left: "32%",
left: 110,
textStyle: {
rich: {
name: {
fontSize: "0.07rem",
fontSize: fontSizeRem(14),
fontWeight: "normal",
color: "#fff",
padding: [10, 0],
},
val: {
fontSize: "0.166rem",
fontSize: fontSizeRem(32),
fontWeight: "bold",
color: "#fff",
},
@ -499,14 +495,14 @@ export default {
color: "#fff",
rich: {
name: {
fontSize: "0.06rem",
fontSize: fontSizeRem(12),
},
value: {
fontSize: "0.08rem",
fontSize: fontSizeRem(16),
padding: [0, 5, 0, 15],
},
unit: {
fontSize: "0.06rem",
fontSize: fontSizeRem(12),
},
},
},
@ -747,10 +743,10 @@ export default {
label: {
show: false,
opacity: 1,
fontSize: "0.07rem",
fontSize: fontSizeRem(14),
lineHeight: 20,
textStyle: {
fontSize: "0.07rem",
fontSize: fontSizeRem(14),
color: "#fff",
},
},
@ -798,7 +794,7 @@ export default {
right: "2%",
textStyle: {
color: "#fff",
fontSize: "0.06rem",
fontSize: fontSizeRem(12),
},
formatter: function (name) {
let res = data.filter((v) => v.name === name);
@ -815,17 +811,14 @@ export default {
params.seriesName !== "mouseoutSeries" &&
params.seriesName !== "pie2d"
) {
return `${
params.seriesName
}<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
params.color
};"></span>${
option.series[params.seriesIndex].pieData.value + "%"
}`;
return `${params.seriesName
}<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
};"></span>${option.series[params.seriesIndex].pieData.value + "%"
}`;
}
},
textStyle: {
fontSize: "0.07rem",
fontSize: fontSizeRem(14),
},
},
title: {
@ -833,7 +826,7 @@ export default {
top: "20",
textStyle: {
color: "#fff",
fontSize: "0.11rem",
fontSize: fontSizeRem(22),
},
},
// backgroundColor: "#0E3567",
@ -873,7 +866,7 @@ export default {
show: false,
boxHeight: 0.01,
//top: '30%',
bottom: "500%",
bottom: "50%",
left: "-7%",
// environment: "rgba(255,255,255,0)",
viewControl: {
@ -999,7 +992,7 @@ export default {
borderWidth: 2, // 高亮时的边框宽度
},
label: {
fontSize: "0.06rem", // 选中地图文字字号和字体颜色
fontSize: 12, // 选中地图文字字号和字体颜色
color: "#fff",
},
},
@ -1013,7 +1006,7 @@ export default {
},
textStyle: {
color: "#000", //文字颜色
fontSize: "0.08rem", //文字大小
fontSize: 16, //文字大小
fontFamily: "微软雅黑",
// backgroundColor: {
// image: "../assets/客户侧总体用能情况分析/光标.png",
@ -1024,13 +1017,13 @@ export default {
fline: {
padding: [0, 35],
color: "#FDCC00",
fontSize: "0.07rem",
fontSize: 14,
fontWeight: 600,
},
tline: {
padding: [0, 27],
color: "#fff",
fontSize: "0.06rem",
fontSize: 12,
},
},
},
@ -1148,87 +1141,53 @@ export default {
initfbqk() {
// mock 数据
const dataArr = {
xdata: [
"济南",
"烟台",
"威海",
"青岛",
"潍坊",
"临沂",
"济宁",
"德州",
"聊城",
"泰安",
"菏泽",
"枣庄",
"淄博",
"莱芜",
"东营",
"日照",
"滨州",
],
disinfeced: [
32, 34, 20, 14, 36, 27, 30, 28, 32, 27, 32, 33, 24, 26, 27, 28, 19,
],
};
xdata: ['济南', '烟台', '威海', '青岛', '潍坊', '临沂', '济宁', '德州', '聊城', '泰安', '菏泽', '枣庄', '淄博', '莱芜', '东营', '日照', '滨州'],
disinfeced: [32, 34, 20, 14, 36, 27, 30, 28, 32, 27, 32, 33, 24, 26, 27, 28, 19],
}
const maxValue = Math.max(...dataArr.disinfeced);
const grid = { top: "20%", left: "5%", right: "3%", bottom: "10%" };
const grid = { top: '20%', left: '5%', right: '3%', bottom: '10%' }
// xAxis
const xAxis = {
axisTick: { show: true },
axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
data: dataArr.xdata,
};
axisLine: { lineStyle: { color: 'rgba(255,255,255, .2)' } },
axisLabel: { textStyle: { fontSize: 12, color: '#fff' }, },
data: dataArr.xdata
}
// yAxis
const yAxis = {
type: "value",
name: "单位:kWh",
nameTextStyle: {
color: "#fff",
fontSize: "0.07rem",
padding: 10,
},
splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } },
axisLine: { show: false, lineStyle: { color: "#fff" } },
axisLabel: { textStyle: { fontSize: "0.06rem", color: "#fff" } },
};
axisLabel: { textStyle: { fontSize: 12, color: '#fff' } }
}
// series
const series = [
{
z: 2,
name: "底部",
type: "pictorialBar",
name: '底部',
type: 'pictorialBar',
data: [1, 1, 1, 1, 1, 1, 1, 1],
symbol: "diamond",
symbolOffset: [0, "50%"],
symbol: 'diamond',
symbolOffset: [0, '50%'],
symbolSize: [18, 12],
itemStyle: {
color: {
type: "linear",
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{ offset: 0, color: "rgba(27, 126, 242, 1)" },
{ offset: 0.5, color: "rgba(27, 126, 242, 1)" },
{ offset: 0.5, color: "rgba(27, 126, 242, .7)" },
{ offset: 1, color: "rgba(27, 126, 242, 1)" },
],
},
type: 'linear',
x: 0, x2: 1, y: 0, y2: 0,
colorStops: [{ offset: 0, color: 'rgba(27, 126, 242, 1)' }, { offset: 0.5, color: 'rgba(27, 126, 242, 1)' }, { offset: 0.5, color: 'rgba(27, 126, 242, .7)' }, { offset: 1, color: 'rgba(27, 126, 242, 1)' }]
}
},
},
{
}, {
z: 3,
name: "上部1",
type: "pictorialBar",
symbolPosition: "end",
name: '上部1',
type: 'pictorialBar',
symbolPosition: 'end',
data: dataArr.disinfeced,
symbol: "diamond",
symbolOffset: [0, "-50%"],
symbolSize: ["0.09rem", "0.06rem"],
symbol: 'diamond',
symbolOffset: [0, '-50%'],
symbolSize: [18, 12],
label: {
normal: {
show: true,
@ -1236,43 +1195,34 @@ export default {
formatter: (e) => {
return e.value === maxValue ? e.value : "";
},
fontSize: "0.09rem",
fontSize: 18,
color: "#fff",
offset: [0, 0],
},
},
itemStyle: {
borderColor: "#28F1FA",
borderColor: '#28F1FA',
borderWidth: 2,
color: "#28F1FA",
color: '#28F1FA'
},
},
{
}, {
z: 1,
stack: "总量",
type: "bar",
name: "电费",
stack: '总量',
type: 'bar',
name: '电费',
barWidth: 18,
// barGap: '-100%',
data: dataArr.disinfeced,
itemStyle: {
color: {
type: "linear",
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{ offset: 0, color: "rgba(27, 126, 242, .7)" },
{ offset: 0.5, color: "rgba(27, 126, 242, .5)" },
{ offset: 0.5, color: "rgba(27, 126, 242, .5)" },
{ offset: 1, color: "rgba(27, 126, 242, .7)" },
],
},
type: 'linear',
x: 0, x2: 1, y: 0, y2: 0,
colorStops: [{ offset: 0, color: 'rgba(27, 126, 242, .7)' }, { offset: 0.5, color: 'rgba(27, 126, 242, .5)' }, { offset: 0.5, color: 'rgba(27, 126, 242, .5)' }, { offset: 1, color: 'rgba(27, 126, 242, .7)' }]
}
},
},
];
let option = { xAxis, yAxis, series, grid };
}]
let option = { xAxis, yAxis, series, grid }
this.defineEcharts("yhzyfbqk", option);
},
},
@ -1643,7 +1593,6 @@ export default {
background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
width: 24px;
height: 16px;
font-size: 14px;
line-height: 16px;
background: rgba(34, 23, 23, 0.1);
border-radius: 0px 0px 0px 0px;