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

Merge branch 'master' of http://git.umayle.com:2023/zhouyonghang/zhuzhansheji

This commit is contained in:
unknown 2023-12-05 11:24:48 +08:00
parent eae0890a19 0a8f46e8f9
commit 3ee2396af3
7 changed files with 837 additions and 853 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html
View File

@ -9,8 +9,6 @@
<title> <title>
<%= htmlWebpackPlugin.options.title %> <%= htmlWebpackPlugin.options.title %>
</title> </title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head> </head>
<body> <body>

BIN
src/assets/客户侧总体用能情况分析/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

331
src/views/KHC.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="box"> <div class="box">
<div class="title"> <div class="title">
<img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" /> <img src="../assets/客户侧总体用能情况分析/logo.png" alt="" />
<p>客户侧总体用能情况分析</p> <p>客户侧总体用能情况分析</p>
<img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" /> <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
</div> </div>
@ -93,8 +93,8 @@
<div class="qyydlpm"> <div class="qyydlpm">
<p class="title">企业用电量排名</p> <p class="title">企业用电量排名</p>
<ul class="list"> <ul class="list">
<li v-for="(item, index) in list" :style="listClass(index)"> <li v-for="(item, index) in list">
<p>{{ index + 1 }}</p> <p :style="listClass(index)">{{ index + 1 }}</p>
<p>{{ item.name }}</p> <p>{{ item.name }}</p>
<p>{{ item.value }}</p> <p>{{ item.value }}</p>
</li> </li>
@ -408,11 +408,11 @@ export default {
methods: { methods: {
listClass(index) { listClass(index) {
if (index == 0) { if (index == 0) {
return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;'; return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;backgroundColor:#6A6847;';
} else if (index == 1) { } else if (index == 1) {
return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;'; return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;backgroundColor:#4C4D6A;';
} else if (index == 2) { } else if (index == 2) {
return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;'; return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;backgroundColor:#202450;';
} }
}, },
defineEcharts(dom, option) { defineEcharts(dom, option) {
@ -425,7 +425,6 @@ export default {
myChart.resize(); myChart.resize();
}); });
}, },
//用户行业占比 //用户行业占比
initYhhyzb() { initYhhyzb() {
let color = ["#0098FA", "#0CD9B5", "#3B72AD", "#FDCC00", "#F27629"]; let color = ["#0098FA", "#0CD9B5", "#3B72AD", "#FDCC00", "#F27629"];
@ -488,7 +487,7 @@ export default {
legend: { legend: {
orient: "vertical", orient: "vertical",
icon: "circle", icon: "circle",
x: "70%", x: "65%",
y: "center", y: "center",
itemWidth: 12, itemWidth: 12,
itemHeight: 12, itemHeight: 12,
@ -551,35 +550,62 @@ export default {
}, },
//用能分类占比 //用能分类占比
initYnflzb() { initYnflzb() {
let getParametricEquation = function ( let optionData = [
{
name: "楼宇",
value: 60,
itemStyle: {
color: "#91DAFF",
},
},
{
name: "工业",
value: 44,
itemStyle: {
color: "#4466E1",
},
},
{
name: "其他",
value: 32,
itemStyle: {
color: "#83E7BA",
},
},
];
let option = getPie3D(optionData, 0.59);
// 生成扇形的曲面参数方程
function getParametricEquation(
startRatio, startRatio,
endRatio, endRatio,
isSelected, isSelected,
isHovered, isHovered,
k, k,
height h
) { ) {
// 计算 // 计算
let midRatio = (startRatio + endRatio) / 2; const midRatio = (startRatio + endRatio) / 2;
let startRadian = startRatio * Math.PI * 2; const startRadian = startRatio * Math.PI * 2;
let endRadian = endRatio * Math.PI * 2; const endRadian = endRatio * Math.PI * 2;
let midRadian = midRatio * Math.PI * 2; const midRadian = midRatio * Math.PI * 2;
// 如果只有一个扇形，则不实现选中效果。 // 如果只有一个扇形，则不实现选中效果。
if (startRatio === 0 && endRatio === 1) { if (startRatio === 0 && endRatio === 1) {
// eslint-disable-next-line no-param-reassign
isSelected = false; isSelected = false;
} }
// 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3） // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
// eslint-disable-next-line no-param-reassign
k = typeof k !== "undefined" ? k : 1 / 3; k = typeof k !== "undefined" ? k : 1 / 3;
// 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0） // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0; const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0; const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
// 计算高亮效果的放大比例（未高亮，则比例为 1） // 计算高亮效果的放大比例（未高亮，则比例为 1）
let hoverRate = isHovered ? 1.05 : 1; const hoverRate = isHovered ? 1.05 : 1;
// 返回曲面参数方程 // 返回曲面参数方程
return { return {
@ -595,7 +621,7 @@ export default {
step: Math.PI / 20, step: Math.PI / 20,
}, },
x: function (u, v) { x(u, v) {
if (u < startRadian) { if (u < startRadian) {
return ( return (
offsetX + offsetX +
@ -611,7 +637,7 @@ export default {
return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate; return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
}, },
y: function (u, v) { y(u, v) {
if (u < startRadian) { if (u < startRadian) {
return ( return (
offsetY + offsetY +
@ -627,34 +653,36 @@ export default {
return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate; return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
}, },
z: function (u, v) { z(u, v) {
if (u < -Math.PI * 0.5) { if (u < -Math.PI * 0.5) {
return Math.sin(u); return Math.sin(u);
} }
if (u > Math.PI * 2.5) { if (u > Math.PI * 2.5) {
return Math.sin(u); return Math.sin(u) * h * 0.1;
} }
return Math.sin(v) > 0 ? 1 * height : -1; // 当前图形的高度是Z根据h（每个value的值决定的）
return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
}, },
}; };
}; }
// 生成模拟 3D 饼图的配置项 // 生成模拟 3D 饼图的配置项
let getPie3D = function (pieData, internalDiameterRatio) { function getPie3D(pieData, internalDiameterRatio) {
let series = []; const series = [];
// 总和
let sumValue = 0; let sumValue = 0;
let startValue = 0; let startValue = 0;
let endValue = 0; let endValue = 0;
let legendData = []; const legendData = [];
let k = const k =
typeof internalDiameterRatio !== "undefined" typeof internalDiameterRatio !== "undefined"
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio) ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
: 1 / 3; : 1 / 3;
// 为每一个饼图数据，生成一个 series-surface 配置 // 为每一个饼图数据，生成一个 series-surface 配置
for (let i = 0; i < pieData.length; i++) { for (let i = 0; i < pieData.length; i += 1) {
sumValue += pieData[i].value; sumValue += pieData[i].value;
let seriesItem = { const seriesItem = {
name: name:
typeof pieData[i].name === "undefined" typeof pieData[i].name === "undefined"
? `series${i}` ? `series${i}`
@ -668,17 +696,19 @@ export default {
pieStatus: { pieStatus: {
selected: false, selected: false,
hovered: false, hovered: false,
k: k, k,
}, },
}; };
if (typeof pieData[i].itemStyle != "undefined") { if (typeof pieData[i].itemStyle !== "undefined") {
let itemStyle = {}; const { itemStyle } = pieData[i];
typeof pieData[i].itemStyle.color != "undefined" // eslint-disable-next-line no-unused-expressions
typeof pieData[i].itemStyle.color !== "undefined"
? (itemStyle.color = pieData[i].itemStyle.color) ? (itemStyle.color = pieData[i].itemStyle.color)
: null; : null;
typeof pieData[i].itemStyle.opacity != "undefined" // eslint-disable-next-line no-unused-expressions
typeof pieData[i].itemStyle.opacity !== "undefined"
? (itemStyle.opacity = pieData[i].itemStyle.opacity) ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
: null; : null;
@ -686,12 +716,11 @@ export default {
} }
series.push(seriesItem); series.push(seriesItem);
} }
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数， // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。 // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
for (let i = 0; i < series.length; i++) { for (let i = 0; i < series.length; i += 1) {
endValue = startValue + series[i].pieData.value; endValue = startValue + series[i].pieData.value;
console.log(series[i]);
series[i].pieData.startRatio = startValue / sumValue; series[i].pieData.startRatio = startValue / sumValue;
series[i].pieData.endRatio = endValue / sumValue; series[i].pieData.endRatio = endValue / sumValue;
series[i].parametricEquation = getParametricEquation( series[i].parametricEquation = getParametricEquation(
@ -700,160 +729,50 @@ export default {
false, false,
false, false,
k, k,
series[i].pieData.value // 我这里做了一个处理，使除了第一个之外的值都是10
series[i].pieData.value === series[0].pieData.value ? 35 : 10
); );
startValue = endValue; startValue = endValue;
legendData.push(series[i].name); legendData.push(series[i].name);
} }
return series;
};
// 传入数据生成 option
const optionsData = [
{
name: "楼宇",
value: 4256,
itemStyle: {
// opacity: 0.5,
color: "#2A71FF",
},
},
{
name: "工业",
value: 2356,
itemStyle: {
// opacity: 0.5,
color: "#00EDFE",
},
},
{
name: "其他",
value: 2018,
itemStyle: {
// opacity: 0.5,
color: "#FEDB4B",
},
},
];
const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
series.push({
name: "pie2d",
type: "pie",
label: {
show: false,
opacity: 1,
fontSize: "0.07rem",
lineHeight: 20,
textStyle: {
fontSize: "0.07rem",
color: "#fff",
},
},
labelLine: {
length: 30,
length2: 30,
},
startAngle: -30, //起始角度，支持范围[0, 360]。
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
radius: ["40%", "60%"],
// center: ["30%", "50%"],
center: ["40%", "50%"],
data: optionsData,
itemStyle: {
opacity: 0,
},
});
let data = [
{
name: "楼宇",
value: "30%",
},
{
name: "工业",
value: "30%",
},
{
name: "其他",
value: "40%",
},
];
// 准备待返回的配置项，把准备好的 legendData、series 传入。 // 准备待返回的配置项，把准备好的 legendData、series 传入。
let option = { const option = {
// animation: false,
legend: { legend: {
show: true, left: "80%",
tooltip: { top: "40%",
show: false, data: ["楼宇", "工业", "其他"],
},
orient: "vertical", orient: "vertical",
data: data, icon: "roundRect",
top: "center", itemWidth: 10, // 图标宽度
itemGap: 14, itemHeight: 10, // 图标高度
itemHeight: 8,
itemWidth: 17,
right: "2%",
textStyle: { textStyle: {
color: "#fff",
fontSize: "0.06rem", fontSize: "0.06rem",
fontFamily: "AlibabaPuHuiTi",
fontWeight: 400,
color: "rgba(255,255,255,0.8)",
}, },
formatter: function (name) { formatter: (name) => {
let res = data.filter((v) => v.name === name); if (optionData.length) {
res = res[0] || {}; const item = optionData.filter((item) => item.name === name)[0];
let unit = res.unit || ""; return ` ${name} ${item.value}%`;
return name + " " + res.value + unit; }
}, },
}, },
animation: false,
tooltip: { tooltip: {
show: false,
formatter: (params) => { formatter: (params) => {
if ( if (params.seriesName !== "mouseoutSeries") {
params.seriesName !== "mouseoutSeries" &&
params.seriesName !== "pie2d"
) {
return `${ return `${
params.seriesName params.seriesName
}<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${ }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
params.color params.color
};"></span>${ };"></span>${option.series[params.seriesIndex].pieData.value}`;
option.series[params.seriesIndex].pieData.value + "%"
}`;
} }
return "";
}, },
textStyle: {
fontSize: "0.07rem",
},
},
title: {
x: "center",
top: "20",
textStyle: {
color: "#fff",
fontSize: "0.11rem",
},
},
// backgroundColor: "#0E3567",
labelLine: {
show: false,
lineStyle: {
color: "#7BC0CB",
},
normal: {
show: true,
length: 10,
length2: 10,
},
},
label: {
show: false,
// position: "outside",
// formatter: "{b} \n{d}%",
// textStyle: {
// color: "#fff",
// fontSize: "14px",
// },
}, },
xAxis3D: { xAxis3D: {
min: -1, min: -1,
@ -869,21 +788,50 @@ export default {
}, },
grid3D: { grid3D: {
show: false, show: false,
boxHeight: 0.01, boxHeight: 10,
//top: '30%', top: "0%",
bottom: "500%",
left: "-7%",
// environment: "rgba(255,255,255,0)",
viewControl: { viewControl: {
distance: 180, // 3d效果可以放大、旋转等，请自己去查看官方配置
alpha: 25, alpha: 20,
beta: 60, beta: 30,
autoRotate: false, // 禁用自动旋转
distance: 200, // 初始视角距离主体的距离
panMouseButton: "none", // 设置中键拖拽进行平移
rotateMouseButton: "none", // 设置右键拖拽进行旋转
zoomMouseButton: "none", // 禁用鼠标缩放
},
// 后处理特效可以为画面添加高光、景深、环境光遮蔽（SSAO）、调色等效果。可以让整个画面更富有质感。
postEffect: {
// 配置这项会出现锯齿，请自己去查看官方配置有办法解决
enable: false,
bloom: {
enable: true,
bloomIntensity: 0.1,
},
SSAO: {
enable: true,
quality: "medium",
radius: 2,
},
// temporalSuperSampling: {
// enable: true,
// },
}, },
}, },
series: series, series,
}; };
this.defineEcharts("ynflzb", option); return option;
}
let chartDom = document.getElementById("ynflzb");
var myChart = this.$echarts.init(chartDom, null, {
devicePixelRatio: 10, // 设置为2或更高的值
});
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
}, },
//地图
initMap() { initMap() {
//后端返回的数据 //后端返回的数据
var data = [ var data = [
@ -974,10 +922,9 @@ export default {
myChart.resize(); myChart.resize();
}); });
//获取山东地图数据。 //获取山东地图数据。
$.get( let src = require("../assets/shandong.json");
"https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json", function registerMap() {
function (geojson) { echarts.registerMap("山东", src);
echarts.registerMap("山东", geojson);
let option = { let option = {
series: [ series: [
{ {
@ -1141,7 +1088,7 @@ export default {
// }); // });
} }
} }
); registerMap();
}, },
//用户资源分布情况 //用户资源分布情况
initfbqk() { initfbqk() {
@ -1490,9 +1437,7 @@ export default {
background: url("../assets/客户侧总体用能情况分析/用能量-框.png"); background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
background-size: cover; background-size: cover;
margin-top: 6px; margin-top: 6px;
position: relative; position: relative;
.title { .title {
position: absolute; position: absolute;
left: 190px; left: 190px;
@ -1592,14 +1537,16 @@ export default {
#ynflzb { #ynflzb {
width: 100%; width: 100%;
height: 100%; height: 100%;
padding-right: 40px;
box-sizing: border-box;
} }
.pic { .pic {
width: 300px; width: 250px;
position: absolute; position: absolute;
height: 150px; height: 120px;
top: 100px; top: 120px;
left: 40px; left: 70px;
} }
} }
@ -1650,6 +1597,7 @@ export default {
text-align: center; text-align: center;
border: 1px solid #b1b1b1; border: 1px solid #b1b1b1;
background-size: cover; background-size: cover;
background-color: #203265;
} }
p:nth-of-type(2) { p:nth-of-type(2) {
@ -1690,6 +1638,7 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: relative; position: relative;
background: url();
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -1708,8 +1657,8 @@ export default {
} }
#yhzyfbqk { #yhzyfbqk {
width: 100%; width: 994px;
height: 100%; height: 324px;
} }
} }
} }

44
src/views/TAN.vue
View File

@ -1391,10 +1391,10 @@ export default {
myChart.resize(); myChart.resize();
}); });
//获取山东地图数据。 //获取山东地图数据。
$.get( let src = require("../assets/shandong.json");
"https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
function (geojson) { function registerMap() {
echarts.registerMap("山东", geojson); echarts.registerMap("山东", src);
let option = { let option = {
series: [ series: [
{ {
@ -1414,10 +1414,38 @@ export default {
borderWidth: 2, // 高亮时的边框宽度 borderWidth: 2, // 高亮时的边框宽度
}, },
label: { label: {
// .0625rem /* 12/192 */ show: true, //是否显示市
// fontSize: 12, // 选中地图文字字号和字体颜色 formatter: function (params) {
fontSize: "0.0625rem", // 选中地图文字字号和字体颜色 var name = params.name;
var value = params.value;
var text = ` {fline|${value}}\n{tline|${name}} `;
return text;
},
textStyle: {
color: "#000", //文字颜色
// fontSize: 16, //文字大小
fontSize: "0.0833rem", //文字大小
fontFamily: "微软雅黑",
// backgroundColor: {
// image: "../assets/客户侧总体用能情况分析/光标.png",
// },
// padding: [15, 20],
},
rich: {
fline: {
padding: [0, 35],
color: "#FDCC00",
// fontSize: 14,
fontSize: "0.0729rem",
fontWeight: 600,
},
tline: {
padding: [0, 27],
color: "#fff", color: "#fff",
// fontSize: 12,
fontSize: "0.0625rem",
},
},
}, },
}, },
label: { label: {
@ -1562,7 +1590,7 @@ export default {
// }); // });
} }
} }
); registerMap();
}, },
nyxhqk() { nyxhqk() {
var attaData1 = [62, 52, 34, 61, 75, 140]; var attaData1 = [62, 52, 34, 61, 75, 140];

25
src/views/Two.vue
View File

@ -17,28 +17,28 @@
<div class="bottom"> <div class="bottom">
<div class="bottomBox"> <div class="bottomBox">
<img src="../assets/客户侧总体用能情况分析/图标.png" alt="" /> <img src="../assets/客户侧总体用能情况分析/图标.png" alt="" />
<div> <div class="box1">
<p>用电量(MWH)</p> <p>用电量(MWH)</p>
<p><span>84.00</span><span>-13.20%</span></p> <p><span>84.00</span><span>-13.20%</span></p>
</div> </div>
</div> </div>
<div class="bottomBox"> <div class="bottomBox">
<img src="../assets/客户侧总体用能情况分析/图标(1).png" alt="" /> <img src="../assets/客户侧总体用能情况分析/图标(1).png" alt="" />
<div> <div class="box1">
<p>用蒸汽量(m2)</p> <p>用蒸汽量(m2)</p>
<p><span>45.32</span><span>-23.20%</span></p> <p><span>45.32</span><span>-23.20%</span></p>
</div> </div>
</div> </div>
<div class="bottomBox"> <div class="bottomBox">
<img src="../assets/客户侧总体用能情况分析/组 3125.png" alt="" /> <img src="../assets/客户侧总体用能情况分析/组 3125.png" alt="" />
<div> <div class="box1">
<p>用水量(m2)</p> <p>用水量(m2)</p>
<p><span>56.00</span><span>-33.20%</span></p> <p><span>56.00</span><span>-33.20%</span></p>
</div> </div>
</div> </div>
<div class="bottomBox"> <div class="bottomBox">
<img src="../assets/客户侧总体用能情况分析/组 3124.png" alt="" /> <img src="../assets/客户侧总体用能情况分析/组 3124.png" alt="" />
<div> <div class="box1">
<p>用汽量(m2)</p> <p>用汽量(m2)</p>
<p><span>37.00</span><span>43.20%</span></p> <p><span>37.00</span><span>43.20%</span></p>
</div> </div>
@ -180,7 +180,7 @@ export default {
borderWidth: 2, // 高亮时的边框宽度 borderWidth: 2, // 高亮时的边框宽度
}, },
label: { label: {
fontSize: 12, // 选中地图文字字号和字体颜色 fontSize: "0.06rem", // 选中地图文字字号和字体颜色
color: "#fff", color: "#fff",
}, },
}, },
@ -194,7 +194,7 @@ export default {
}, },
textStyle: { textStyle: {
color: "#000", //文字颜色 color: "#000", //文字颜色
fontSize: 16, //文字大小 fontSize: "0.08rem", //文字大小
fontFamily: "微软雅黑", fontFamily: "微软雅黑",
// backgroundColor: { // backgroundColor: {
// image: "../assets/客户侧总体用能情况分析/光标.png", // image: "../assets/客户侧总体用能情况分析/光标.png",
@ -205,13 +205,13 @@ export default {
fline: { fline: {
padding: [0, 35], padding: [0, 35],
color: "#FDCC00", color: "#FDCC00",
fontSize: 14, fontSize: "0.07rem",
fontWeight: 600, fontWeight: 600,
}, },
tline: { tline: {
padding: [0, 27], padding: [0, 27],
color: "#fff", color: "#fff",
fontSize: 12, fontSize: "0.06rem",
}, },
}, },
}, },
@ -444,17 +444,18 @@ export default {
width: 72px; width: 72px;
height: 72px; height: 72px;
} }
.box1 {
div { display: flex;
flex-direction: column;
height: 72px;
p:nth-of-type(1) { p:nth-of-type(1) {
width: 120px; width: 120px;
margin-bottom: 10px; margin-bottom: 10px;
margin-top: 5px; margin-top: 5px;
font-size: 14px; font-size: 14px;
font-family: " AlibabaPuHuiTi"; font-family: "AlibabaPuHuiTi";
font-weight: 400; font-weight: 400;
} }
span:nth-of-type(1) { span:nth-of-type(1) {
font-size: 20px; font-size: 20px;
font-family: "AlibabaPuHuiTi"; font-family: "AlibabaPuHuiTi";

9
src/views/XQXY.vue
View File

@ -1298,10 +1298,9 @@ export default {
myChart.resize(); myChart.resize();
}); });
//获取山东地图数据。 //获取山东地图数据。
$.get( let src = require("../assets/shandong.json");
"https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json", function registerMap() {
function (geojson) { echarts.registerMap("山东", src);
echarts.registerMap("山东", geojson);
let option = { let option = {
series: [ series: [
{ {
@ -1464,7 +1463,7 @@ export default {
// }); // });
} }
} }
); registerMap();
}, },
}, },
mounted() { mounted() {

25
src/views/ZHDY.vue
View File

@ -1037,7 +1037,17 @@ export default {
console.log(item); console.log(item);
percent = ((item.value / total) * 100).toFixed(2); percent = ((item.value / total) * 100).toFixed(2);
if (name !== "") { if (name !== "") {
return `{name|${name}}` + "\t" + "\t"+"\t" + "\t" + `{num|${percent}}`+"\t" + "\t"+`{name|%}`; return (
`{name|${name}}` +
"\t" +
"\t" +
"\t" +
"\t" +
`{num|${percent}}` +
"\t" +
"\t" +
`{name|%}`
);
// return `{name|${name}` + `{num|${percent}}{name|kWh}`; // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
} else { } else {
return ""; return "";
@ -1056,7 +1066,7 @@ export default {
}, },
num: { num: {
// fontSize: 12, // fontSize: 12,
fontWeight:700, fontWeight: 700,
fontSize: "0.0833rem", fontSize: "0.0833rem",
color: color[1], color: color[1],
}, },
@ -1161,10 +1171,9 @@ export default {
myChart.resize(); myChart.resize();
}); });
//获取山东地图数据。 //获取山东地图数据。
$.get( let src = require("../assets/shandong.json");
"https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json", function registerMap() {
function (geojson) { echarts.registerMap("山东", src);
echarts.registerMap("山东", geojson);
let option = { let option = {
series: [ series: [
{ {
@ -1331,7 +1340,7 @@ export default {
// }); // });
} }
} }
); registerMap();
}, },
}, },
mounted() { mounted() {
@ -2011,7 +2020,7 @@ export default {
line-height: 36px; line-height: 36px;
} }
p.second { p.second {
width:118px; width: 118px;
height: 36px; height: 36px;
padding-left: 15px; padding-left: 15px;
font-size: 30px; font-size: 30px;