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