xiangshan
/
ggfwjsc
22
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'main' of https://git.cityme.com.cn/xiangshan/ggfwjsc

This commit is contained in:
姚宇浩 2024-09-30 15:07:56 +08:00
parent 0a9c47d69e 48f884f678
commit 3fae04a517
20 changed files with 2035 additions and 1166 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/main.js
View File

@ -9,16 +9,9 @@ import "./assets/css/common.css";
import zhCn from "element-plus/dist/locale/zh-cn.mjs";
// 引入 vConsole
import VConsole from "vconsole";
// import VConsole from "vconsole";
// 初始化 vConsole
const vConsole = new VConsole();
// const vConsole = new VConsole({
// defaultPlugins: {
// // 是否默认开启 console 插件
// 'console': true,
// // 其他插件配置...
// }
// });
// const vConsole = new VConsole();
createApp(App)
.use(router)

31
src/router/index.js
View File

@ -17,27 +17,44 @@ const router = createRouter({
component: () => import("../view/guide.vue"),
},
{
name: "无权限",
path: "/error/noPermission",
component: () => import("../view/error/noPermission.vue"),
name: "401",
path: "/error/401",
component: () => import("../view/error/401.vue"),
},
{
name: "403",
path: "/error/403",
component: () => import("../view/error/403.vue"),
// meta: { page_id: 6, page_name: "403" },
},
{
name: "404",
path: "/error/404",
component: () => import("../view/error/404.vue"),
// meta: { page_id: 7, page_name: "404" },
},
{
name: "500",
path: "/error/500",
component: () => import("../view/error/500.vue"),
// meta: { page_id: 8, page_name: "500" },
},
{
name: "无网络",
path: "/error/noNetwork",
component: () => import("../view/error/noNetwork.vue"),
},
{
name: "建设中",
path: "/error/emptyPage",
component: () => import("../view/error/emptyPage.vue"),
},
{
name: "查询为空",
path: "/error/noResults",
component: () => import("../view/error/noResults.vue"),
},
{
name: "通用空页面",
path: "/error/noConstruction",
component: () => import("../view/error/noConstruction.vue"),
},
{
path: "/home",
@ -100,10 +117,10 @@ const router = createRouter({
// },
],
},
],
});
router.beforeEach((to, form, next) => {
// var token = getCookie('lytoken')
// // console.log('token', token)

7
src/utils/request.js
View File

@ -30,7 +30,6 @@ axios.interceptors.response.use(
if (error.response) {
if (error.response.status == 401) {
ElMessage.error("请重新登录!");
const cookies = document.cookie.split(";");
for (let i = 0; i < cookies.length; i++) {
const cookie = cookies[i];
@ -44,12 +43,12 @@ axios.interceptors.response.use(
} else if (error.response.status == 403) {
ElMessage.error("Status:403，资源不可用！");
router.replace({
path: "/403",
path: "/error/403",
});
} else if (error.response.status == 404) {
ElMessage.error("Status:404，正在请求不存在的服务器记录！");
router.replace({
path: "/404",
path: "/error/404",
});
} else if (error.response.status == 500) {
ElMessage.error({
@ -57,7 +56,7 @@ axios.interceptors.response.use(
message: "Status:500，服务器发生错误！",
});
router.replace({
path: "/500",
path: "/error/500",
});
} else {
ElMessage.error(`Status:${error.response.status}，未知错误！`);

728
src/view/echart_analyze/pie3dMt1.vue
View File

@ -1,19 +1,11 @@
<template>
<div ref="chart" style="width: 50%; height: 230px"></div>
<div ref="chart" style="width: 50%; height: 210px"></div>
</template>
<script setup>
import {
onMounted,
onBeforeMount,
ref,
reactive,
defineProps,
nextTick,
} from "vue";
import { onBeforeMount, onMounted, reactive, ref } from "vue";
// 局部引入echarts核心模块
import * as echarts from "echarts";
import "echarts-gl";
const props = defineProps({
list: {
@ -22,556 +14,234 @@ const props = defineProps({
return [];
},
},
month: {
type: Array,
default: () => [],
},
});
const chart = ref(); // 创建DOM引用
const data = reactive({
list: [],
// pieData: [
// {
// name: "61-70岁", //名称
// value: "", //值
// },
// {
// name: "71-80岁",
// value: "",
// },
// {
// name: "81-90岁",
// value: "",
// },
// {
// name: "91-100岁",
// value: "",
// },
// {
// name: "100岁以上",
// value: "",
// },
// ],
month: [],
option: {},
});
const colorList = [
"#FFE35F",
"#0081FF",
"#8ABEDB",
"#25B9C8",
"#30EB92",
"rgba(69, 244, 245)",
"rgba(7, 166, 255)",
"rgba(255, 208, 118)",
"rgba(109, 168, 198)",
"rgba(255, 255, 255)",
];
const pieData = reactive([
let data1 = [
{
name: "高血压", //名称
value: 0, //值
name: "高血压",
value: 40,
},
{
name: "非高血压",
value: 0,
value: 30,
},
]);
];
// const serData = pieData.map((dItem, index) => {
// return {
// ...dItem,
// value: Number(dItem.value),
// itemStyle: {
// color: colorList[index],
// },
// };
// });
// console.log(22, data1);
//设置图表配置项
// const option = getPie3D(serData, 0.8);
let value = data1.map((item) => item.value);
let sum = value.reduce((a, b) => {
return a + b;
}); //排序升序执行
let color = ["#ECE09E ", "#78f6f8"];
let series = [];
let yAxis = [];
for (let i = 0; i < data1.length; i++) {
series.push({
name: "",
type: "pie",
clockWise: false, //顺时加载
hoverAnimation: true, //鼠标移入变大
radius: [50 - i * 14 + "%", 65 - i * 18 + "%"],
center: ["40%", "50%"],
label: {
show: false,
},
itemStyle: {
borderWidth: 30, //圆柱图宽度
borderRadius: 30, //光环宽度
borderColor: "rgba(0, 0,0, 0)",
borderDashOffset: 20,
},
data: [
{
value: data1[i].value,
name: data1[i].name,
},
{
value: sum - data1[i].value,
name: "",
itemStyle: {
color: "transparent",
},
hoverAnimation: false,
},
],
});
series.push({
name: "",
type: "pie",
silent: true,
z: 1,
clockWise: false, //顺时加载
hoverAnimation: true, //鼠标移入变大
radius: [50 - i * 14 + "%", 65 - i * 18 + "%"],
center: ["40%", "50%"],
label: {
show: false,
},
itemStyle: {
borderWidth: 30, //圆柱图宽度
borderRadius: 30, //光环宽度
borderColor: "rgba(0, 0,0, 0)",
borderDashOffset: 20,
},
data: [
{
value: 7.5,
itemStyle: {
color: "#eee",
},
hoverAnimation: false,
},
{
value: 2.5,
itemStyle: {
color: "rgba(0,0,0,0)",
},
hoverAnimation: false,
},
],
});
}
// yAxis.push("高血压" + data1[0].value);
// yAxis.push("非高血压" + data1[1].value);
const getOption = () => {
const serData = pieData.map((dItem, index) => {
return {
...dItem,
value: Number(dItem.value),
itemStyle: {
color: colorList[index],
data.option = {
color: color,
grid: {
top: "14%",
left: "40%",
width: "40%",
height: "21%",
containLabel: false,
},
yAxis: [
{
type: "category",
inverse: true,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
interval: 0,
inside: true,
textStyle: {
color: "#fff",
fontSize: 14,
},
show: true,
},
data: yAxis,
},
};
});
data.option = getPie3D(serData, 0.8);
};
// 生成模拟 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: {
],
xAxis: [
{
show: false,
},
pieData: pieData[i],
pieStatus: {
selected: false,
hovered: false,
k: 1 / 10,
},
};
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;
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);
}
// // 补充一个透明的圆环，用于支撑高亮功能的近似实现。
// series.push({
// name: 'mouseoutSeries',
// type: 'surface',
// parametric: true,
// wireframe: {
// show: false,
// },
// width: '30px',
// itemStyle: {
// opacity: 0.7,
// color: '#fff',
// },
// parametricEquation: {
// u: {
// min: 0,
// max: Math.PI * 2,
// step: Math.PI / 20,
// },
// v: {
// min: 0,
// max: Math.PI ,
// step: Math.PI / 20,
// },
// x: function (u, v) {
// return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI);
// },
// y: function (u, v) {
// return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) ;
// },
// z: function (u, v) {
// return Math.cos(v) > 0 ? -6 : -7;
// },
// },
// });
// 准备待返回的配置项，把准备好的 legendData、series 传入。
let option = {
//animation: false,
//图例组件
legend: {
data: legendData,
color: [
"#8FD7FC",
"#466BE7",
"#F4BB29",
"#49C384",
"#8FD7FC",
"#466BE7",
"#F4BB29",
"#49C384",
],
width: "40%",
//图例列表的布局朝向。
orient: "vertical",
right: 1,
top: "center",
//图例文字每项之间的间隔
itemGap: 10,
show: false,
icon: "rect",
itemHeight: 10,
itemWidth: 25,
textStyle: {
//图例字体大小
fontSize: 16,
color: "#FFFFFF",
lineHeight: 20,
},
//格式化图例文本
formatter: function (name) {
var target;
for (var i = 0, l = pieData.length; i < l; i++) {
if (pieData[i].name == name) {
target = pieData[i].value;
}
}
if (name == "91-100岁") {
return ` ${name} ${target} 人`;
} else if (name == "100岁以上") {
return ` ${name} ${target} 人`;
} else {
return ` ${name} ${target} 人`;
}
},
},
//移动上去提示的文本内容
tooltip: {
backgroundColor: "rgba(18, 55, 85, 0.8);",
borderColor: "transparent",
formatter: (params) => {
if (
params.seriesName !== "mouseoutSeries" &&
params.seriesName !== "pie2d"
) {
let bfb = (
(option.series[params.seriesIndex].pieData.endRatio -
option.series[params.seriesIndex].pieData.startRatio) *
100
).toFixed(2);
const value = option.series[params.seriesIndex].pieData.value;
return (
`<div style='color:#FFFFFF;'>` +
`<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
`${params.seriesName}<br/>` +
`<span style='margin-right:20px'>${value}人</span>` +
`<span >${bfb}%</span>` +
`</div>`
);
}
},
},
label: {
show: true,
// position: "outside",
// padding: [30, -180],
formatter: function (pieData) {
console.log("optionsData", pieData);
return (
"{name|" +
pieData.name +
"}" +
"{vlaueA|" +
pieData.value +
"亿元" +
"}"
);
},
},
xAxis3D: {},
yAxis3D: {},
zAxis3D: {},
grid3D: {
viewControl: {
autoRotate: true,
rotateSensitivity: 0, //设置为0无法旋转
zoomSensitivity: 0, //设置为0无法缩放
panSensitivity: 0, //设置为0无法平移
alpha: 25, //角度(这个很重要 调节角度的)
distance: 100, //调整视角到主体的距离，类似调整zoom(这是整体大小)
},
top: "-30",
left: "0",
width: "100%",
show: false,
boxHeight: 20,
},
],
series: series,
// [
// {
// name: "",
// type: "pie",
// clockWise: false, //顺时加载
// hoverAnimation: true, //鼠标移入变大
// radius: [50 - i * 14 + "%", 65 - i * 18 + "%"],
// center: ["40%", "50%"],
// label: {
// show: false,
// },
// itemStyle: {
// borderWidth: 30, //圆柱图宽度
// borderRadius: 30, //光环宽度
// borderColor: "rgba(0, 0,0, 0)",
// borderDashOffset: 20,
// },
// data: [
// {
// value: data1[i].value,
// name: data1[i].name,
// },
// {
// value: sum - data1[i].value,
// name: "",
// itemStyle: {
// color: "transparent",
// },
// hoverAnimation: false,
// },
// ],
// },
// {
// name: "",
// type: "pie",
// silent: true,
// z: 1,
// clockWise: false, //顺时加载
// hoverAnimation: true, //鼠标移入变大
// radius: [50 - i * 14 + "%", 65 - i * 18 + "%"],
// center: ["40%", "50%"],
// label: {
// show: false,
// },
// itemStyle: {
// borderWidth: 30, //圆柱图宽度
// borderRadius: 30, //光环宽度
// borderColor: "rgba(0, 0,0, 0)",
// borderDashOffset: 20,
// },
// data: [
// {
// value: 7.5,
// itemStyle: {
// color: "#eee",
// },
// hoverAnimation: false,
// },
// {
// value: 2.5,
// itemStyle: {
// color: "rgba(0,0,0,0)",
// },
// hoverAnimation: false,
// },
// ],
// },
// ],
};
return option;
}
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
function getParametricEquation(
startRatio,
endRatio,
isSelected,
isHovered,
k,
h
) {
// 计算
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) * h * 0.1;
}
return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
},
};
}
// 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
function bindListen(myChart) {
let selectedIndex = "";
let hoveredIndex = "";
// 监听点击事件，实现选中效果（单选）
myChart.on("click", function (params) {
// 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
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 endRatio = option.series[params.seriesIndex].pieData.endRatio;
// 如果之前选中过其他扇形，将其取消选中（对 option 更新）
if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
option.series[selectedIndex].parametricEquation = getParametricEquation(
option.series[selectedIndex].pieData.startRatio,
option.series[selectedIndex].pieData.endRatio,
false,
false,
k,
option.series[selectedIndex].pieData.value
);
option.series[selectedIndex].pieStatus.selected = false;
}
// 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
option.series[params.seriesIndex].parametricEquation =
getParametricEquation(
startRatio,
endRatio,
isSelected,
isHovered,
k,
option.series[params.seriesIndex].pieData.value
);
option.series[params.seriesIndex].pieStatus.selected = isSelected;
// 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
isSelected ? (selectedIndex = params.seriesIndex) : null;
// 使用更新后的 option，渲染图表
myChart.setOption(option);
});
// 监听 mouseover，近似实现高亮（放大）效果
myChart.on("mouseover", function (params) {
// 准备重新渲染扇形所需的参数
let isSelected;
let isHovered;
let startRatio;
let endRatio;
let k;
// 如果触发 mouseover 的扇形当前已高亮，则不做操作
if (hoveredIndex === params.seriesIndex) {
return;
// 否则进行高亮及必要的取消高亮操作
} else {
// 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
if (hoveredIndex !== "") {
// 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
isSelected = option.series[hoveredIndex].pieStatus.selected;
isHovered = false;
startRatio = option.series[hoveredIndex].pieData.startRatio;
endRatio = option.series[hoveredIndex].pieData.endRatio;
k = option.series[hoveredIndex].pieStatus.k;
// 对当前点击的扇形，执行取消高亮操作（对 option 更新）
option.series[hoveredIndex].parametricEquation = getParametricEquation(
startRatio,
endRatio,
isSelected,
isHovered,
k,
option.series[hoveredIndex].pieData.value
);
option.series[hoveredIndex].pieStatus.hovered = isHovered;
// 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
hoveredIndex = "";
}
// 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
if (
params.seriesName !== "mouseoutSeries" &&
params.seriesName !== "pie2d"
) {
// 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
isSelected = option.series[params.seriesIndex].pieStatus.selected;
isHovered = true;
startRatio = option.series[params.seriesIndex].pieData.startRatio;
endRatio = option.series[params.seriesIndex].pieData.endRatio;
k = option.series[params.seriesIndex].pieStatus.k;
// 对当前点击的扇形，执行高亮操作（对 option 更新）
option.series[params.seriesIndex].parametricEquation =
getParametricEquation(
startRatio,
endRatio,
isSelected,
isHovered,
k,
option.series[params.seriesIndex].pieData.value + 5
);
option.series[params.seriesIndex].pieStatus.hovered = isHovered;
// 记录上次高亮的扇形对应的系列号 seriesIndex
hoveredIndex = params.seriesIndex;
}
// 使用更新后的 option，渲染图表
myChart.setOption(option);
}
});
// 修正取消高亮失败的 bug
myChart.on("globalout", function () {
// 准备重新渲染扇形所需的参数
let isSelected;
let isHovered;
let startRatio;
let endRatio;
let k;
if (hoveredIndex !== "") {
// 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
isSelected = option.series[hoveredIndex].pieStatus.selected;
isHovered = false;
k = option.series[hoveredIndex].pieStatus.k;
startRatio = option.series[hoveredIndex].pieData.startRatio;
endRatio = option.series[hoveredIndex].pieData.endRatio;
// 对当前点击的扇形，执行取消高亮操作（对 option 更新）
option.series[hoveredIndex].parametricEquation = getParametricEquation(
startRatio,
endRatio,
isSelected,
isHovered,
k,
option.series[hoveredIndex].pieData.value
);
option.series[hoveredIndex].pieStatus.hovered = isHovered;
// 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
hoveredIndex = "";
}
// 使用更新后的 option，渲染图表
myChart.setOption(option);
});
}
// 使用生命钩子
// onMounted(() => {
// // 基于准备好的dom，初始化echarts实例
// // var myChart = echarts.init(document.getElementById('main'));
// // Vue3中： 需要引入
// var myChart = echarts.init(chart.value);
// //设置交互事件 鼠标移入 点击
// // bindListen(myChart)
// // init(); // vue3.2没有this
// // 使用刚指定的配置项和数据显示图表。
// myChart.setOption(option);
// // 单图表响应式: 跟随浏览器大小改变
// window.addEventListener("resize", () => {
// myChart.resize();
// });
// });
};
const setChart = () => {
var myChart = echarts.init(chart.value);
myChart.setOption(data.option);
// 单图表响应式: 跟随浏览器大小改变
window.addEventListener("resize", () => {
myChart.resize();
});
};
// 使用生命钩子
onBeforeMount(() => {
setTimeout(() => {
data.list = props.list;
// data.list = {
// gxy: "1500",
// notGxy: "1610",
// };
pieData[0].value = data.list.fgxy.rs;
pieData[1].value = data.list.gxy.rs;
data.month = props.month;
data1[0].value = Number(data.list.gxy.rs);
data1[1].value = Number(data.list.fgxy.rs);
yAxis.push("高血压" + data.list.gxy.rs);
yAxis.push("非高血压" + data.list.fgxy.rs);
getOption();
setChart();

582
src/view/echart_analyze/pie5yl.vue Normal file
View File

@ -0,0 +1,582 @@
<template>
<div ref="chart" style="width: 50%; height: 230px"></div>
</template>
<script setup>
import {
onMounted,
onBeforeMount,
ref,
reactive,
defineProps,
nextTick,
} from "vue";
// 局部引入echarts核心模块
import * as echarts from "echarts";
import "echarts-gl";
const props = defineProps({
list: {
type: Array,
default: () => {
return [];
},
},
});
const chart = ref(); // 创建DOM引用
const data = reactive({
list: [],
// pieData: [
// {
// name: "61-70岁", //名称
// value: "", //值
// },
// {
// name: "71-80岁",
// value: "",
// },
// {
// name: "81-90岁",
// value: "",
// },
// {
// name: "91-100岁",
// value: "",
// },
// {
// name: "100岁以上",
// value: "",
// },
// ],
option: {},
});
const colorList = [
"#FFE35F",
"#0081FF",
"#8ABEDB",
"#25B9C8",
"#30EB92",
"rgba(69, 244, 245)",
"rgba(7, 166, 255)",
"rgba(255, 208, 118)",
"rgba(109, 168, 198)",
"rgba(255, 255, 255)",
];
const pieData = reactive([
{
name: "高血压", //名称
value: 0, //值
},
{
name: "非高血压",
value: 0,
},
]);
// const serData = pieData.map((dItem, index) => {
// return {
// ...dItem,
// value: Number(dItem.value),
// itemStyle: {
// color: colorList[index],
// },
// };
// });
//设置图表配置项
// const option = getPie3D(serData, 0.8);
const getOption = () => {
const serData = pieData.map((dItem, index) => {
return {
...dItem,
value: Number(dItem.value),
itemStyle: {
color: colorList[index],
},
};
});
data.option = getPie3D(serData, 0.8);
};
// 生成模拟 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: 1 / 10,
},
};
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;
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);
}
// // 补充一个透明的圆环，用于支撑高亮功能的近似实现。
// series.push({
// name: 'mouseoutSeries',
// type: 'surface',
// parametric: true,
// wireframe: {
// show: false,
// },
// width: '30px',
// itemStyle: {
// opacity: 0.7,
// color: '#fff',
// },
// parametricEquation: {
// u: {
// min: 0,
// max: Math.PI * 2,
// step: Math.PI / 20,
// },
// v: {
// min: 0,
// max: Math.PI ,
// step: Math.PI / 20,
// },
// x: function (u, v) {
// return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI);
// },
// y: function (u, v) {
// return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) ;
// },
// z: function (u, v) {
// return Math.cos(v) > 0 ? -6 : -7;
// },
// },
// });
// 准备待返回的配置项，把准备好的 legendData、series 传入。
let option = {
//animation: false,
//图例组件
legend: {
data: legendData,
color: [
"#8FD7FC",
"#466BE7",
"#F4BB29",
"#49C384",
"#8FD7FC",
"#466BE7",
"#F4BB29",
"#49C384",
],
width: "40%",
//图例列表的布局朝向。
orient: "vertical",
right: 1,
top: "center",
//图例文字每项之间的间隔
itemGap: 10,
show: false,
icon: "rect",
itemHeight: 10,
itemWidth: 25,
textStyle: {
//图例字体大小
fontSize: 16,
color: "#FFFFFF",
lineHeight: 20,
},
//格式化图例文本
formatter: function (name) {
var target;
for (var i = 0, l = pieData.length; i < l; i++) {
if (pieData[i].name == name) {
target = pieData[i].value;
}
}
if (name == "91-100岁") {
return ` ${name} ${target} 人`;
} else if (name == "100岁以上") {
return ` ${name} ${target} 人`;
} else {
return ` ${name} ${target} 人`;
}
},
},
//移动上去提示的文本内容
tooltip: {
backgroundColor: "rgba(18, 55, 85, 0.8);",
borderColor: "transparent",
formatter: (params) => {
if (
params.seriesName !== "mouseoutSeries" &&
params.seriesName !== "pie2d"
) {
let bfb = (
(option.series[params.seriesIndex].pieData.endRatio -
option.series[params.seriesIndex].pieData.startRatio) *
100
).toFixed(2);
const value = option.series[params.seriesIndex].pieData.value;
return (
`<div style='color:#FFFFFF;'>` +
`<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
`${params.seriesName}<br/>` +
`<span style='margin-right:20px'>${value}人</span>` +
`<span >${bfb}%</span>` +
`</div>`
);
}
},
},
label: {
show: true,
// position: "outside",
// padding: [30, -180],
formatter: function (pieData) {
console.log("optionsData", pieData);
return (
"{name|" +
pieData.name +
"}" +
"{vlaueA|" +
pieData.value +
"亿元" +
"}"
);
},
},
xAxis3D: {},
yAxis3D: {},
zAxis3D: {},
grid3D: {
viewControl: {
autoRotate: true,
rotateSensitivity: 0, //设置为0无法旋转
zoomSensitivity: 0, //设置为0无法缩放
panSensitivity: 0, //设置为0无法平移
alpha: 25, //角度(这个很重要 调节角度的)
distance: 100, //调整视角到主体的距离，类似调整zoom(这是整体大小)
},
top: "-30",
left: "0",
width: "100%",
show: false,
boxHeight: 20,
},
series: series,
};
return option;
}
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
function getParametricEquation(
startRatio,
endRatio,
isSelected,
isHovered,
k,
h
) {
// 计算
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) * h * 0.1;
}
return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
},
};
}
// 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
function bindListen(myChart) {
let selectedIndex = "";
let hoveredIndex = "";
// 监听点击事件，实现选中效果（单选）
myChart.on("click", function (params) {
// 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
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 endRatio = option.series[params.seriesIndex].pieData.endRatio;
// 如果之前选中过其他扇形，将其取消选中（对 option 更新）
if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
option.series[selectedIndex].parametricEquation = getParametricEquation(
option.series[selectedIndex].pieData.startRatio,
option.series[selectedIndex].pieData.endRatio,
false,
false,
k,
option.series[selectedIndex].pieData.value
);
option.series[selectedIndex].pieStatus.selected = false;
}
// 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
option.series[params.seriesIndex].parametricEquation =
getParametricEquation(
startRatio,
endRatio,
isSelected,
isHovered,
k,
option.series[params.seriesIndex].pieData.value
);
option.series[params.seriesIndex].pieStatus.selected = isSelected;
// 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
isSelected ? (selectedIndex = params.seriesIndex) : null;
// 使用更新后的 option，渲染图表
myChart.setOption(option);
});
// 监听 mouseover，近似实现高亮（放大）效果
myChart.on("mouseover", function (params) {
// 准备重新渲染扇形所需的参数
let isSelected;
let isHovered;
let startRatio;
let endRatio;
let k;
// 如果触发 mouseover 的扇形当前已高亮，则不做操作
if (hoveredIndex === params.seriesIndex) {
return;
// 否则进行高亮及必要的取消高亮操作
} else {
// 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
if (hoveredIndex !== "") {
// 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
isSelected = option.series[hoveredIndex].pieStatus.selected;
isHovered = false;
startRatio = option.series[hoveredIndex].pieData.startRatio;
endRatio = option.series[hoveredIndex].pieData.endRatio;
k = option.series[hoveredIndex].pieStatus.k;
// 对当前点击的扇形，执行取消高亮操作（对 option 更新）
option.series[hoveredIndex].parametricEquation = getParametricEquation(
startRatio,
endRatio,
isSelected,
isHovered,
k,
option.series[hoveredIndex].pieData.value
);
option.series[hoveredIndex].pieStatus.hovered = isHovered;
// 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
hoveredIndex = "";
}
// 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
if (
params.seriesName !== "mouseoutSeries" &&
params.seriesName !== "pie2d"
) {
// 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
isSelected = option.series[params.seriesIndex].pieStatus.selected;
isHovered = true;
startRatio = option.series[params.seriesIndex].pieData.startRatio;
endRatio = option.series[params.seriesIndex].pieData.endRatio;
k = option.series[params.seriesIndex].pieStatus.k;
// 对当前点击的扇形，执行高亮操作（对 option 更新）
option.series[params.seriesIndex].parametricEquation =
getParametricEquation(
startRatio,
endRatio,
isSelected,
isHovered,
k,
option.series[params.seriesIndex].pieData.value + 5
);
option.series[params.seriesIndex].pieStatus.hovered = isHovered;
// 记录上次高亮的扇形对应的系列号 seriesIndex
hoveredIndex = params.seriesIndex;
}
// 使用更新后的 option，渲染图表
myChart.setOption(option);
}
});
// 修正取消高亮失败的 bug
myChart.on("globalout", function () {
// 准备重新渲染扇形所需的参数
let isSelected;
let isHovered;
let startRatio;
let endRatio;
let k;
if (hoveredIndex !== "") {
// 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
isSelected = option.series[hoveredIndex].pieStatus.selected;
isHovered = false;
k = option.series[hoveredIndex].pieStatus.k;
startRatio = option.series[hoveredIndex].pieData.startRatio;
endRatio = option.series[hoveredIndex].pieData.endRatio;
// 对当前点击的扇形，执行取消高亮操作（对 option 更新）
option.series[hoveredIndex].parametricEquation = getParametricEquation(
startRatio,
endRatio,
isSelected,
isHovered,
k,
option.series[hoveredIndex].pieData.value
);
option.series[hoveredIndex].pieStatus.hovered = isHovered;
// 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
hoveredIndex = "";
}
// 使用更新后的 option，渲染图表
myChart.setOption(option);
});
}
// 使用生命钩子
// onMounted(() => {
// // 基于准备好的dom，初始化echarts实例
// // var myChart = echarts.init(document.getElementById('main'));
// // Vue3中： 需要引入
// var myChart = echarts.init(chart.value);
// //设置交互事件 鼠标移入 点击
// // bindListen(myChart)
// // init(); // vue3.2没有this
// // 使用刚指定的配置项和数据显示图表。
// myChart.setOption(option);
// // 单图表响应式: 跟随浏览器大小改变
// window.addEventListener("resize", () => {
// myChart.resize();
// });
// });
const setChart = () => {
var myChart = echarts.init(chart.value);
myChart.setOption(data.option);
// 单图表响应式: 跟随浏览器大小改变
window.addEventListener("resize", () => {
myChart.resize();
});
};
// 使用生命钩子
onBeforeMount(() => {
setTimeout(() => {
data.list = props.list;
// data.list = {
// gxy: "1500",
// notGxy: "1610",
// };
pieData[0].value = data.list.fgxy.rs;
pieData[1].value = data.list.gxy.rs;
getOption();
setChart();
}, 600);
});
</script>
<style scoped></style>

598
src/view/echarts_yl/pie3d.vue
View File

@ -28,28 +28,29 @@ const chart = ref(); // 创建DOM引用
const data = reactive({
list: [],
// pieData: [
// {
// name: "61-70岁", //名称
// value: "", //值
// },
// {
// name: "71-80岁",
// value: "",
// },
// {
// name: "81-90岁",
// value: "",
// },
// {
// name: "91-100岁",
// value: "",
// },
// {
// name: "100岁以上",
// value: "",
// },
// ],
legendData: [],
pieData: [
{
name: "61-70岁", //名称
value: "", //值
},
{
name: "71-80岁",
value: "",
},
{
name: "81-90岁",
value: "",
},
{
name: "91-100岁",
value: "",
},
{
name: "100岁以上",
value: "",
},
],
option: {},
});
@ -89,466 +90,120 @@ const pieData = reactive([
},
]);
// const serData = pieData.map((dItem, index) => {
// return {
// ...dItem,
// value: Number(dItem.value),
// itemStyle: {
// color: colorList[index],
// },
// };
// });
//设置图表配置项
// const option = getPie3D(serData, 0.8);
const getOption = () => {
const serData = pieData.map((dItem, index) => {
return {
...dItem,
value: Number(dItem.value),
itemStyle: {
color: colorList[index],
},
};
});
data.option = getPie3D(serData, 0.8);
};
// 生成模拟 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: 1 / 10,
},
};
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;
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);
}
// // 补充一个透明的圆环，用于支撑高亮功能的近似实现。
// series.push({
// name: 'mouseoutSeries',
// type: 'surface',
// parametric: true,
// wireframe: {
// show: false,
// },
// width: '30px',
// itemStyle: {
// opacity: 0.7,
// color: '#fff',
// },
// parametricEquation: {
// u: {
// min: 0,
// max: Math.PI * 2,
// step: Math.PI / 20,
// },
// v: {
// min: 0,
// max: Math.PI ,
// step: Math.PI / 20,
// },
// x: function (u, v) {
// return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI);
// },
// y: function (u, v) {
// return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) ;
// },
// z: function (u, v) {
// return Math.cos(v) > 0 ? -6 : -7;
// },
// },
// });
// 准备待返回的配置项，把准备好的 legendData、series 传入。
let option = {
//animation: false,
//图例组件
// legend: {
// data: legendData,
// color: [
// "#8FD7FC",
// "#466BE7",
// "#F4BB29",
// "#49C384",
// "#8FD7FC",
// "#466BE7",
// "#F4BB29",
// "#49C384",
// ],
// width: "40%",
// //图例列表的布局朝向。
// orient: "vertical",
// right: 20,
// top: "center",
// //图例文字每项之间的间隔
// itemGap: 10,
// show: true,
// icon: "rect",
// itemHeight: 10,
// itemWidth: 25,
// textStyle: {
// //图例字体大小
// fontSize: 16,
// color: "#FFFFFF",
// lineHeight: 20,
// },
// //格式化图例文本
// formatter: function (name) {
// var target;
// for (var i = 0, l = pieData.length; i < l; i++) {
// if (pieData[i].name == name) {
// target = pieData[i].value;
// }
// }
// if (name == "91-100岁") {
// return ` ${name} ${target} ${target} ${target} `;
// } else if (name == "100岁以上") {
// return ` ${name} ${target} ${target} ${target} `;
// } else {
// return ` ${name} ${target} ${target} ${target} `;
// }
// },
// },
//移动上去提示的文本内容
data.option = {
color: colorList,
tooltip: {
backgroundColor: "rgba(18, 55, 85, 0.8);",
borderColor: "transparent",
show: true,
trigger: "item",
textStyle: {
color: "#fff",
},
backgroundColor: "rgba(16, 32, 40, 0.88)",
borderRadius: 4,
borderColor: "#20749e",
formatter: (params) => {
if (
params.seriesName !== "mouseoutSeries" &&
params.seriesName !== "pie2d"
) {
let bfb = (
(option.series[params.seriesIndex].pieData.endRatio -
option.series[params.seriesIndex].pieData.startRatio) *
100
).toFixed(2);
const value = option.series[params.seriesIndex].pieData.value;
return (
`<div style='color:#FFFFFF;'>` +
`<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
`${params.seriesName}<br/>` +
`<span style='margin-right:20px'>${value}人</span>` +
`<span >${bfb}%</span>` +
`</div>`
);
}
// return params.marker + params.name + ': ' + params.value
return `${params.name}:${params.percent}%`;
},
},
xAxis3D: {},
yAxis3D: {},
zAxis3D: {},
grid3D: {
viewControl: {
autoRotate: true,
rotateSensitivity: 0, //设置为0无法旋转
zoomSensitivity: 0, //设置为0无法缩放
panSensitivity: 0, //设置为0无法平移
alpha: 25, //角度(这个很重要 调节角度的)
distance: 120, //调整视角到主体的距离，类似调整zoom(这是整体大小)
},
top: "-30",
left: "0",
width: "100%",
toolbox: {
show: false,
boxHeight: 20,
},
series: series,
series: [
{
name: "",
type: "pie",
radius: ["50%", "65%"],
// radius: '70%',
center: ["50%", "50%"],
emphasis: {
scale: true, //鼠标移入变大
},
label: {
show: false,
// formatter: ['{c|{d}%}', '{b|{b}}'].join('\n'),
formatter: (params) => {
if (params.name !== "") {
return [`{c|${params.percent}%}`, `{b|${params.name}}`].join(
"\n"
);
}
},
},
data: data1,
},
// {
// name: "外边框",
// type: "pie",
// clockwise: false, //顺时加载
// emphasis: {
// scale: false, //鼠标移入变大
// },
// center: ["50%", "50%"],
// radius: ["88%", "88%"],
// label: {
// show: false,
// },
// data: [
// {
// value: 0,
// name: "",
// itemStyle: {
// borderWidth: 1,
// borderColor: "rgba(181,221,216,.38)",
// },
// },
// ],
// },
],
};
return option;
}
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
function getParametricEquation(
startRatio,
endRatio,
isSelected,
isHovered,
k,
h
) {
// 计算
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) * h * 0.1;
}
return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
},
};
}
// 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
function bindListen(myChart) {
let selectedIndex = "";
let hoveredIndex = "";
// 监听点击事件，实现选中效果（单选）
myChart.on("click", function (params) {
// 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
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 endRatio = option.series[params.seriesIndex].pieData.endRatio;
// 如果之前选中过其他扇形，将其取消选中（对 option 更新）
if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
option.series[selectedIndex].parametricEquation = getParametricEquation(
option.series[selectedIndex].pieData.startRatio,
option.series[selectedIndex].pieData.endRatio,
false,
false,
k,
option.series[selectedIndex].pieData.value
);
option.series[selectedIndex].pieStatus.selected = false;
}
// 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
option.series[params.seriesIndex].parametricEquation =
getParametricEquation(
startRatio,
endRatio,
isSelected,
isHovered,
k,
option.series[params.seriesIndex].pieData.value
);
option.series[params.seriesIndex].pieStatus.selected = isSelected;
// 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
isSelected ? (selectedIndex = params.seriesIndex) : null;
// 使用更新后的 option，渲染图表
myChart.setOption(option);
};
let data1 = [];
const setChart1 = () => {
pieData.forEach((item) => {
item.value = Number(item.value);
});
// 监听 mouseover，近似实现高亮（放大）效果
myChart.on("mouseover", function (params) {
// 准备重新渲染扇形所需的参数
let isSelected;
let isHovered;
let startRatio;
let endRatio;
let k;
// 如果触发 mouseover 的扇形当前已高亮，则不做操作
if (hoveredIndex === params.seriesIndex) {
return;
// 否则进行高亮及必要的取消高亮操作
} else {
// 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
if (hoveredIndex !== "") {
// 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
isSelected = option.series[hoveredIndex].pieStatus.selected;
isHovered = false;
startRatio = option.series[hoveredIndex].pieData.startRatio;
endRatio = option.series[hoveredIndex].pieData.endRatio;
k = option.series[hoveredIndex].pieStatus.k;
// 对当前点击的扇形，执行取消高亮操作（对 option 更新）
option.series[hoveredIndex].parametricEquation = getParametricEquation(
startRatio,
endRatio,
isSelected,
isHovered,
k,
option.series[hoveredIndex].pieData.value
);
option.series[hoveredIndex].pieStatus.hovered = isHovered;
// 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
hoveredIndex = "";
// 计算 pieData 中所有 value 的总和
const totalValue = pieData.reduce((acc, item) => acc + item.value, 0);
// 计算总和的 10%
const tenPercentOfTotal = totalValue * 0.02;
// 使用 pieData 名称作为 legend 数据
data.legendData = pieData.map((item) => item.name);
pieData.forEach((item, index) => {
data1.push(
{
value: item.value,
name: item.name,
itemStyle: {
borderWidth: 1, //圆弧宽度
shadowBlur: 2, // 圆弧阴影
borderColor: colorList[index],
shadowColor: colorList[index],
},
},
{
// 每一项中间的空格
silent: true,
name: "gap",
value: tenPercentOfTotal, // 动态设置为总和的 10%
itemStyle: {
label: {
show: false,
},
labelLine: {
show: false,
},
color: "transparent",
},
}
// 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
if (
params.seriesName !== "mouseoutSeries" &&
params.seriesName !== "pie2d"
) {
// 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
isSelected = option.series[params.seriesIndex].pieStatus.selected;
isHovered = true;
startRatio = option.series[params.seriesIndex].pieData.startRatio;
endRatio = option.series[params.seriesIndex].pieData.endRatio;
k = option.series[params.seriesIndex].pieStatus.k;
// 对当前点击的扇形，执行高亮操作（对 option 更新）
option.series[params.seriesIndex].parametricEquation =
getParametricEquation(
startRatio,
endRatio,
isSelected,
isHovered,
k,
option.series[params.seriesIndex].pieData.value + 5
);
option.series[params.seriesIndex].pieStatus.hovered = isHovered;
// 记录上次高亮的扇形对应的系列号 seriesIndex
hoveredIndex = params.seriesIndex;
}
// 使用更新后的 option，渲染图表
myChart.setOption(option);
}
);
});
// 修正取消高亮失败的 bug
myChart.on("globalout", function () {
// 准备重新渲染扇形所需的参数
let isSelected;
let isHovered;
let startRatio;
let endRatio;
let k;
if (hoveredIndex !== "") {
// 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
isSelected = option.series[hoveredIndex].pieStatus.selected;
isHovered = false;
k = option.series[hoveredIndex].pieStatus.k;
startRatio = option.series[hoveredIndex].pieData.startRatio;
endRatio = option.series[hoveredIndex].pieData.endRatio;
// 对当前点击的扇形，执行取消高亮操作（对 option 更新）
option.series[hoveredIndex].parametricEquation = getParametricEquation(
startRatio,
endRatio,
isSelected,
isHovered,
k,
option.series[hoveredIndex].pieData.value
);
option.series[hoveredIndex].pieStatus.hovered = isHovered;
// 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
hoveredIndex = "";
}
// 使用更新后的 option，渲染图表
myChart.setOption(option);
});
}
// 使用生命钩子
// onMounted(() => {
// // 基于准备好的dom，初始化echarts实例
// // var myChart = echarts.init(document.getElementById('main'));
// // Vue3中： 需要引入
// var myChart = echarts.init(chart.value);
// //设置交互事件 鼠标移入 点击
// // bindListen(myChart)
// // init(); // vue3.2没有this
// // 使用刚指定的配置项和数据显示图表。
// myChart.setOption(option);
// // 单图表响应式: 跟随浏览器大小改变
// window.addEventListener("resize", () => {
// myChart.resize();
// });
// });
};
const setChart = () => {
var myChart = echarts.init(chart.value);
myChart.setOption(data.option);
@ -567,6 +222,7 @@ onBeforeMount(() => {
pieData[3].value = data.list.nl9099;
pieData[4].value = data.list.nl100;
setChart1();
getOption();
setChart();
}, 600);

576
src/view/echarts_yl/pie3d1.vue Normal file
View File

@ -0,0 +1,576 @@
<template>
<div ref="chart" style="width: 40%; height: 200px"></div>
</template>
<script setup>
import {
onMounted,
onBeforeMount,
ref,
reactive,
defineProps,
nextTick,
} from "vue";
// 局部引入echarts核心模块
import * as echarts from "echarts";
import "echarts-gl";
const props = defineProps({
list: {
type: Object,
default: () => {
return [];
},
},
});
const chart = ref(); // 创建DOM引用
const data = reactive({
list: [],
// pieData: [
// {
// name: "61-70岁", //名称
// value: "", //值
// },
// {
// name: "71-80岁",
// value: "",
// },
// {
// name: "81-90岁",
// value: "",
// },
// {
// name: "91-100岁",
// value: "",
// },
// {
// name: "100岁以上",
// value: "",
// },
// ],
option: {},
});
const colorList = [
"#FFE35F",
"#0081FF",
"#8ABEDB",
"#25B9C8",
"#30EB92",
"rgba(69, 244, 245)",
"rgba(7, 166, 255)",
"rgba(255, 208, 118)",
"rgba(109, 168, 198)",
"rgba(255, 255, 255)",
];
const pieData = reactive([
{
name: "60-69岁", //名称
value: 0, //值
},
{
name: "70-79岁",
value: 0,
},
{
name: "80-89岁",
value: 0,
},
{
name: "90-99岁",
value: 0,
},
{
name: "100岁以上",
value: 0,
},
]);
// const serData = pieData.map((dItem, index) => {
// return {
// ...dItem,
// value: Number(dItem.value),
// itemStyle: {
// color: colorList[index],
// },
// };
// });
//设置图表配置项
// const option = getPie3D(serData, 0.8);
const getOption = () => {
const serData = pieData.map((dItem, index) => {
return {
...dItem,
value: Number(dItem.value),
itemStyle: {
color: colorList[index],
},
};
});
data.option = getPie3D(serData, 0.8);
};
// 生成模拟 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: 1 / 10,
},
};
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;
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);
}
// // 补充一个透明的圆环，用于支撑高亮功能的近似实现。
// series.push({
// name: 'mouseoutSeries',
// type: 'surface',
// parametric: true,
// wireframe: {
// show: false,
// },
// width: '30px',
// itemStyle: {
// opacity: 0.7,
// color: '#fff',
// },
// parametricEquation: {
// u: {
// min: 0,
// max: Math.PI * 2,
// step: Math.PI / 20,
// },
// v: {
// min: 0,
// max: Math.PI ,
// step: Math.PI / 20,
// },
// x: function (u, v) {
// return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI);
// },
// y: function (u, v) {
// return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) ;
// },
// z: function (u, v) {
// return Math.cos(v) > 0 ? -6 : -7;
// },
// },
// });
// 准备待返回的配置项，把准备好的 legendData、series 传入。
let option = {
//animation: false,
//图例组件
// legend: {
// data: legendData,
// color: [
// "#8FD7FC",
// "#466BE7",
// "#F4BB29",
// "#49C384",
// "#8FD7FC",
// "#466BE7",
// "#F4BB29",
// "#49C384",
// ],
// width: "40%",
// //图例列表的布局朝向。
// orient: "vertical",
// right: 20,
// top: "center",
// //图例文字每项之间的间隔
// itemGap: 10,
// show: true,
// icon: "rect",
// itemHeight: 10,
// itemWidth: 25,
// textStyle: {
// //图例字体大小
// fontSize: 16,
// color: "#FFFFFF",
// lineHeight: 20,
// },
// //格式化图例文本
// formatter: function (name) {
// var target;
// for (var i = 0, l = pieData.length; i < l; i++) {
// if (pieData[i].name == name) {
// target = pieData[i].value;
// }
// }
// if (name == "91-100岁") {
// return ` ${name} ${target} ${target} ${target} `;
// } else if (name == "100岁以上") {
// return ` ${name} ${target} ${target} ${target} `;
// } else {
// return ` ${name} ${target} ${target} ${target} `;
// }
// },
// },
//移动上去提示的文本内容
tooltip: {
backgroundColor: "rgba(18, 55, 85, 0.8);",
borderColor: "transparent",
formatter: (params) => {
if (
params.seriesName !== "mouseoutSeries" &&
params.seriesName !== "pie2d"
) {
let bfb = (
(option.series[params.seriesIndex].pieData.endRatio -
option.series[params.seriesIndex].pieData.startRatio) *
100
).toFixed(2);
const value = option.series[params.seriesIndex].pieData.value;
return (
`<div style='color:#FFFFFF;'>` +
`<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
`${params.seriesName}<br/>` +
`<span style='margin-right:20px'>${value}人</span>` +
`<span >${bfb}%</span>` +
`</div>`
);
}
},
},
xAxis3D: {},
yAxis3D: {},
zAxis3D: {},
grid3D: {
viewControl: {
autoRotate: true,
rotateSensitivity: 0, //设置为0无法旋转
zoomSensitivity: 0, //设置为0无法缩放
panSensitivity: 0, //设置为0无法平移
alpha: 25, //角度(这个很重要 调节角度的)
distance: 120, //调整视角到主体的距离，类似调整zoom(这是整体大小)
},
top: "-30",
left: "0",
width: "100%",
show: false,
boxHeight: 20,
},
series: series,
};
return option;
}
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
function getParametricEquation(
startRatio,
endRatio,
isSelected,
isHovered,
k,
h
) {
// 计算
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) * h * 0.1;
}
return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
},
};
}
// 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
function bindListen(myChart) {
let selectedIndex = "";
let hoveredIndex = "";
// 监听点击事件，实现选中效果（单选）
myChart.on("click", function (params) {
// 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
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 endRatio = option.series[params.seriesIndex].pieData.endRatio;
// 如果之前选中过其他扇形，将其取消选中（对 option 更新）
if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
option.series[selectedIndex].parametricEquation = getParametricEquation(
option.series[selectedIndex].pieData.startRatio,
option.series[selectedIndex].pieData.endRatio,
false,
false,
k,
option.series[selectedIndex].pieData.value
);
option.series[selectedIndex].pieStatus.selected = false;
}
// 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
option.series[params.seriesIndex].parametricEquation =
getParametricEquation(
startRatio,
endRatio,
isSelected,
isHovered,
k,
option.series[params.seriesIndex].pieData.value
);
option.series[params.seriesIndex].pieStatus.selected = isSelected;
// 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
isSelected ? (selectedIndex = params.seriesIndex) : null;
// 使用更新后的 option，渲染图表
myChart.setOption(option);
});
// 监听 mouseover，近似实现高亮（放大）效果
myChart.on("mouseover", function (params) {
// 准备重新渲染扇形所需的参数
let isSelected;
let isHovered;
let startRatio;
let endRatio;
let k;
// 如果触发 mouseover 的扇形当前已高亮，则不做操作
if (hoveredIndex === params.seriesIndex) {
return;
// 否则进行高亮及必要的取消高亮操作
} else {
// 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
if (hoveredIndex !== "") {
// 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
isSelected = option.series[hoveredIndex].pieStatus.selected;
isHovered = false;
startRatio = option.series[hoveredIndex].pieData.startRatio;
endRatio = option.series[hoveredIndex].pieData.endRatio;
k = option.series[hoveredIndex].pieStatus.k;
// 对当前点击的扇形，执行取消高亮操作（对 option 更新）
option.series[hoveredIndex].parametricEquation = getParametricEquation(
startRatio,
endRatio,
isSelected,
isHovered,
k,
option.series[hoveredIndex].pieData.value
);
option.series[hoveredIndex].pieStatus.hovered = isHovered;
// 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
hoveredIndex = "";
}
// 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
if (
params.seriesName !== "mouseoutSeries" &&
params.seriesName !== "pie2d"
) {
// 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
isSelected = option.series[params.seriesIndex].pieStatus.selected;
isHovered = true;
startRatio = option.series[params.seriesIndex].pieData.startRatio;
endRatio = option.series[params.seriesIndex].pieData.endRatio;
k = option.series[params.seriesIndex].pieStatus.k;
// 对当前点击的扇形，执行高亮操作（对 option 更新）
option.series[params.seriesIndex].parametricEquation =
getParametricEquation(
startRatio,
endRatio,
isSelected,
isHovered,
k,
option.series[params.seriesIndex].pieData.value + 5
);
option.series[params.seriesIndex].pieStatus.hovered = isHovered;
// 记录上次高亮的扇形对应的系列号 seriesIndex
hoveredIndex = params.seriesIndex;
}
// 使用更新后的 option，渲染图表
myChart.setOption(option);
}
});
// 修正取消高亮失败的 bug
myChart.on("globalout", function () {
// 准备重新渲染扇形所需的参数
let isSelected;
let isHovered;
let startRatio;
let endRatio;
let k;
if (hoveredIndex !== "") {
// 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
isSelected = option.series[hoveredIndex].pieStatus.selected;
isHovered = false;
k = option.series[hoveredIndex].pieStatus.k;
startRatio = option.series[hoveredIndex].pieData.startRatio;
endRatio = option.series[hoveredIndex].pieData.endRatio;
// 对当前点击的扇形，执行取消高亮操作（对 option 更新）
option.series[hoveredIndex].parametricEquation = getParametricEquation(
startRatio,
endRatio,
isSelected,
isHovered,
k,
option.series[hoveredIndex].pieData.value
);
option.series[hoveredIndex].pieStatus.hovered = isHovered;
// 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
hoveredIndex = "";
}
// 使用更新后的 option，渲染图表
myChart.setOption(option);
});
}
// 使用生命钩子
// onMounted(() => {
// // 基于准备好的dom，初始化echarts实例
// // var myChart = echarts.init(document.getElementById('main'));
// // Vue3中： 需要引入
// var myChart = echarts.init(chart.value);
// //设置交互事件 鼠标移入 点击
// // bindListen(myChart)
// // init(); // vue3.2没有this
// // 使用刚指定的配置项和数据显示图表。
// myChart.setOption(option);
// // 单图表响应式: 跟随浏览器大小改变
// window.addEventListener("resize", () => {
// myChart.resize();
// });
// });
const setChart = () => {
var myChart = echarts.init(chart.value);
myChart.setOption(data.option);
// 单图表响应式: 跟随浏览器大小改变
window.addEventListener("resize", () => {
myChart.resize();
});
};
// 使用生命钩子
onBeforeMount(() => {
setTimeout(() => {
data.list = props.list;
pieData[0].value = data.list.nl6069;
pieData[1].value = data.list.nl7079;
pieData[2].value = data.list.nl8089;
pieData[3].value = data.list.nl9099;
pieData[4].value = data.list.nl100;
getOption();
setChart();
}, 600);
});
</script>
<style scoped></style>

124
src/view/error/401.vue
View File

@ -1,54 +1,84 @@
<template>
<div class="error_main">
<img class="error_main_img" src="@/assets/errorImg/error3.png" alt="" />
<div class="error_main_content">请求未验证，请联系管理员</div>
<div class="error_main">
<img class="error_main_img" src="@/assets/errorImg/error3.png" alt="" />
<div class="error_main_content">请求未验证，请联系管理员</div>
<div class="unit">
<div>
<!-- 应用归属单位 -->
应用归属单位
</div>
<div>
<!-- 龙游县数据局 -->
浙江省龙游县数据局
</div>
</div>
</template>
<style lang="scss">
.error_main {
width: 100%;
max-width: 500px;
padding: 200px 30px 0;
<div class="unit">
<div>
<!-- 应用管理员 -->
应用管理员
</div>
<div>
<!-- 王昊 -->
王昊
</div>
</div>
<div class="unit">
<div>
<!-- 联系方式 -->
联系方式
</div>
<div>
<!-- 18368625409 -->
18368625409
</div>
</div>
</div>
</template>
<style lang="scss">
.error_main {
width: 100%;
max-width: 500px;
padding: 30px 30px 0;
box-sizing: border-box;
display: flex;
align-items: center;
flex-direction: column;
margin: 0 auto;
.error_main_img {
width: 300px;
height: 300px;
}
.error_main_content {
text-align: center;
margin-top: 5px;
font-size: 14px;
padding: 0 60px;
box-sizing: border-box;
color: #666874;
font-weight: 500;
margin-bottom: 26px;
line-height: 48px;
}
.unit {
display: flex;
// padding: 16px;
height: 58px;
width: 100%;
font-size: 14px;
justify-content: space-between;
box-sizing: border-box;
font-weight: 500;
color: #666874;
align-items: center;
flex-direction: column;
margin: 0 auto;
.error_main_img {
width: 300px;
height: 300px;
}
.error_main_content {
text-align: center;
margin-top: 5px;
font-size: 14px;
padding: 0 60px;
box-sizing: border-box;
color: #666874;
font-weight: 500;
margin-bottom: 26px;
line-height: 48px;
}
.unit {
display: flex;
// padding: 16px;
height: 58px;
width: 100%;
font-size: 14px;
justify-content: space-between;
box-sizing: border-box;
font-weight: 500;
color: #666874;
align-items: center;
div:nth-child(2) {
color: #32333b;
}
div:nth-child(2) {
color: #32333b;
}
}
</style>
}
</style>

34
src/view/error/403.vue
View File

@ -4,6 +4,38 @@
<div class="error_main_content">
抱歉，您暂无当前页面的访问权限，请联系管理员
</div>
<div class="unit">
<div>
<!-- 应用归属单位 -->
应用归属单位
</div>
<div>
<!-- 龙游县数据局 -->
浙江省龙游县数据局
</div>
</div>
<div class="unit">
<div>
<!-- 应用管理员 -->
应用管理员
</div>
<div>
<!-- 王昊 -->
王昊
</div>
</div>
<div class="unit">
<div>
<!-- 联系方式 -->
联系方式
</div>
<div>
<!-- 18368625409 -->
18368625409
</div>
</div>
</div>
</template>
@ -11,7 +43,7 @@
.error_main {
width: 100%;
max-width: 500px;
padding: 200px 30px 0;
padding: 30px 30px 0;
box-sizing: border-box;
display: flex;
align-items: center;

37
src/view/error/404.vue
View File

@ -1,8 +1,39 @@
<template>
<div class="error_main">
<img class="error_main_img" src="@/assets/errorImg/error1.png" alt="" />
<div class="error_main_content">抱歉，访问资源不存在</div>
<div class="error_main_content">抱歉，系统错误，您可以选择尝试清除缓存或联系管理员</div>
<div class="unit">
<div>
<!-- 应用归属单位 -->
应用归属单位
</div>
<div>
<!-- 龙游县数据局 -->
浙江省龙游县数据局
</div>
</div>
<div class="unit">
<div>
<!-- 应用管理员 -->
应用管理员
</div>
<div>
<!-- 王昊 -->
王昊
</div>
</div>
<div class="unit">
<div>
<!-- 联系方式 -->
联系方式
</div>
<div>
<!-- 18368625409 -->
18368625409
</div>
</div>
</div>
</template>
@ -10,7 +41,7 @@
.error_main {
width: 100%;
max-width: 500px;
padding: 200px 30px 0;
padding: 30px 30px 0;
box-sizing: border-box;
display: flex;
align-items: center;

128
src/view/error/500.vue
View File

@ -1,56 +1,86 @@
<template>
<div class="error_main">
<img class="error_main_img" src="@/assets/errorImg/error2.png" alt="" />
<div class="error_main_content">
抱歉，系统错误，您可以选择尝试清除缓存或联系管理员
</div>
<div class="error_main">
<img class="error_main_img" src="@/assets/errorImg/error2.png" alt="" />
<div class="error_main_content">
抱歉，系统错误，您可以选择尝试清除缓存或联系管理员
</div>
</template>
<style lang="scss">
.error_main {
width: 100%;
max-width: 536px;
padding: 200px 30px 0;
<div class="unit">
<div>
<!-- 应用归属单位 -->
应用归属单位
</div>
<div>
<!-- 龙游县数据局 -->
浙江省龙游县数据局
</div>
</div>
<div class="unit">
<div>
<!-- 应用管理员 -->
应用管理员
</div>
<div>
<!-- 王昊 -->
王昊
</div>
</div>
<div class="unit">
<div>
<!-- 联系方式 -->
联系方式
</div>
<div>
<!-- 18368625409 -->
18368625409
</div>
</div>
</div>
</template>
<style lang="scss">
.error_main {
width: 100%;
max-width: 500px;
padding: 30px 30px 0;
box-sizing: border-box;
display: flex;
align-items: center;
flex-direction: column;
margin: 0 auto;
.error_main_img {
width: 300px;
height: 300px;
}
.error_main_content {
text-align: center;
margin-top: 5px;
font-size: 14px;
padding: 0 60px;
box-sizing: border-box;
color: #666874;
font-weight: 500;
margin-bottom: 26px;
line-height: 48px;
}
.unit {
display: flex;
// padding: 16px;
height: 58px;
width: 100%;
font-size: 14px;
justify-content: space-between;
box-sizing: border-box;
font-weight: 500;
color: #666874;
align-items: center;
flex-direction: column;
margin: 0 auto;
.error_main_img {
width: 300px;
height: 300px;
}
.error_main_content {
text-align: center;
margin-top: 5px;
font-size: 14px;
padding: 0 60px;
box-sizing: border-box;
color: #666874;
font-weight: 500;
margin-bottom: 26px;
line-height: 48px;
}
.unit {
display: flex;
// padding: 16px;
height: 58px;
width: 100%;
font-size: 14px;
justify-content: space-between;
box-sizing: border-box;
font-weight: 500;
color: #666874;
align-items: center;
div:nth-child(2) {
color: #32333b;
}
div:nth-child(2) {
color: #32333b;
}
}
</style>
}
</style>

68
src/view/error/emptyPage.vue Normal file
View File

@ -0,0 +1,68 @@
<template>
<div class="error_main">
<img class="error_main_img" src="@/assets/errorImg/error6.png" alt="" />
<div class="error_main_content">正在建设中，敬请期待</div>
<div class="unit">
<div>
<!-- 应用归属单位 -->
应用归属单位
</div>
<div>
<!-- 龙游县数据局 -->
浙江省龙游县数据局
</div>
</div>
<div class="unit">
<div>
<!-- 应用管理员 -->
应用管理员
</div>
<div>
<!-- 王昊 -->
王昊
</div>
</div>
<div class="unit">
<div>
<!-- 联系方式 -->
联系方式
</div>
<div>
<!-- 18368625409 -->
18368625409
</div>
</div>
</div>
</template>
<style lang="scss">
.error_main {
width: 100%;
max-width: 500px;
padding: 30px 30px 0;
box-sizing: border-box;
display: flex;
align-items: center;
flex-direction: column;
margin: 0 auto;
.error_main_img {
width: 300px;
height: 300px;
}
.error_main_content {
text-align: center;
margin-top: 5px;
font-size: 14px;
padding: 0 60px;
box-sizing: border-box;
color: #666874;
font-weight: 500;
margin-bottom: 26px;
line-height: 48px;
}
}
</style>

68
src/view/error/noConstruction.vue Normal file
View File

@ -0,0 +1,68 @@
<template>
<div class="error_main">
<img class="error_main_img" src="@/assets/errorImg/error6.png" alt="" />
<div class="error_main_content">暂无相关内容，请退回上一页</div>
<div class="unit">
<div>
<!-- 应用归属单位 -->
应用归属单位
</div>
<div>
<!-- 龙游县数据局 -->
浙江省龙游县数据局
</div>
</div>
<div class="unit">
<div>
<!-- 应用管理员 -->
应用管理员
</div>
<div>
<!-- 王昊 -->
王昊
</div>
</div>
<div class="unit">
<div>
<!-- 联系方式 -->
联系方式
</div>
<div>
<!-- 18368625409 -->
18368625409
</div>
</div>
</div>
</template>
<style lang="scss">
.error_main {
width: 100%;
max-width: 500px;
padding: 30px 30px 0;
box-sizing: border-box;
display: flex;
align-items: center;
flex-direction: column;
margin: 0 auto;
.error_main_img {
width: 300px;
height: 300px;
}
.error_main_content {
text-align: center;
margin-top: 5px;
font-size: 14px;
padding: 0 60px;
box-sizing: border-box;
color: #666874;
font-weight: 500;
margin-bottom: 26px;
line-height: 48px;
}
}
</style>

68
src/view/error/noNetwork.vue Normal file
View File

@ -0,0 +1,68 @@
<template>
<div class="error_main">
<img class="error_main_img" src="@/assets/errorImg/error4.png" alt="" />
<div class="error_main_content">网络错误，请检查网络连接是否正常</div>
<div class="unit">
<div>
<!-- 应用归属单位 -->
应用归属单位
</div>
<div>
<!-- 龙游县数据局 -->
浙江省龙游县数据局
</div>
</div>
<div class="unit">
<div>
<!-- 应用管理员 -->
应用管理员
</div>
<div>
<!-- 王昊 -->
王昊
</div>
</div>
<div class="unit">
<div>
<!-- 联系方式 -->
联系方式
</div>
<div>
<!-- 18368625409 -->
18368625409
</div>
</div>
</div>
</template>
<style lang="scss">
.error_main {
width: 100%;
max-width: 500px;
padding: 30px 30px 0;
box-sizing: border-box;
display: flex;
align-items: center;
flex-direction: column;
margin: 0 auto;
.error_main_img {
width: 300px;
height: 300px;
}
.error_main_content {
text-align: center;
margin-top: 5px;
font-size: 14px;
padding: 0 60px;
box-sizing: border-box;
color: #666874;
font-weight: 500;
margin-bottom: 26px;
line-height: 48px;
}
}
</style>

37
src/view/error/noPermission.vue
View File

@ -1,37 +0,0 @@
<template>
<div class="error_main">
<img class="error_main_img" src="@/assets/errorImg/error3.png" alt="" />
<div class="error_main_content">账号没权限，请联系管理员</div>
</div>
</template>
<style lang="scss">
.error_main {
width: 100%;
max-width: 500px;
padding: 200px 30px 0;
box-sizing: border-box;
display: flex;
align-items: center;
flex-direction: column;
margin: 0 auto;
.error_main_img {
width: 300px;
height: 300px;
}
.error_main_content {
text-align: center;
margin-top: 5px;
font-size: 14px;
padding: 0 60px;
box-sizing: border-box;
color: #666874;
font-weight: 500;
margin-bottom: 26px;
line-height: 48px;
}
}
</style>

68
src/view/error/noResults.vue Normal file
View File

@ -0,0 +1,68 @@
<template>
<div class="error_main">
<img class="error_main_img" src="@/assets/errorImg/error5.png" alt="" />
<div class="error_main_content">暂无相关搜索结果，请更换关键字搜索</div>
<div class="unit">
<div>
<!-- 应用归属单位 -->
应用归属单位
</div>
<div>
<!-- 龙游县数据局 -->
浙江省龙游县数据局
</div>
</div>
<div class="unit">
<div>
<!-- 应用管理员 -->
应用管理员
</div>
<div>
<!-- 王昊 -->
王昊
</div>
</div>
<div class="unit">
<div>
<!-- 联系方式 -->
联系方式
</div>
<div>
<!-- 18368625409 -->
18368625409
</div>
</div>
</div>
</template>
<style lang="scss">
.error_main {
width: 100%;
max-width: 500px;
padding: 30px 30px 0;
box-sizing: border-box;
display: flex;
align-items: center;
flex-direction: column;
margin: 0 auto;
.error_main_img {
width: 300px;
height: 300px;
}
.error_main_content {
text-align: center;
margin-top: 5px;
font-size: 14px;
padding: 0 60px;
box-sizing: border-box;
color: #666874;
font-weight: 500;
margin-bottom: 26px;
line-height: 48px;
}
}
</style>

10
src/view/guide.vue
View File

@ -152,7 +152,7 @@ const login = () => {
} else {
// 跳转未绑定页面
router.push({
path: `/error/noPermission`,
path: `/error/403`,
});
}
});
@ -160,11 +160,9 @@ const login = () => {
})
.catch((err) => {
console.log(err);
var token = getCookie("lytoken");
// var token = "6b0e380b4a8f46baae4923f83faf670d";
// router.push({
// path: `/error/404`,
// });
// var token = getCookie("lytoken");
var token = "6b0e380b4a8f46baae4923f83faf670d";
// console.log('token', token)
if (!token) {
window.location.href =

22
src/view/sy_map.vue
View File

@ -4344,7 +4344,27 @@ const reset_font2 = () => {
document.querySelector(".detail").style.transform =
"scale(" + width / 1920 + "," + height / 1080 + ")";
};
onMounted(async () => {
// 检查浏览器是否支持 WebGL
function isWebGLAvailable() {
try {
var canvas = document.createElement("canvas");
return (
!!window.WebGLRenderingContext &&
(canvas.getContext("webgl") || canvas.getContext("experimental-webgl"))
);
} catch (e) {
return false;
}
}
if (!isWebGLAvailable()) {
console.log("您的浏览器不支持WebGL。");
} else {
console.log("您的浏览器支持WebGL。");
}
loadingss.value = true;
reset_font();
await getXzsj();
@ -5198,4 +5218,4 @@ onMounted(async () => {
background: rgba(255, 255, 255, 0.14);
border: 1px solid #6bade1;
}
</style>
</style>

2
src/view/table_gk/gk_yl.vue
View File

@ -162,7 +162,7 @@
<div class="moveImg"></div>
<div class="mtpImg1"></div>
<div class="mtpImg2"></div>
<div class="mtpImg3"></div>
<!-- <div class="mtpImg3"></div> -->
<div class="mtpText1">{{ data.oldAgeTotal }}</div>
<div class="mtpText2">{{ data.oldAgePercent }}%</div>
</div>

2
src/view/yl.vue
View File

@ -83,7 +83,7 @@
<div class="moveImg"></div>
<div class="mtpImg1"></div>
<div class="mtpImg2"></div>
<div class="mtpImg3"></div>
<!-- <div class="mtpImg3"></div> -->
<div class="mtpText1">{{ data.oldAgeTotal }}</div>
<div class="mtpText2">{{ data.oldAgePercent }}%</div>
</div>