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

11

This commit is contained in:
lll 2023-12-05 10:27:32 +08:00
parent b38e8b5a23
commit efde66960f
3 changed files with 164 additions and 208 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>
<%= htmlWebpackPlugin.options.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>
<body>

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

370
src/views/KHC.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="box">
<div class="title">
<img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
<img src="../assets/客户侧总体用能情况分析/logo.png" alt="" />
<p>客户侧总体用能情况分析</p>
<img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
</div>
@ -551,30 +551,63 @@ export default {
},
//用能分类占比
initYnflzb() {
let getParametricEquation = function (
let optionData = [
{
name: "楼宇",
value: 60,
itemStyle: {
color: "#37FFC9",
},
},
{
name: "工业",
value: 44,
itemStyle: {
color: "#31A1FF",
},
},
{
name: "其他",
value: 32,
itemStyle: {
color: "#FFF777",
},
},
];
let option = getPie3D(optionData, 0.59);
// 生成扇形的曲面参数方程
function getParametricEquation(
startRatio,
endRatio,
isSelected,
isHovered,
k,
height
h
) {
// 计算
let midRatio = (startRatio + endRatio) / 2;
let startRadian = startRatio * Math.PI * 2;
let endRadian = endRatio * Math.PI * 2;
let midRadian = midRatio * Math.PI * 2;
const midRatio = (startRatio + endRatio) / 2;
const startRadian = startRatio * Math.PI * 2;
const endRadian = endRatio * Math.PI * 2;
const midRadian = midRatio * Math.PI * 2;
// 如果只有一个扇形，则不实现选中效果。
if (startRatio === 0 && endRatio === 1) {
// eslint-disable-next-line no-param-reassign
isSelected = false;
}
// 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
// eslint-disable-next-line no-param-reassign
k = typeof k !== "undefined" ? k : 1 / 3;
// 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
// 计算高亮效果的放大比例（未高亮，则比例为 1）
let hoverRate = isHovered ? 1.05 : 1;
const hoverRate = isHovered ? 1.05 : 1;
// 返回曲面参数方程
return {
u: {
@ -582,12 +615,14 @@ export default {
max: Math.PI * 3,
step: Math.PI / 32,
},
v: {
min: 0,
max: Math.PI * 2,
step: Math.PI / 20,
},
x: function (u, v) {
x(u, v) {
if (u < startRadian) {
return (
offsetX +
@ -603,7 +638,7 @@ export default {
return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
},
y: function (u, v) {
y(u, v) {
if (u < startRadian) {
return (
offsetY +
@ -619,34 +654,36 @@ export default {
return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
},
z: function (u, v) {
z(u, v) {
if (u < -Math.PI * 0.5) {
return Math.sin(u);
}
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 饼图的配置项
let getPie3D = function (pieData, internalDiameterRatio) {
let series = [];
function getPie3D(pieData, internalDiameterRatio) {
const series = [];
// 总和
let sumValue = 0;
let startValue = 0;
let endValue = 0;
let legendData = [];
let k =
const legendData = [];
const k =
typeof internalDiameterRatio !== "undefined"
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
: 1 / 3;
// 为每一个饼图数据，生成一个 series-surface 配置
for (let i = 0; i < pieData.length; i++) {
for (let i = 0; i < pieData.length; i += 1) {
sumValue += pieData[i].value;
let seriesItem = {
const seriesItem = {
name:
typeof pieData[i].name === "undefined"
? `series${i}`
@ -660,17 +697,19 @@ export default {
pieStatus: {
selected: false,
hovered: false,
k: k,
k,
},
};
if (typeof pieData[i].itemStyle != "undefined") {
let itemStyle = {};
if (typeof pieData[i].itemStyle !== "undefined") {
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)
: 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)
: null;
@ -678,12 +717,11 @@ export default {
}
series.push(seriesItem);
}
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
// 向每个 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;
console.log(series[i]);
series[i].pieData.startRatio = startValue / sumValue;
series[i].pieData.endRatio = endValue / sumValue;
series[i].parametricEquation = getParametricEquation(
@ -692,189 +730,107 @@ export default {
false,
false,
k,
series[i].pieData.value
// 我这里做了一个处理，使除了第一个之外的值都是10
series[i].pieData.value === series[0].pieData.value ? 35 : 10
);
startValue = endValue;
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",
// 准备待返回的配置项，把准备好的 legendData、series 传入。
const option = {
// animation: false,
legend: {
left: "80%",
top: "40%",
data: ["楼宇", "工业", "其他"],
orient: "vertical",
icon: "roundRect",
itemWidth: 10, // 图标宽度
itemHeight: 10, // 图标高度
textStyle: {
fontSize: "0.06rem",
fontFamily: "AlibabaPuHuiTi",
fontWeight: 400,
color: "rgba(255,255,255,0.8)",
},
formatter: (name) => {
if (optionData.length) {
const item = optionData.filter((item) => item.name === name)[0];
return ` ${name} ${item.value}%`;
}
},
},
},
{
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 传入。
let option = {
legend: {
show: true,
tooltip: {
formatter: (params) => {
if (params.seriesName !== "mouseoutSeries") {
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 "";
},
},
xAxis3D: {
min: -1,
max: 1,
},
yAxis3D: {
min: -1,
max: 1,
},
zAxis3D: {
min: -1,
max: 1,
},
grid3D: {
show: false,
boxHeight: 10,
top: "0%",
viewControl: {
// 3d效果可以放大、旋转等，请自己去查看官方配置
alpha: 20,
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,
// },
},
},
orient: "vertical",
data: data,
top: "center",
itemGap: 14,
itemHeight: 8,
itemWidth: 17,
right: "2%",
textStyle: {
color: "#fff",
fontSize: "0.06rem",
},
formatter: function (name) {
let res = data.filter((v) => v.name === name);
res = res[0] || {};
let unit = res.unit || "";
return name + " " + res.value + unit;
},
},
animation: false,
tooltip: {
show: false,
formatter: (params) => {
if (
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 + "%"
}`;
}
},
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: {
min: -1,
max: 1,
},
yAxis3D: {
min: -1,
max: 1,
},
zAxis3D: {
min: -1,
max: 1,
},
grid3D: {
show: false,
boxHeight: 0.01,
//top: '30%',
bottom: "500%",
left: "-7%",
// environment: "rgba(255,255,255,0)",
viewControl: {
distance: 180,
alpha: 25,
beta: 60,
},
},
series: series,
};
this.defineEcharts("ynflzb", option);
series,
};
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() {
@ -1582,14 +1538,16 @@ export default {
#ynflzb {
width: 100%;
height: 100%;
padding-right: 40px;
box-sizing: border-box;
}
.pic {
width: 300px;
width: 250px;
position: absolute;
height: 150px;
top: 100px;
left: 40px;
height: 120px;
top: 120px;
left: 70px;
}
}