master
“yu”
parent
3ed21681f0
commit
2402fb4d81
|
|
@ -17,9 +17,9 @@ const props = defineProps<{
|
||||||
threeDPieData: any;
|
threeDPieData: any;
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
let dom = ref()
|
let dom = ref();
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
handelColumnEcharts()
|
handelColumnEcharts();
|
||||||
});
|
});
|
||||||
|
|
||||||
// 柱状图
|
// 柱状图
|
||||||
|
|
@ -27,16 +27,15 @@ let handelColumnEcharts = () => {
|
||||||
let myChart = proxy.$echarts.init(dom.value);
|
let myChart = proxy.$echarts.init(dom.value);
|
||||||
// console.log(props.threeDPieData);
|
// console.log(props.threeDPieData);
|
||||||
|
|
||||||
|
let option: any = [];
|
||||||
let option: any = []
|
const pieData = props.threeDPieData.pieData;
|
||||||
const pieData = props.threeDPieData.pieData
|
|
||||||
|
|
||||||
//设置图表配置项
|
//设置图表配置项
|
||||||
option = getPie3D(pieData, props.threeDPieData.center)
|
option = getPie3D(pieData, props.threeDPieData.center);
|
||||||
//设置交互事件 鼠标移入 点击
|
//设置交互事件 鼠标移入 点击
|
||||||
|
|
||||||
//获取配置项
|
//获取配置项
|
||||||
function getPie3D(pieData:any, internalDiameterRatio:any) {
|
function getPie3D(pieData: any, internalDiameterRatio: any) {
|
||||||
let series = [];
|
let series = [];
|
||||||
let sumValue = 0;
|
let sumValue = 0;
|
||||||
let startValue = 0;
|
let startValue = 0;
|
||||||
|
|
@ -152,36 +151,45 @@ let handelColumnEcharts = () => {
|
||||||
// });
|
// });
|
||||||
let option = {
|
let option = {
|
||||||
//图例组件
|
//图例组件
|
||||||
// legend: {
|
legend: {
|
||||||
// //图例列表的布局朝向。
|
//图例列表的布局朝向。
|
||||||
// orient: props.threeDPieData.legend.orient,
|
orient: props.threeDPieData.legend.orient,
|
||||||
// right: props.threeDPieData.legend.right,
|
right: props.threeDPieData.legend.right,
|
||||||
// top: props.threeDPieData.legend.top,
|
top: props.threeDPieData.legend.top,
|
||||||
// //图例文字每项之间的间隔
|
|
||||||
// itemGap: props.threeDPieData.legend.itemGap,
|
//图例文字每项之间的间隔
|
||||||
// show: false,
|
itemGap: props.threeDPieData.legend.itemGap,
|
||||||
// icon: "rect",
|
show: false, //工具栏不展示
|
||||||
// itemHeight: 10,
|
tooltip: {
|
||||||
// itemWidth: 10,
|
show: true,
|
||||||
// textStyle: {
|
},
|
||||||
// //图例字体大小
|
icon: "rect",
|
||||||
// fontSize: transformFontSize(15),
|
itemHeight: 10,
|
||||||
// color: "#FFFFFF",
|
itemWidth: 10,
|
||||||
// lineHeight: 20,
|
textStyle: {
|
||||||
// },
|
//图例字体大小
|
||||||
// formatter: function (params) {
|
fontSize: transformFontSize(15),
|
||||||
// for (let i = 0; i < pieData.length; i++) {
|
color: "#FFFFFF",
|
||||||
// if (pieData[i].name === params) {
|
lineHeight: 20,
|
||||||
// return `${pieData[i].name} ${(pieData[i].value / props.threeDPieData.total*100).toFixed(0)}%`
|
},
|
||||||
// }
|
formatter: function (params) {
|
||||||
// }
|
for (let i = 0; i < pieData.length; i++) {
|
||||||
// }
|
if (pieData[i].name === params) {
|
||||||
// },
|
return `${pieData[i].name} ${(
|
||||||
|
(pieData[i].value / props.threeDPieData.total) *
|
||||||
|
100
|
||||||
|
).toFixed(0)}%`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
//移动上去提示的文本内容
|
//移动上去提示的文本内容
|
||||||
tooltip: {
|
tooltip: {
|
||||||
backgroundColor: "rgba(18, 55, 85, 0.8);",
|
backgroundColor: "rgba(18, 55, 85, 0.8);",
|
||||||
borderColor: "transparent",
|
borderColor: "transparent",
|
||||||
extraCssText: `max-width:${transformFontSize(150)}px;max-height:${transformFontSize(80)}px`,
|
extraCssText: `max-width:${transformFontSize(
|
||||||
|
150
|
||||||
|
)}px;max-height:${transformFontSize(80)}px`,
|
||||||
formatter: (params) => {
|
formatter: (params) => {
|
||||||
if (
|
if (
|
||||||
params.seriesName !== "mouseoutSeries" &&
|
params.seriesName !== "mouseoutSeries" &&
|
||||||
|
|
@ -237,10 +245,17 @@ let handelColumnEcharts = () => {
|
||||||
series: series,
|
series: series,
|
||||||
};
|
};
|
||||||
return option;
|
return option;
|
||||||
};
|
}
|
||||||
|
|
||||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||||
function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
|
function getParametricEquation(
|
||||||
|
startRatio,
|
||||||
|
endRatio,
|
||||||
|
isSelected,
|
||||||
|
isHovered,
|
||||||
|
k,
|
||||||
|
h
|
||||||
|
) {
|
||||||
// 计算
|
// 计算
|
||||||
let midRatio = (startRatio + endRatio) / 2;
|
let midRatio = (startRatio + endRatio) / 2;
|
||||||
let startRadian = startRatio * Math.PI * 2;
|
let startRadian = startRatio * Math.PI * 2;
|
||||||
|
|
@ -272,8 +287,7 @@ let handelColumnEcharts = () => {
|
||||||
x: function (u, v) {
|
x: function (u, v) {
|
||||||
if (u < startRadian) {
|
if (u < startRadian) {
|
||||||
return (
|
return (
|
||||||
offsetX +
|
offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
|
||||||
Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
if (u > endRadian) {
|
if (u > endRadian) {
|
||||||
|
|
@ -286,8 +300,7 @@ let handelColumnEcharts = () => {
|
||||||
y: function (u, v) {
|
y: function (u, v) {
|
||||||
if (u < startRadian) {
|
if (u < startRadian) {
|
||||||
return (
|
return (
|
||||||
offsetY +
|
offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
|
||||||
Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
if (u > endRadian) {
|
if (u > endRadian) {
|
||||||
|
|
@ -307,7 +320,7 @@ let handelColumnEcharts = () => {
|
||||||
return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
|
return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
};
|
}
|
||||||
//这是一个自定义计算的方法
|
//这是一个自定义计算的方法
|
||||||
function fomatFloat(num, n) {
|
function fomatFloat(num, n) {
|
||||||
var f = parseFloat(num);
|
var f = parseFloat(num);
|
||||||
|
|
@ -326,7 +339,7 @@ let handelColumnEcharts = () => {
|
||||||
s += "0";
|
s += "0";
|
||||||
}
|
}
|
||||||
return s;
|
return s;
|
||||||
};
|
}
|
||||||
//获取3d丙图的最高扇区的高度
|
//获取3d丙图的最高扇区的高度
|
||||||
function getHeight3D(series, height) {
|
function getHeight3D(series, height) {
|
||||||
series.sort((a, b) => {
|
series.sort((a, b) => {
|
||||||
|
|
@ -341,18 +354,14 @@ let handelColumnEcharts = () => {
|
||||||
// 监听点击事件，实现选中效果（单选）
|
// 监听点击事件，实现选中效果（单选）
|
||||||
myChart.on("click", function (params) {
|
myChart.on("click", function (params) {
|
||||||
// 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
|
// 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
|
||||||
let isSelected =
|
let isSelected = !option.series[params.seriesIndex].pieStatus.selected;
|
||||||
!option.series[params.seriesIndex].pieStatus.selected;
|
let isHovered = option.series[params.seriesIndex].pieStatus.hovered;
|
||||||
let isHovered =
|
|
||||||
option.series[params.seriesIndex].pieStatus.hovered;
|
|
||||||
let k = option.series[params.seriesIndex].pieStatus.k;
|
let k = option.series[params.seriesIndex].pieStatus.k;
|
||||||
let startRatio =
|
let startRatio = option.series[params.seriesIndex].pieData.startRatio;
|
||||||
option.series[params.seriesIndex].pieData.startRatio;
|
|
||||||
let endRatio = option.series[params.seriesIndex].pieData.endRatio;
|
let endRatio = option.series[params.seriesIndex].pieData.endRatio;
|
||||||
// 如果之前选中过其他扇形，将其取消选中（对 option 更新）
|
// 如果之前选中过其他扇形，将其取消选中（对 option 更新）
|
||||||
if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
|
if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
|
||||||
option.series[selectedIndex].parametricEquation =
|
option.series[selectedIndex].parametricEquation = getParametricEquation(
|
||||||
getParametricEquation(
|
|
||||||
option.series[selectedIndex].pieData.startRatio,
|
option.series[selectedIndex].pieData.startRatio,
|
||||||
option.series[selectedIndex].pieData.endRatio,
|
option.series[selectedIndex].pieData.endRatio,
|
||||||
false,
|
false,
|
||||||
|
|
@ -419,11 +428,9 @@ let handelColumnEcharts = () => {
|
||||||
params.seriesName !== "pie2d"
|
params.seriesName !== "pie2d"
|
||||||
) {
|
) {
|
||||||
// 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
|
// 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
|
||||||
isSelected =
|
isSelected = option.series[params.seriesIndex].pieStatus.selected;
|
||||||
option.series[params.seriesIndex].pieStatus.selected;
|
|
||||||
isHovered = true;
|
isHovered = true;
|
||||||
startRatio =
|
startRatio = option.series[params.seriesIndex].pieData.startRatio;
|
||||||
option.series[params.seriesIndex].pieData.startRatio;
|
|
||||||
endRatio = option.series[params.seriesIndex].pieData.endRatio;
|
endRatio = option.series[params.seriesIndex].pieData.endRatio;
|
||||||
k = option.series[params.seriesIndex].pieStatus.k;
|
k = option.series[params.seriesIndex].pieStatus.k;
|
||||||
// 对当前点击的扇形，执行高亮操作（对 option 更新）
|
// 对当前点击的扇形，执行高亮操作（对 option 更新）
|
||||||
|
|
@ -436,8 +443,7 @@ let handelColumnEcharts = () => {
|
||||||
k,
|
k,
|
||||||
option.series[params.seriesIndex].pieData.value + 5
|
option.series[params.seriesIndex].pieData.value + 5
|
||||||
);
|
);
|
||||||
option.series[params.seriesIndex].pieStatus.hovered =
|
option.series[params.seriesIndex].pieStatus.hovered = isHovered;
|
||||||
isHovered;
|
|
||||||
// 记录上次高亮的扇形对应的系列号 seriesIndex
|
// 记录上次高亮的扇形对应的系列号 seriesIndex
|
||||||
hoveredIndex = params.seriesIndex;
|
hoveredIndex = params.seriesIndex;
|
||||||
}
|
}
|
||||||
|
|
@ -462,8 +468,7 @@ let handelColumnEcharts = () => {
|
||||||
startRatio = option.series[hoveredIndex].pieData.startRatio;
|
startRatio = option.series[hoveredIndex].pieData.startRatio;
|
||||||
endRatio = option.series[hoveredIndex].pieData.endRatio;
|
endRatio = option.series[hoveredIndex].pieData.endRatio;
|
||||||
// 对当前点击的扇形，执行取消高亮操作（对 option 更新）
|
// 对当前点击的扇形，执行取消高亮操作（对 option 更新）
|
||||||
option.series[hoveredIndex].parametricEquation =
|
option.series[hoveredIndex].parametricEquation = getParametricEquation(
|
||||||
getParametricEquation(
|
|
||||||
startRatio,
|
startRatio,
|
||||||
endRatio,
|
endRatio,
|
||||||
isSelected,
|
isSelected,
|
||||||
|
|
@ -479,7 +484,7 @@ let handelColumnEcharts = () => {
|
||||||
myChart.setOption(option);
|
myChart.setOption(option);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
bindListen(myChart)
|
bindListen(myChart);
|
||||||
|
|
||||||
myChart.setOption(option);
|
myChart.setOption(option);
|
||||||
|
|
||||||
|
|
@ -487,7 +492,7 @@ let handelColumnEcharts = () => {
|
||||||
window.addEventListener("resize", function () {
|
window.addEventListener("resize", function () {
|
||||||
myChart.resize();
|
myChart.resize();
|
||||||
});
|
});
|
||||||
}
|
};
|
||||||
|
|
||||||
// 根据不同的屏幕宽度换算字体大小
|
// 根据不同的屏幕宽度换算字体大小
|
||||||
const transformFontSize = (fontsize: number) => {
|
const transformFontSize = (fontsize: number) => {
|
||||||
|
|
@ -495,7 +500,7 @@ const transformFontSize = (fontsize: number) => {
|
||||||
|
|
||||||
const width = window.screen.width;
|
const width = window.screen.width;
|
||||||
const height = window.screen.height;
|
const height = window.screen.height;
|
||||||
let ratio: any = 0
|
let ratio: any = 0;
|
||||||
if (height < 1920) {
|
if (height < 1920) {
|
||||||
ratio = width / 2220;
|
ratio = width / 2220;
|
||||||
} else {
|
} else {
|
||||||
|
|
@ -510,10 +515,16 @@ const transformFontSize = (fontsize: number) => {
|
||||||
.threeD-pie {
|
.threeD-pie {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
width: 200%;
|
||||||
|
height: 200%;
|
||||||
div {
|
div {
|
||||||
width: 100%;
|
width: 200%;
|
||||||
height: 100%;
|
height: 200%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
#myCanvas {
|
||||||
|
width: 450px;
|
||||||
|
height: 300px;
|
||||||
|
border: 1px solid red;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -49,10 +49,10 @@
|
||||||
<div class="total_load_3dEchart">
|
<div class="total_load_3dEchart">
|
||||||
<div class="title_load fs40">负荷户数比例</div>
|
<div class="title_load fs40">负荷户数比例</div>
|
||||||
<div class="echarts">
|
<div class="echarts">
|
||||||
<!-- <Threepie
|
<Threepie
|
||||||
v-if="show"
|
v-if="show"
|
||||||
:threeDPieData="leftData.threeDPieData"
|
:threeDPieData="leftData.threeDPieData"
|
||||||
></Threepie> -->
|
></Threepie>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -163,12 +163,12 @@
|
||||||
<p>可调负荷</p>
|
<p>可调负荷</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="total_load_3dEchart">
|
<div class="total_load_3dEchart">
|
||||||
<div class="title_load fs40">负荷户数比例</div>
|
<div class="title_load fs40">充电桩户数比例</div>
|
||||||
<div class="echarts">
|
<div class="echarts">
|
||||||
<!-- <Threepie
|
<Threepie
|
||||||
v-if="show"
|
v-if="show"
|
||||||
:threeDPieData="leftData.threeDPieData1"
|
:threeDPieData="leftData.threeDPieData1"
|
||||||
></Threepie> -->
|
></Threepie>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- <threeDPie :threeDPieData="leftData.threeDPieData"></threeDPie> -->
|
<!-- <threeDPie :threeDPieData="leftData.threeDPieData"></threeDPie> -->
|
||||||
|
|
@ -1073,12 +1073,12 @@ const getStatInfo = async () => {
|
||||||
// 资源总览
|
// 资源总览
|
||||||
// 荷
|
// 荷
|
||||||
interface leftDataInfo {
|
interface leftDataInfo {
|
||||||
businessValue: string,
|
businessValue: string;
|
||||||
residentValue: string,
|
residentValue: string;
|
||||||
tableData: tableInfo1[][]
|
tableData: tableInfo1[][];
|
||||||
tableData1: tableInfo1[][],
|
tableData1: tableInfo1[][];
|
||||||
threeDPieData: any
|
threeDPieData: any;
|
||||||
threeDPieData1:any
|
threeDPieData1: any;
|
||||||
}
|
}
|
||||||
interface tableInfo1 {
|
interface tableInfo1 {
|
||||||
index: string;
|
index: string;
|
||||||
|
|
@ -1089,113 +1089,106 @@ interface tableInfo1 {
|
||||||
}
|
}
|
||||||
let show = ref(true);
|
let show = ref(true);
|
||||||
let leftData = reactive<leftDataInfo>({
|
let leftData = reactive<leftDataInfo>({
|
||||||
businessValue: '0',
|
businessValue: "0",
|
||||||
residentValue: '0',
|
residentValue: "0",
|
||||||
tableData: [],
|
tableData: [],
|
||||||
tableData1: [],
|
tableData1: [],
|
||||||
// 3d饼图数据
|
// 3d饼图数据
|
||||||
threeDPieData: {
|
threeDPieData: {
|
||||||
pieData: [
|
pieData: [
|
||||||
{
|
{
|
||||||
name: "谷段", //名称
|
name: "35kV", //名称
|
||||||
value: 10, //值
|
value: 3, //值
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
color: "#EE5944",//半透明
|
color: "#EE5944", //半透明 232 158 205
|
||||||
|
// color: "rgba(250,189,101,.8)",//半透明 232 158 205
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "高峰",
|
name: "10kV",
|
||||||
value: 20,
|
value: 5,
|
||||||
itemStyle: {
|
|
||||||
color: "#2E53F5",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "尖峰",
|
|
||||||
value: 40,
|
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
|
// color: "#2E53F5",
|
||||||
color: "#F1BA50",
|
color: "#F1BA50",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "平段",
|
name: "0.4kV",
|
||||||
value: 40,
|
value: 393,
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
color: "#6FFBF7",
|
// color: "#F1BA50",
|
||||||
|
color: "#2E53F5",
|
||||||
|
},
|
||||||
},
|
},
|
||||||
}
|
|
||||||
],
|
],
|
||||||
total: 108,
|
total: 108,
|
||||||
center: 0.9, // 是否圆环
|
center: 0.85, // 是否圆环
|
||||||
legend: {
|
legend: {
|
||||||
show:false,
|
// show:false,
|
||||||
orient: 'horizontal',
|
orient: "horizontal",
|
||||||
left: 'center',
|
show: false,
|
||||||
top: '-3%',
|
left: "center",
|
||||||
itemGap: 20
|
top: "10%",
|
||||||
|
itemGap: 1990,
|
||||||
},
|
},
|
||||||
grid3D: {
|
grid3D: {
|
||||||
viewControl: {
|
viewControl: {
|
||||||
distance: 350, // 缩放视角
|
distance: 250, // 缩放视角
|
||||||
alpha: 45, // 角度
|
alpha: 45, // 角度
|
||||||
}
|
|
||||||
},
|
},
|
||||||
// radius: ["40%", "40%"],
|
},
|
||||||
// center: ["50%", "50%"],
|
getHeight3D: 20, // 高度
|
||||||
getHeight3D: 40, // 高度
|
|
||||||
},
|
},
|
||||||
// 3d饼图数据1
|
// 3d饼图数据1
|
||||||
threeDPieData1: {
|
threeDPieData1: {
|
||||||
pieData: [
|
pieData: [
|
||||||
{
|
{
|
||||||
name: "谷段", //名称
|
name: "居民充电桩", //名称
|
||||||
value: 10, //值
|
value: 10, //值
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
color: "#EE5944",//半透明
|
color: "#EE5944", //半透明 232 158 205
|
||||||
|
// color: "rgba(250,189,101,.8)",//半透明 232 158 205
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "高峰",
|
name: "商业充电桩",
|
||||||
value: 20,
|
value: 20,
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
color: "#2E53F5",
|
color: "#2E53F5",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "尖峰",
|
name: "V2G充电桩",
|
||||||
value: 40,
|
value: 40,
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
color: "#F1BA50",
|
color: "#F1BA50",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
|
||||||
name: "平段",
|
|
||||||
value: 40,
|
|
||||||
itemStyle: {
|
|
||||||
color: "#6FFBF7",
|
|
||||||
},
|
|
||||||
}
|
|
||||||
],
|
],
|
||||||
total: 108,
|
total: 108,
|
||||||
center: 0.9, // 是否圆环
|
center: 0.85, // 是否圆环
|
||||||
legend: {
|
legend: {
|
||||||
|
// show:false,
|
||||||
|
show: false, //工具栏不展示
|
||||||
|
tooltip: {
|
||||||
|
show: true,
|
||||||
|
},
|
||||||
|
orient: "horizontal",
|
||||||
|
|
||||||
orient: 'horizontal',
|
left: "center",
|
||||||
left: 'center',
|
|
||||||
top: '-30%',
|
top: "2%",
|
||||||
itemGap: 20
|
itemGap: 1990,
|
||||||
},
|
},
|
||||||
grid3D: {
|
grid3D: {
|
||||||
viewControl: {
|
viewControl: {
|
||||||
distance: 350, // 缩放视角
|
distance: 250, // 缩放视角
|
||||||
alpha: 45, // 角度
|
alpha: 35, // 角度
|
||||||
}
|
|
||||||
},
|
},
|
||||||
// radius: ["40%", "40%"],
|
},
|
||||||
// center: ["50%", "50%"],
|
getHeight3D: 30, // 高度
|
||||||
getHeight3D: 40, // 高度
|
},
|
||||||
}
|
});
|
||||||
})
|
|
||||||
// 网
|
// 网
|
||||||
// 网盒子得标识
|
// 网盒子得标识
|
||||||
let networkContentFlag = ref(true);
|
let networkContentFlag = ref(true);
|
||||||
|
|
@ -1870,6 +1863,12 @@ const styleVar = computed(() => {
|
||||||
top: changeHeight(-20);
|
top: changeHeight(-20);
|
||||||
width: changeWidth(506.97);
|
width: changeWidth(506.97);
|
||||||
height: changeHeight(325.41);
|
height: changeHeight(325.41);
|
||||||
|
left: changeHeight(-200);
|
||||||
|
top: changeHeight(-120);
|
||||||
|
width: changeWidth(506.97);
|
||||||
|
height: changeHeight(325.41);
|
||||||
|
width: changeWidth(1006.97);
|
||||||
|
height: changeHeight(625.41);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -1995,10 +1994,12 @@ const styleVar = computed(() => {
|
||||||
}
|
}
|
||||||
.echarts {
|
.echarts {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: changeHeight(-100);
|
left: changeHeight(-220);
|
||||||
top: changeHeight(-20);
|
top: changeHeight(-120);
|
||||||
width: changeWidth(506.97);
|
width: changeWidth(506.97);
|
||||||
height: changeHeight(325.41);
|
height: changeHeight(325.41);
|
||||||
|
width: changeWidth(1006.97);
|
||||||
|
height: changeHeight(625.41);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue