zy_oyj/sgxt_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新样式

Browse Source
This commit is contained in:
Esacpe
2025-05-22 22:38:54 +08:00
parent 34a2984a00
commit b31bdfec29
2 changed files with 192 additions and 562 deletions
Download Patch File Download Diff File Expand all files Collapse all files

374
src/views/backOfficeSystem/IntelligentControl/warningControl/components/WarningCount.vue
View File

@ -1,283 +1,151 @@
<template>
<div ref="echart" class="echartDiv"></div>
</template>
<script setup>
import { choseRbgb } from '@/utils/tools'
import * as echarts from "echarts";
import "echarts-gl";
import { fa } from "element-plus/es/locale.mjs";
import { onMounted, toRefs, ref, reactive } from "vue";
let vehicleChart = null
const echart = ref()
// 传入数据生成 option
const optionsData = [
{
name: "待办",
value: 2056,
itemStyle: {
echarts:'rgba(44,44,44,0.8)'
}
},
{
name: "已办",
value: 4356,
itemStyle: {
color: "#00EDFE"
}
},
{
name: "未处理",
value: 3018,
itemStyle: {
color: "#FEDB4B"
}
},
{
name: "忽略",
value: 1998,
itemStyle: {
color: "#FE7C2F"
}
}
];
//挂载
onMounted(() => {
echartInit();
initCharts()
window.addEventListener('resize', handleResize)
});
const echartInit = () => {
var myChart = echarts.init(echart.value);
const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
series.push({
name: "pie2d",
type: "pie",
label: {
show: false,
opacity: 1,
fontSize: 14,
lineHeight: 20,
textStyle: {
fontSize: 14,
color: "#fff"
}
const initCharts = () => {
vehicleChart = echarts.init(echart.value)
const colors = ['#00f0ff', '#0066ff', '#ff9900', '#00cc66']
const countData = [
{
value: 2056,
name: '待办',
colorType: 'blue',
color: ['#00f0ff', '#00a0cc'],
color1: [choseRbgb('#00f0ff', 0.3), choseRbgb('#00a0cc', 0.3)]
},
labelLine: {
show: false,
length: 20,
length2: 25
{
value: 4356,
name: '已办',
colorType: 'lightBlue',
color: ['#0066ff', '#0044cc'],
color1: [choseRbgb('#0066ff', 0.3), choseRbgb('#0044cc', 0.3)]
},
startAngle: -30, //起始角度，支持范围[0, 360]。
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
// radius: ["40%", "60%"],
center: ["40%", "50%"],
data: optionsData,
itemStyle: {
opacity: 0
{
value: 3018,
name: '未处理',
colorType: 'orange',
color: ['#ff9900', '#cc7a00'],
color1: [choseRbgb('#ff9900', 0.3), choseRbgb('#cc7a00', 0.3)]
},
{
value: 1998,
name: '忽略',
colorType: 'green',
color: ['#00cc66', '#009944'],
color1: [choseRbgb('#00cc66', 0.3), choseRbgb('#009944', 0.3)]
}
});
// 准备待返回的配置项，把准备好的 legendData、series 传入。
let option = {
legend: {
show: true,
tooltip: {
show: true
},
orient: "vertical",
data: ["待办", "已办", "未处理", "忽略"],
top: "center",
itemGap: 14,
itemHeight: 8,
itemWidth: 17,
right: "20%",
textStyle: {
color: "#fff",
fontSize: 12
}
},
animation: true,
]
vehicleChart.setOption(createChartOption(countData, colors))
}
const createChartOption = (data, colors) => {
let total = data.reduce((sum, item) => sum + item.value, 0)
return {
tooltip: {
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 + "人"}`;
trigger: 'item'
},
legend: {
orient: 'vertical',
left: '60%',
top: 'center',
textStyle: {
color: '#fff',
rich: {
value: {
color: '#fff'
},
percentage: {
padding: [0, 0, 0, 10]
},
blue: {
color: colors[0]
},
lightBlue: {
color: colors[1]
},
orange: {
color: colors[2]
},
green: {
color: colors[3]
}
}
},
textStyle: {
fontSize: 14
formatter: (name) => {
const item = data.find(d => d.name === name);
let percentage = ((item.value / total) * 100).toFixed(2);
return `${name} ${item.value} {${item.colorType}|(${percentage}%)}`
}
},
title: {
x: "center",
top: "20",
textStyle: {
color: "#fff",
fontSize: 22
}
},
backgroundColor: "rgba(0, 29, 75, 0.65)",
labelLine: {
show: true,
lineStyle: {
color: "#7BC0CB"
series: [
{
type: 'pie',
radius: ['55%', '70%'],
center: ['28%', '50%'],
data: data.map(item => ({
...item,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: item.color[0] },
{ offset: 1, color: item.color[1] }
])
}
})),
label: {
show: false
},
emphasis: {
scale: false,
focus: 'none'
},
z: 2
},
normal: {
show: false,
length: 20,
length2:20
{
type: 'pie',
radius: ['65%', '85%'],
center: ['28%', '50%'],
data: data.map(item => ({
...item,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: item.color1[0] },
{ offset: 1, color: item.color1[1] }
])
}
})),
label: {
show: false
},
emphasis: {
scale: false,
focus: 'none'
},
z: 1,
silent: true
}
},
label: {
show: true,
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,
bottom: "50%",
left:'-18%',
// environment: "rgba(255,255,255,0)",// 环境颜色
viewControl: {
distance: 130, //圆环的大小 ,值越大换越小
alpha: 30, //倾斜的角度
beta: 0,//旋转的角度
autoRotate: false // 取消自动旋转
}
},
series: series
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
};
function getParametricEquation(startRatio,endRatio,isSelected,isHovered,k,height) {
// 计算
let midRatio = (startRatio + endRatio) / 2;
let startRadian = startRatio * Math.PI * 2;
let endRadian = endRatio * Math.PI * 2;
let midRadian = midRatio * Math.PI * 2;
// 如果只有一个扇形，则不实现选中效果。
if (startRatio === 0 && endRatio === 1) {
isSelected = false;
]
}
// 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
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;
// 计算高亮效果的放大比例（未高亮，则比例为 1）
let hoverRate = isHovered ? 1.05 : 1;
// 返回曲面参数方程
return {
u: {
min: -Math.PI,
max: Math.PI * 3,
step: Math.PI / 32
},
v: {
min: 0,
max: Math.PI * 2,
step: Math.PI / 20
},
x: function (u, v) {
if (u < startRadian) {
return (offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate);
}
if (u > endRadian) {
return (offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate);
}
return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
},
y: function (u, v) {
if (u < startRadian) {
return (offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate);
}
if (u > endRadian) {
return (offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate);
}
return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
},
z: function (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(v) > 0 ? 1 * height : -1;
}
};
}
// 生成模拟 3D 饼图的配置项
function getPie3D(pieData, internalDiameterRatio) {
let series = [];
let sumValue = 0;
let startValue = 0;
let endValue = 0;
let legendData = [];
let k = typeof internalDiameterRatio !== "undefined" ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio): 1 / 3;
// 为每一个饼图数据，生成一个 series-surface 配置
for (let i = 0; i < pieData.length; i++) {
sumValue += pieData[i].value;
let seriesItem = {
name:typeof pieData[i].name === "undefined" ? `series${i}` : pieData[i].name,
type: "surface",
parametric: true,
wireframe: { show: false },
pieData: pieData[i],
pieStatus: {
selected: false,
hovered: false,
k: k
},
};
if (typeof pieData[i].itemStyle != "undefined") {
let itemStyle = {};
typeof pieData[i].itemStyle.color != "undefined" ? (itemStyle.color = pieData[i].itemStyle.color) : null;
typeof pieData[i].itemStyle.opacity != "undefined" ? (itemStyle.opacity = pieData[i].itemStyle.opacity) : null;
seriesItem.itemStyle = itemStyle;
}
series.push(seriesItem);
}
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
for (let i = 0; i < series.length; i++) {
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(series[i].pieData.startRatio,series[i].pieData.endRatio,false,false,k,series[i].pieData.value);
startValue = endValue;
legendData.push(series[i].name);
}
return series;
const handleResize = () => {
vehicleChart?.resize()
}
</script>
<style lang='scss' scoped>
.echartDiv {
width: 100%;