1293 lines
34 KiB
Vue
1293 lines
34 KiB
Vue
<template>
|
||
<div class="box">
|
||
<div class="a">
|
||
<img
|
||
src="../../assets/img/可调图标--未选中.png"
|
||
alt=""
|
||
@click="sendMessageToCSharp"
|
||
/>
|
||
</div>
|
||
<div class="left">
|
||
<img src="../../assets/img/标题/负荷管理.png" class="title" />
|
||
<div class="fhgl">
|
||
<div class="imgBox1">
|
||
<img src="../../assets/img/小标题栏.png" class="img" />
|
||
<p>负荷管理</p>
|
||
</div>
|
||
<div class="controls">
|
||
<div class="con1">
|
||
<div class="con_r1">
|
||
<h2>10300<span>kW</span></h2>
|
||
<p>可监测负荷</p>
|
||
</div>
|
||
</div>
|
||
<div class="con2">
|
||
<div class="con_r1">
|
||
<h2>5100<span>kW</span></h2>
|
||
<p>实时负荷</p>
|
||
</div>
|
||
</div>
|
||
<div class="con3">
|
||
<div class="con_r1">
|
||
<h2>87<span>%</span></h2>
|
||
<p>可监测负荷占比</p>
|
||
</div>
|
||
</div>
|
||
<div class="con4">
|
||
<div class="con_r1">
|
||
<h2>52<span>%</span></h2>
|
||
<p>实时负荷占比</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="fhfx">
|
||
<div class="imgBox2">
|
||
<img src="../../assets/img/小标题栏.png" class="img" />
|
||
<p>负荷分析</p>
|
||
</div>
|
||
<div id="main"></div>
|
||
</div>
|
||
<div class="byqfzl">
|
||
<div class="imgBox3">
|
||
<img src="../../assets/img/小标题栏.png" class="img" />
|
||
<p>变压器负载率</p>
|
||
</div>
|
||
<div class="fuzailv">
|
||
<ul>
|
||
<li class="ji">
|
||
<p class="p_l">1#变压器</p>
|
||
<p class="p_r">15.9%</p>
|
||
</li>
|
||
<li class="ou">
|
||
<p class="p_l">5#变压器</p>
|
||
<p class="p_r">14.4%</p>
|
||
</li>
|
||
<li class="ji">
|
||
<p class="p_l">3#变压器</p>
|
||
<p class="p_r">13.9%</p>
|
||
</li>
|
||
<li class="ou">
|
||
<p class="p_l">2#变压器</p>
|
||
<p class="p_r">13.8%</p>
|
||
</li>
|
||
<li class="ji">
|
||
<p class="p_l">4#变压器</p>
|
||
<p class="p_r">12.2%</p>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="right">
|
||
<div class="fhfl">
|
||
<div class="imgBox4">
|
||
<img src="../../assets/img/小标题栏.png" class="img" />
|
||
<p>负荷分类</p>
|
||
</div>
|
||
<div id="bingtu"></div>
|
||
<div class="fhzb">
|
||
<div class="imgBox5">
|
||
<img src="../../assets/img/小标题栏.png" class="img" />
|
||
<p>生产线负荷占比</p>
|
||
</div>
|
||
<div class="chart-container">
|
||
<div class="chart" ref="chart"></div>
|
||
<!-- 底座背景 -->
|
||
<div class="bg"></div>
|
||
</div>
|
||
</div>
|
||
<div class="scxfh">
|
||
<div class="imgBox6">
|
||
<img src="../../assets/img/小标题栏.png" class="img" />
|
||
<p>生产线负荷</p>
|
||
</div>
|
||
<div>
|
||
<div class="chartBox">
|
||
<div class="chartbox" v-for="item in list">
|
||
<span class="chartname">{{ item.name }}</span>
|
||
<div class="bigBox">
|
||
<div
|
||
class="smallBox"
|
||
:style="{ width: `${54 * item.value}px` }"
|
||
></div>
|
||
</div>
|
||
<span>{{ item.value * 100 }}kW</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import * as echarts from "echarts";
|
||
import "echarts-gl";
|
||
import { getPie3D, getParametricEquation } from "../../utils/fhgl";
|
||
const color = ["#099FE3", "#00DBEB", "#50F4C1"];
|
||
export default {
|
||
name: "FHGL",
|
||
data() {
|
||
return {
|
||
list: [
|
||
{
|
||
name: "1号生产线",
|
||
value: "15.20",
|
||
},
|
||
{
|
||
name: "2号生产线",
|
||
value: "9.27",
|
||
},
|
||
{
|
||
name: "3号生产线",
|
||
value: "6.28",
|
||
},
|
||
],
|
||
option: {
|
||
// tooltip: {
|
||
// trigger: 'axis',
|
||
// },
|
||
grid: {
|
||
left: "5%",
|
||
right: "5%",
|
||
bottom: "5%",
|
||
// containLabel: true
|
||
},
|
||
// toolbox: {
|
||
// feature: {
|
||
// saveAsImage: {}
|
||
// }
|
||
// },
|
||
xAxis: {
|
||
type: "category",
|
||
// boundaryGap: false,
|
||
data: [
|
||
"",
|
||
"02:30",
|
||
"",
|
||
"03:30",
|
||
"",
|
||
"04:30",
|
||
"",
|
||
"05:30",
|
||
"",
|
||
"06:30",
|
||
],
|
||
axisLine: {
|
||
show: true,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
fontSize: 20,
|
||
color: "#fff",
|
||
margin: 15,
|
||
},
|
||
},
|
||
yAxis: {
|
||
type: "value",
|
||
// boundaryGap: true,
|
||
name: "单位:kW",
|
||
data: ["100", "200", "300", "400", "500"],
|
||
nameTextStyle: {
|
||
color: "#fff",
|
||
fontSize: 20,
|
||
padding: 10,
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {},
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: 20,
|
||
},
|
||
},
|
||
},
|
||
legend: {
|
||
data: [
|
||
{
|
||
icon: "rect",
|
||
name: "可调负荷",
|
||
},
|
||
{
|
||
icon: "rect",
|
||
name: "实时负荷",
|
||
},
|
||
],
|
||
x: "center",
|
||
y: "top",
|
||
itemGap: 200,
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: "28px",
|
||
},
|
||
fontSize: "28px",
|
||
},
|
||
series: [
|
||
{
|
||
name: "实时负荷",
|
||
type: "line",
|
||
symbol: "circle",
|
||
symbolSize: 20,
|
||
data: [450, 120, 450, 428, 540, 100, 520, 325, 370, 90],
|
||
lineStyle: {
|
||
width: 5,
|
||
color: "#3FFF5A",
|
||
},
|
||
itemStyle: {
|
||
color: "#3FFF5A",
|
||
},
|
||
},
|
||
{
|
||
name: "可调负荷",
|
||
type: "line",
|
||
// stack: 'Total',
|
||
symbol: "circle",
|
||
symbolSize: 20,
|
||
data: [180, 420, 90, 470, 500, 90, 280, 367, 287, 360],
|
||
lineStyle: {
|
||
width: 5,
|
||
color: "#43FFF4",
|
||
},
|
||
itemStyle: {
|
||
color: "#43FFF4",
|
||
},
|
||
},
|
||
],
|
||
},
|
||
optionData: [
|
||
{
|
||
name: "1号生产线",
|
||
value: 176,
|
||
},
|
||
{
|
||
name: "3号生产线",
|
||
value: 288,
|
||
},
|
||
{
|
||
name: "2号生产线",
|
||
value: 88,
|
||
},
|
||
],
|
||
statusChart: null,
|
||
option1: {},
|
||
};
|
||
},
|
||
methods: {
|
||
//U3D交互的绑定
|
||
sendMessageToCSharp() {
|
||
window.vuplex.postMessage("负荷管理");
|
||
this.$router.push("/kdfh");
|
||
},
|
||
BingTu() {
|
||
// 复制代码
|
||
const color = ["#00FF9C", "#2CB2C5", "#00D2FF"];
|
||
const chartData = [
|
||
{
|
||
value: 380,
|
||
name: "二级",
|
||
itemStyle: {
|
||
color: color[0],
|
||
},
|
||
},
|
||
{
|
||
value: 142,
|
||
name: "三级",
|
||
itemStyle: {
|
||
color: color[1],
|
||
},
|
||
},
|
||
{
|
||
value: 694,
|
||
name: "一级",
|
||
itemStyle: {
|
||
color: color[2],
|
||
},
|
||
},
|
||
];
|
||
const sum = chartData.reduce((per, cur) => per + cur.value, 0);
|
||
const danwei = "kW";
|
||
const gap = (1 * sum) / 100;
|
||
const pieData1 = [];
|
||
const gapData = {
|
||
name: "",
|
||
value: gap,
|
||
itemStyle: {
|
||
color: "transparent",
|
||
},
|
||
};
|
||
for (let i = 0; i < chartData.length; i++) {
|
||
// 第一圈数据
|
||
pieData1.push({
|
||
...chartData[i],
|
||
});
|
||
pieData1.push(gapData);
|
||
}
|
||
let option = {
|
||
title: {
|
||
show: true,
|
||
text: sum + "{danwei|" + danwei + "}",
|
||
formatter: function (value) {
|
||
console.log(value);
|
||
},
|
||
subtext: "总负荷",
|
||
x: "39.5%",
|
||
y: "43%",
|
||
itemGap: 6,
|
||
textStyle: {
|
||
color: "#DAFFF8",
|
||
fontSize: 50,
|
||
fontWeight: "400",
|
||
lineHeight: 60,
|
||
rich: {
|
||
danwei: {
|
||
color: "#fff",
|
||
fontSize: 32,
|
||
},
|
||
},
|
||
},
|
||
subtextStyle: {
|
||
color: "#fff",
|
||
fontSize: 26,
|
||
fontWeight: "400",
|
||
lineHeight: 36,
|
||
},
|
||
textAlign: "center",
|
||
},
|
||
series: [
|
||
{
|
||
name: "",
|
||
type: "pie",
|
||
roundCap: true,
|
||
radius: ["40%", "56%"],
|
||
center: ["40%", "50%"],
|
||
data: pieData1,
|
||
label: {
|
||
show: true,
|
||
// 这里需要进行修改
|
||
formatter: function (params) {
|
||
console.log(params.dataIndex);
|
||
if (params.name) {
|
||
console.log(params.name);
|
||
if (params.name == "一级") {
|
||
return (
|
||
"{name|" +
|
||
params.name +
|
||
"}" +
|
||
`\n` +
|
||
"\n" +
|
||
"{myStyle1|" +
|
||
params.value +
|
||
"}" +
|
||
"\t" +
|
||
"{name|" +
|
||
"kw" +
|
||
"}"
|
||
);
|
||
}else if(params.name=="二级"){
|
||
return (
|
||
"{name|" +
|
||
params.name +
|
||
"}" +
|
||
`\n` +
|
||
"\n" +
|
||
"{myStyle2|" +
|
||
params.value +
|
||
"}" +
|
||
"\t" +
|
||
"{name|" +
|
||
"kw" +
|
||
"}"
|
||
);
|
||
}else{
|
||
return (
|
||
"{name|" +
|
||
params.name +
|
||
"}" +
|
||
`\n` +
|
||
"\n" +
|
||
"{myStyle3|" +
|
||
params.value +
|
||
"}" +
|
||
"\t" +
|
||
"{name|" +
|
||
"kw" +
|
||
"}"
|
||
);
|
||
}
|
||
}
|
||
},
|
||
rich: {
|
||
name: {
|
||
color: "#fff",
|
||
fontSize: 28,
|
||
},
|
||
myStyle1: {
|
||
color: color[2],
|
||
fontWeight: "bold",
|
||
fontSize: 40,
|
||
},
|
||
myStyle2: {
|
||
color: color[0],
|
||
fontWeight: "bold",
|
||
fontSize: 40,
|
||
},
|
||
myStyle3: {
|
||
color: color[1],
|
||
fontWeight: "bold",
|
||
fontSize: 40,
|
||
},
|
||
},
|
||
},
|
||
labelLine: {
|
||
length: 88,
|
||
length2: 20,
|
||
lineStyle: {
|
||
width: 2,
|
||
},
|
||
},
|
||
},
|
||
{
|
||
type: "pie",
|
||
radius: ["32%", "34%"],
|
||
center: ["40%", "50%"],
|
||
animation: false,
|
||
hoverAnimation: false,
|
||
data: [
|
||
{
|
||
value: 100,
|
||
},
|
||
],
|
||
label: {
|
||
show: false,
|
||
// 这里需要进行修改
|
||
// formatter: function (params) {
|
||
// return params.chartData1.name + "/n" + params.chartData1.value + "kw"
|
||
// }
|
||
},
|
||
labelLine: {
|
||
//label线的长度
|
||
show: true, //数据标签引导线
|
||
showAbove: true,
|
||
length: 40,
|
||
length2: 20,
|
||
lineStyle: { cap: "round" },
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#3BC5EF",
|
||
},
|
||
},
|
||
},
|
||
// {
|
||
// name: "",
|
||
// type: "pie",
|
||
// startAngle: 90,
|
||
// radius: "32%",
|
||
// animation: false,
|
||
// hoverAnimation: false,
|
||
// center: ["40%", "50%"],
|
||
// itemStyle: {
|
||
// normal: {
|
||
// labelLine: {
|
||
// show: false,
|
||
// },
|
||
// color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
|
||
// {
|
||
// offset: 1,
|
||
// color: "rgba(50,171,241, 0)",
|
||
// },
|
||
// {
|
||
// offset: 0.5,
|
||
// color: "rgba(50,171,241, .4)",
|
||
// },
|
||
// {
|
||
// offset: 0,
|
||
// color: "rgba(55,70,130, 0)",
|
||
// },
|
||
// ]),
|
||
// shadowBlur: 60,
|
||
// },
|
||
// },
|
||
// data: [
|
||
// {
|
||
// value: 100,
|
||
// },
|
||
// ],
|
||
// },
|
||
],
|
||
};
|
||
var chartDom2 = document.getElementById("bingtu");
|
||
var myChart = echarts.init(chartDom2);
|
||
option && myChart.setOption(option);
|
||
},
|
||
// 初始化label样式
|
||
setLabel() {
|
||
this.optionData.forEach((item, index) => {
|
||
item.itemStyle = {
|
||
color: color[index],
|
||
};
|
||
item.label = {
|
||
normal: {
|
||
show: true,
|
||
color: color[index],
|
||
position: "right",
|
||
// distance:-10,
|
||
offset: [0, 3],
|
||
formatter: [
|
||
"{d|{d}%}",
|
||
"————",
|
||
// '{c|{c}}{b|台}',
|
||
"{b|{b}}",
|
||
].join("\n"), // 用\n来换行
|
||
rich: {
|
||
b: {
|
||
lineHeight: 25,
|
||
align: "left",
|
||
fontSize: 30,
|
||
color: "#fff",
|
||
},
|
||
c: {
|
||
fontSize: 22,
|
||
// color: '#fff',
|
||
textShadowColor: "#1c90a6",
|
||
textShadowOffsetX: 0,
|
||
textShadowOffsetY: 2,
|
||
textShadowBlur: 5,
|
||
color: color[index],
|
||
},
|
||
d: {
|
||
color: color[index],
|
||
fontSize: 40,
|
||
align: "left",
|
||
},
|
||
},
|
||
},
|
||
};
|
||
item.labelLine = {
|
||
normal: {
|
||
length2: 200,
|
||
lineStyle: {
|
||
width: 2,
|
||
color: color[index],
|
||
},
|
||
},
|
||
};
|
||
});
|
||
},
|
||
// // 图表初始化
|
||
initChart() {
|
||
this.statusChart = echarts.init(this.$refs.chart);
|
||
// 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
|
||
this.option = getPie3D(this.optionData, 0, 270, 26, 40, 1);
|
||
this.statusChart.setOption(this.option);
|
||
// 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
|
||
this.option.series.push({
|
||
name: "信用评价", //自己根据场景修改
|
||
backgroundColor: "transparent",
|
||
type: "pie",
|
||
label: {
|
||
opacity: 1,
|
||
fontSize: 13,
|
||
lineHeight: 20,
|
||
},
|
||
startAngle: -40, // 起始角度，支持范围[0, 360]。
|
||
clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||
radius: ["20%", "60%"],
|
||
center: ["50%", "50%"],
|
||
data: this.optionData,
|
||
itemStyle: {
|
||
opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
|
||
},
|
||
});
|
||
this.statusChart.setOption(this.option);
|
||
this.bindListen(this.statusChart);
|
||
},
|
||
// // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
|
||
// // optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton
|
||
bindListen(myChart, optionName = "option") {
|
||
let selectedIndex = "";
|
||
let hoveredIndex = "";
|
||
// 监听点击事件，实现选中效果（单选）
|
||
// myChart.on("click", (params) => {
|
||
// console.log(this[optionName].series[params.seriesIndex],'this[optionName].series[params.seriesIndex].pieStatus');
|
||
// // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
|
||
// const isSelected =
|
||
// !this[optionName].series[params.seriesIndex].pieStatus.selected;
|
||
// const isHovered =
|
||
// this[optionName].series[params.seriesIndex].pieStatus.hovered;
|
||
// const k = this[optionName].series[params.seriesIndex].pieStatus.k;
|
||
// const startRatio =
|
||
// this[optionName].series[params.seriesIndex].pieData.startRatio;
|
||
// const endRatio =
|
||
// this[optionName].series[params.seriesIndex].pieData.endRatio;
|
||
// // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
|
||
// if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
|
||
// this[optionName].series[selectedIndex].parametricEquation =
|
||
// getParametricEquation(
|
||
// this[optionName].series[selectedIndex].pieData.startRatio,
|
||
// this[optionName].series[selectedIndex].pieData.endRatio,
|
||
// false,
|
||
// false,
|
||
// k,
|
||
// this[optionName].series[selectedIndex].pieData.value
|
||
// );
|
||
// this[optionName].series[selectedIndex].pieStatus.selected = false;
|
||
// }
|
||
// // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
|
||
// this[optionName].series[params.seriesIndex].parametricEquation =
|
||
// getParametricEquation(
|
||
// startRatio,
|
||
// endRatio,
|
||
// isSelected,
|
||
// isHovered,
|
||
// k,
|
||
// this[optionName].series[params.seriesIndex].pieData.value
|
||
// );
|
||
// this[optionName].series[params.seriesIndex].pieStatus.selected =
|
||
// isSelected;
|
||
// // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
|
||
// selectedIndex = isSelected ? params.seriesIndex : null;
|
||
// // 使用更新后的 option，渲染图表
|
||
// myChart.setOption(this[optionName]);
|
||
// });
|
||
// 监听 mouseover，近似实现高亮（放大）效果
|
||
myChart.on("mouseover", (params) => {
|
||
// 准备重新渲染扇形所需的参数
|
||
let isSelected;
|
||
let isHovered;
|
||
let startRatio;
|
||
let endRatio;
|
||
let k;
|
||
// 如果触发 mouseover 的扇形当前已高亮，则不做操作
|
||
if (hoveredIndex === params.seriesIndex) {
|
||
// 否则进行高亮及必要的取消高亮操作
|
||
} else {
|
||
// 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
|
||
if (hoveredIndex !== "") {
|
||
// 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
|
||
isSelected =
|
||
this[optionName].series[hoveredIndex].pieStatus.selected;
|
||
isHovered = false;
|
||
startRatio =
|
||
this[optionName].series[hoveredIndex].pieData.startRatio;
|
||
endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
|
||
k = this[optionName].series[hoveredIndex].pieStatus.k;
|
||
// 对当前点击的扇形，执行取消高亮操作（对 option 更新）
|
||
this[optionName].series[hoveredIndex].parametricEquation =
|
||
getParametricEquation(
|
||
startRatio,
|
||
endRatio,
|
||
isSelected,
|
||
isHovered,
|
||
k,
|
||
this[optionName].series[hoveredIndex].pieData.value
|
||
);
|
||
this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
|
||
// 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
|
||
hoveredIndex = "";
|
||
}
|
||
// 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
|
||
if (
|
||
params.seriesName !== "mouseoutSeries" &&
|
||
params.seriesName !== "信用评价"
|
||
) {
|
||
// 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
|
||
isSelected =
|
||
this[optionName].series[params.seriesIndex].pieStatus.selected;
|
||
isHovered = true;
|
||
startRatio =
|
||
this[optionName].series[params.seriesIndex].pieData.startRatio;
|
||
endRatio =
|
||
this[optionName].series[params.seriesIndex].pieData.endRatio;
|
||
k = this[optionName].series[params.seriesIndex].pieStatus.k;
|
||
// 对当前点击的扇形，执行高亮操作（对 option 更新）
|
||
this[optionName].series[params.seriesIndex].parametricEquation =
|
||
getParametricEquation(
|
||
startRatio,
|
||
endRatio,
|
||
isSelected,
|
||
isHovered,
|
||
k,
|
||
this[optionName].series[params.seriesIndex].pieData.value + 60
|
||
);
|
||
this[optionName].series[params.seriesIndex].pieStatus.hovered =
|
||
isHovered;
|
||
// 记录上次高亮的扇形对应的系列号 seriesIndex
|
||
hoveredIndex = params.seriesIndex;
|
||
}
|
||
// 使用更新后的 option，渲染图表
|
||
myChart.setOption(this[optionName]);
|
||
}
|
||
});
|
||
// 修正取消高亮失败的 bug
|
||
myChart.on("globalout", () => {
|
||
// 准备重新渲染扇形所需的参数
|
||
let isSelected;
|
||
let isHovered;
|
||
let startRatio;
|
||
let endRatio;
|
||
let k;
|
||
if (hoveredIndex !== "") {
|
||
// 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
|
||
isSelected = this[optionName].series[hoveredIndex].pieStatus.selected;
|
||
isHovered = false;
|
||
k = this[optionName].series[hoveredIndex].pieStatus.k;
|
||
startRatio = this[optionName].series[hoveredIndex].pieData.startRatio;
|
||
endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
|
||
// 对当前点击的扇形，执行取消高亮操作（对 option 更新）
|
||
this[optionName].series[hoveredIndex].parametricEquation =
|
||
getParametricEquation(
|
||
startRatio,
|
||
endRatio,
|
||
isSelected,
|
||
isHovered,
|
||
k,
|
||
this[optionName].series[hoveredIndex].pieData.value
|
||
);
|
||
this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
|
||
// 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
|
||
hoveredIndex = "";
|
||
}
|
||
// 使用更新后的 option，渲染图表
|
||
myChart.setOption(this[optionName]);
|
||
});
|
||
},
|
||
},
|
||
created() {
|
||
this.setLabel();
|
||
// if (window.vuplex) {
|
||
// addMessageListener();
|
||
// } else {
|
||
// window.addEventListener("vuplexready", addEventListener);
|
||
// } function addEventListener() {
|
||
// window.vuplex.addEventListener("message", function (event) {
|
||
// let json = event.data;
|
||
// console.log("JSON received" + json);
|
||
// })
|
||
// }
|
||
},
|
||
mounted() {
|
||
var chartDom = document.getElementById("main");
|
||
var myChart = echarts.init(chartDom);
|
||
this.option && myChart.setOption(this.option);
|
||
this.$nextTick(() => {
|
||
this.BingTu();
|
||
this.initChart();
|
||
});
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.box {
|
||
width: 100%;
|
||
height: 100%;
|
||
background-image: url(../../assets/img/左遮罩.png),
|
||
url(../../assets/img/右遮罩.png);
|
||
// background-color: transparent;
|
||
padding-top: 400px;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
position: relative;
|
||
background-color: transparent;
|
||
justify-content: space-between;
|
||
|
||
.a {
|
||
position: absolute;
|
||
width: 1300px;
|
||
z-index: 2;
|
||
top: 420px;
|
||
right: 480px;
|
||
z-index: 100;
|
||
|
||
img {
|
||
margin-right: 102px;
|
||
pointer-events: all;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
|
||
.left {
|
||
width: 1237px;
|
||
height: 2500px;
|
||
margin-left: 61px;
|
||
background-image: url("../../assets/img/侧边.png");
|
||
padding-left: 59px;
|
||
padding-right: 45px;
|
||
box-sizing: border-box;
|
||
.title {
|
||
margin-top: 15px;
|
||
margin-left: 60px;
|
||
}
|
||
.fhgl {
|
||
position: relative;
|
||
margin-top: 56px;
|
||
|
||
.imgBox1 {
|
||
height: 93px;
|
||
width: 1156px;
|
||
|
||
p {
|
||
position: absolute;
|
||
color: #fff;
|
||
top: 20px;
|
||
left: 50px;
|
||
font-size: 30px;
|
||
font-family: "MicrosoftYaHei";
|
||
}
|
||
}
|
||
|
||
// 左边的第一个
|
||
.controls {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
margin-top: 113px;
|
||
|
||
.con1 {
|
||
width: 510px;
|
||
height: 177px;
|
||
// background: rgba(37, 31, 1, 0.1);
|
||
border-radius: 24px 3px 3px 24px;
|
||
background: url(../../assets/FHGL/11.png);
|
||
background-size: cover;
|
||
margin-bottom: 82px;
|
||
|
||
.con_r1 {
|
||
margin: 41px 108px 79px 236px;
|
||
}
|
||
|
||
h2 {
|
||
width: 166px;
|
||
height: 57px;
|
||
font-size: 54px;
|
||
font-family: Impact;
|
||
font-weight: 400;
|
||
color: #58fd64;
|
||
|
||
// line-height: 341px;
|
||
span {
|
||
width: 50px;
|
||
height: 27px;
|
||
font-size: 33px;
|
||
margin-left: 18px;
|
||
font-family: Microsoft YaHei;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
// line-height: 341px;
|
||
}
|
||
}
|
||
|
||
p {
|
||
margin-top: 18px;
|
||
width: 208px;
|
||
height: 41px;
|
||
font-size: 36px;
|
||
font-family: Microsoft YaHei;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
// line-height: 196px;
|
||
}
|
||
}
|
||
|
||
.con2 {
|
||
width: 510px;
|
||
height: 177px;
|
||
// background: rgba(37, 31, 1, 0.1);
|
||
// border: 1px solid;
|
||
// border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
|
||
border-radius: 24px 3px 3px 24px;
|
||
background: url(../../assets/FHGL/12.png);
|
||
background-size: cover;
|
||
margin-bottom: 82px;
|
||
|
||
.con_r1 {
|
||
margin: 41px 108px 79px 236px;
|
||
}
|
||
|
||
h2 {
|
||
width: 166px;
|
||
height: 57px;
|
||
font-size: 54px;
|
||
font-family: Impact;
|
||
font-weight: 400;
|
||
color: #03ffd8;
|
||
|
||
// line-height: 341px;
|
||
span {
|
||
width: 50px;
|
||
height: 27px;
|
||
margin-left: 18px;
|
||
font-size: 33px;
|
||
font-family: Microsoft YaHei;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
|
||
p {
|
||
margin-top: 18px;
|
||
width: 208px;
|
||
height: 41px;
|
||
font-size: 36px;
|
||
font-family: Microsoft YaHei;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
// line-height: 196px;
|
||
}
|
||
}
|
||
|
||
.con3 {
|
||
width: 510px;
|
||
height: 177px;
|
||
// background: rgba(37, 31, 1, 0.1);
|
||
// border: 1px solid;
|
||
// border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
|
||
border-radius: 24px 3px 3px 24px;
|
||
background: url(../../assets/FHGL/13.png);
|
||
background-size: cover;
|
||
margin-bottom: 102px;
|
||
|
||
.con_r1 {
|
||
margin: 41px 108px 79px 236px;
|
||
}
|
||
|
||
h2 {
|
||
width: 166px;
|
||
height: 57px;
|
||
font-size: 54px;
|
||
text-align: center;
|
||
font-family: Impact;
|
||
font-weight: 400;
|
||
color: #36b1ff;
|
||
|
||
// line-height: 341px;
|
||
span {
|
||
width: 50px;
|
||
height: 27px;
|
||
margin-left: 18px;
|
||
font-size: 33px;
|
||
font-family: Microsoft YaHei;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
|
||
p {
|
||
margin-top: 18px;
|
||
width: 291px;
|
||
height: 42px;
|
||
font-size: 36px;
|
||
font-family: Microsoft YaHei;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
// line-height: 196px;
|
||
}
|
||
}
|
||
|
||
.con4 {
|
||
width: 510px;
|
||
height: 177px;
|
||
// background: rgba(37, 31, 1, 0.1);
|
||
// border: 1px solid;
|
||
// border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
|
||
border-radius: 24px 3px 3px 24px;
|
||
background: url(../../assets/FHGL/14.png);
|
||
background-size: cover;
|
||
margin-bottom: 102px;
|
||
|
||
.con_r1 {
|
||
margin: 41px 108px 79px 236px;
|
||
}
|
||
|
||
h2 {
|
||
width: 166px;
|
||
height: 57px;
|
||
font-size: 54px;
|
||
font-family: Impact;
|
||
font-weight: 400;
|
||
color: #03ffd8;
|
||
|
||
// line-height: 341px;
|
||
span {
|
||
width: 50px;
|
||
height: 27px;
|
||
font-size: 33px;
|
||
margin-left: 18px;
|
||
font-family: Microsoft YaHei;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
// line-height: 341px;
|
||
}
|
||
}
|
||
|
||
p {
|
||
margin-top: 18px;
|
||
width: 291px;
|
||
height: 42px;
|
||
font-size: 36px;
|
||
font-family: Microsoft YaHei;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
// line-height: 196px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.fhfx {
|
||
position: relative;
|
||
margin-top: 56px;
|
||
|
||
.imgBox2 {
|
||
height: 93px;
|
||
width: 1156px;
|
||
margin-bottom: 50px;
|
||
|
||
p {
|
||
position: absolute;
|
||
color: #fff;
|
||
top: 20px;
|
||
left: 50px;
|
||
font-size: 30px;
|
||
font-family: "MicrosoftYaHei";
|
||
}
|
||
}
|
||
|
||
#main {
|
||
width: 1098px;
|
||
height: 600px;
|
||
}
|
||
}
|
||
|
||
.byqfzl {
|
||
position: relative;
|
||
margin-top: 56px;
|
||
|
||
.imgBox3 {
|
||
height: 93px;
|
||
width: 1156px;
|
||
margin-bottom: 80px;
|
||
|
||
p {
|
||
position: absolute;
|
||
color: #fff;
|
||
top: 20px;
|
||
left: 50px;
|
||
font-size: 30px;
|
||
font-family: "MicrosoftYaHei";
|
||
}
|
||
}
|
||
|
||
.fuzailv {
|
||
ul {
|
||
// margin: 0px 38px 0px 43px;
|
||
width: 1236px;
|
||
height: 2477px;
|
||
|
||
li {
|
||
width: 1155px;
|
||
height: 102px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
|
||
p.p_l {
|
||
width: 275px;
|
||
height: 102px;
|
||
font-size: 42px;
|
||
font-family: Microsoft YaHei;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
line-height: 98px;
|
||
}
|
||
|
||
p.p_r {
|
||
width: 123px;
|
||
height: 102px;
|
||
font-size: 42px;
|
||
font-family: Microsoft YaHei;
|
||
font-weight: bold;
|
||
color: #40fff1;
|
||
line-height: 98px;
|
||
}
|
||
}
|
||
|
||
li.ji {
|
||
background: rgba(25, 105, 168, 0.4);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.right {
|
||
width: 1237px;
|
||
height: 2500px;
|
||
margin-right: 61px;
|
||
background-image: url("../../assets/img/侧边.png");
|
||
padding-left: 59px;
|
||
padding-right: 45px;
|
||
box-sizing: border-box;
|
||
|
||
.fhfl {
|
||
position: relative;
|
||
margin-top: 128px;
|
||
|
||
.imgBox4 {
|
||
height: 93px;
|
||
width: 1156px;
|
||
|
||
p {
|
||
position: absolute;
|
||
color: #fff;
|
||
top: 20px;
|
||
left: 50px;
|
||
font-size: 30px;
|
||
font-family: "MicrosoftYaHei";
|
||
}
|
||
}
|
||
|
||
#bingtu {
|
||
width: 100%;
|
||
height: 600px;
|
||
}
|
||
}
|
||
|
||
.fhzb {
|
||
position: relative;
|
||
margin-top: 128px;
|
||
|
||
.imgBox5 {
|
||
height: 93px;
|
||
width: 1156px;
|
||
|
||
p {
|
||
position: absolute;
|
||
color: #fff;
|
||
top: 20px;
|
||
left: 50px;
|
||
font-size: 30px;
|
||
font-family: "MicrosoftYaHei";
|
||
}
|
||
}
|
||
|
||
// #bingtu2 {
|
||
// width: 100%;
|
||
// height: 600px;
|
||
// // background-color: red;
|
||
// }
|
||
}
|
||
|
||
.scxfh {
|
||
position: relative;
|
||
margin-top: 128px;
|
||
|
||
.imgBox6 {
|
||
height: 93px;
|
||
width: 1156px;
|
||
|
||
p {
|
||
position: absolute;
|
||
color: #fff;
|
||
top: 20px;
|
||
left: 50px;
|
||
font-size: 30px;
|
||
font-family: "MicrosoftYaHei";
|
||
}
|
||
}
|
||
|
||
.chartBox {
|
||
width: 1155px;
|
||
margin-top: 50px;
|
||
margin-left: 60px;
|
||
|
||
.chartbox {
|
||
width: 1000%;
|
||
color: #fff;
|
||
font-size: 30px;
|
||
position: relative;
|
||
align-items: center;
|
||
display: flex;
|
||
margin-top: 100px;
|
||
|
||
.chartname {
|
||
position: absolute;
|
||
left: 24px;
|
||
top: 10px;
|
||
}
|
||
|
||
.bigBox {
|
||
width: 961px;
|
||
height: 65px;
|
||
background-color: #273546;
|
||
|
||
.smallBox {
|
||
width: 100px;
|
||
height: 65px;
|
||
background: linear-gradient(
|
||
to right,
|
||
rgba(1, 191, 249, 1) 20%,
|
||
rgba(68, 161, 201, 1) 100%,
|
||
rgba(42, 196, 243, 1) 20%
|
||
);
|
||
}
|
||
}
|
||
|
||
span:nth-of-type(1) {
|
||
width: 231px;
|
||
}
|
||
|
||
span:nth-of-type(2) {
|
||
font-size: 32px;
|
||
color: #43fff1;
|
||
margin-left: 20px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.chart-container {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 600px;
|
||
|
||
.chart {
|
||
z-index: 1;
|
||
}
|
||
|
||
.chart,
|
||
.bg {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.bg {
|
||
position: absolute;
|
||
bottom: 38px;
|
||
left: 50%;
|
||
z-index: 0;
|
||
height: 400px;
|
||
width: 720px;
|
||
background: no-repeat center;
|
||
// background-image: url("~@/assets/imgs/piebg.png");
|
||
background: center top url("../../assets/img/底盘.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
transform: translateX(-50%);
|
||
}
|
||
}
|
||
</style>
|