This commit is contained in:
parent
e05c0ef6fa
commit
645289f07b
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
|
|
@ -0,0 +1,296 @@
|
||||||
|
<template>
|
||||||
|
<div ref="chart" style="width: 100%; height: 180px"></div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { onMounted, reactive, ref, onBeforeMount, onBeforeUnmount } from "vue";
|
||||||
|
// 局部引入echarts核心模块
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
const props = defineProps({
|
||||||
|
list: {
|
||||||
|
type: Array,
|
||||||
|
default: () => {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const data = reactive({
|
||||||
|
option: {},
|
||||||
|
});
|
||||||
|
let angle = 0; // 角度
|
||||||
|
let dataValue = 86;
|
||||||
|
const chart = ref(); // 创建DOM引用
|
||||||
|
const getOption = () => {
|
||||||
|
data.option = {
|
||||||
|
title: {
|
||||||
|
text: `{v|${dataValue}}{unit|%}`,
|
||||||
|
x: "center",
|
||||||
|
y: "center",
|
||||||
|
textStyle: {
|
||||||
|
rich: {
|
||||||
|
v: {
|
||||||
|
fontSize: 25,
|
||||||
|
color: "#fff",
|
||||||
|
},
|
||||||
|
unit: {
|
||||||
|
fontSize: 25,
|
||||||
|
color: "#fff",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
/** 绘制内部圆弧-1 <right-top> */
|
||||||
|
{
|
||||||
|
type: "custom",
|
||||||
|
coordinateSystem: "none",
|
||||||
|
renderItem: (params, api) => {
|
||||||
|
return {
|
||||||
|
type: "arc",
|
||||||
|
shape: {
|
||||||
|
cx: api.getWidth() / 2,
|
||||||
|
cy: api.getHeight() / 2,
|
||||||
|
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.92,
|
||||||
|
startAngle: ((270 + angle) * Math.PI) / 180,
|
||||||
|
endAngle: ((360 + angle) * Math.PI) / 180,
|
||||||
|
},
|
||||||
|
style: {
|
||||||
|
fill: "transparent",
|
||||||
|
stroke: "#00E0DB",
|
||||||
|
lineWidth: 2,
|
||||||
|
},
|
||||||
|
silent: true,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
data: [0],
|
||||||
|
},
|
||||||
|
/** 绘制内部圆弧-2 <left-bottom> */
|
||||||
|
{
|
||||||
|
type: "custom",
|
||||||
|
coordinateSystem: "none",
|
||||||
|
renderItem: (params, api) => {
|
||||||
|
return {
|
||||||
|
type: "arc",
|
||||||
|
shape: {
|
||||||
|
cx: api.getWidth() / 2,
|
||||||
|
cy: api.getHeight() / 2,
|
||||||
|
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.92,
|
||||||
|
startAngle: ((90 + angle) * Math.PI) / 180,
|
||||||
|
endAngle: ((180 + angle) * Math.PI) / 180,
|
||||||
|
},
|
||||||
|
style: {
|
||||||
|
fill: "transparent",
|
||||||
|
stroke: "#00E0DB",
|
||||||
|
lineWidth: 2,
|
||||||
|
},
|
||||||
|
silent: true,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
data: [0],
|
||||||
|
},
|
||||||
|
/** 绘制外部圆弧-1 <right-bottom> */
|
||||||
|
{
|
||||||
|
type: "custom",
|
||||||
|
coordinateSystem: "none",
|
||||||
|
renderItem: (params, api) => {
|
||||||
|
return {
|
||||||
|
type: "arc",
|
||||||
|
shape: {
|
||||||
|
cx: api.getWidth() / 2,
|
||||||
|
cy: api.getHeight() / 2,
|
||||||
|
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.98,
|
||||||
|
startAngle: ((355 + -angle) * Math.PI) / 180,
|
||||||
|
endAngle: ((120 + -angle) * Math.PI) / 180,
|
||||||
|
},
|
||||||
|
style: {
|
||||||
|
fill: "transparent",
|
||||||
|
stroke: "#00E0DB",
|
||||||
|
lineWidth: 2.6,
|
||||||
|
},
|
||||||
|
silent: true,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
data: [0],
|
||||||
|
},
|
||||||
|
/** 绘制外部圆弧-2 <left-top> */
|
||||||
|
{
|
||||||
|
type: "custom",
|
||||||
|
coordinateSystem: "none",
|
||||||
|
renderItem: (params, api) => {
|
||||||
|
return {
|
||||||
|
type: "arc",
|
||||||
|
shape: {
|
||||||
|
cx: api.getWidth() / 2,
|
||||||
|
cy: api.getHeight() / 2,
|
||||||
|
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.98,
|
||||||
|
startAngle: ((175 + -angle) * Math.PI) / 180,
|
||||||
|
endAngle: ((300 + -angle) * Math.PI) / 180,
|
||||||
|
},
|
||||||
|
style: {
|
||||||
|
fill: "transparent",
|
||||||
|
stroke: "#00E0DB",
|
||||||
|
lineWidth: 2.6,
|
||||||
|
},
|
||||||
|
silent: true,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
data: [0],
|
||||||
|
},
|
||||||
|
/** 绘制外部圆弧-1-开始圆点 <right-bottom> */
|
||||||
|
{
|
||||||
|
type: "custom",
|
||||||
|
coordinateSystem: "none",
|
||||||
|
renderItem: (params, api) => {
|
||||||
|
let x0 = api.getWidth() / 2;
|
||||||
|
let y0 = api.getHeight() / 2;
|
||||||
|
let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.98;
|
||||||
|
return {
|
||||||
|
type: "circle",
|
||||||
|
shape: {
|
||||||
|
/** 角度355° 外弧1开始角度 */
|
||||||
|
cx: x0 + r * Math.cos(((355 + -angle) * Math.PI) / 180),
|
||||||
|
cy: y0 + r * Math.sin(((355 + -angle) * Math.PI) / 180),
|
||||||
|
r: 4,
|
||||||
|
},
|
||||||
|
style: {
|
||||||
|
fill: "#00E0DB",
|
||||||
|
stroke: "#00E0DB",
|
||||||
|
},
|
||||||
|
silent: true,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
data: [0],
|
||||||
|
},
|
||||||
|
/** 绘制外部圆弧-2-开始圆点 <left-top> */
|
||||||
|
{
|
||||||
|
type: "custom",
|
||||||
|
coordinateSystem: "none",
|
||||||
|
renderItem: (params, api) => {
|
||||||
|
let x0 = api.getWidth() / 2;
|
||||||
|
let y0 = api.getHeight() / 2;
|
||||||
|
let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.98;
|
||||||
|
return {
|
||||||
|
type: "circle",
|
||||||
|
shape: {
|
||||||
|
/** 角度175° 外弧2开始角度 */
|
||||||
|
cx: x0 + r * Math.cos(((175 + -angle) * Math.PI) / 180),
|
||||||
|
cy: y0 + r * Math.sin(((175 + -angle) * Math.PI) / 180),
|
||||||
|
r: 4,
|
||||||
|
},
|
||||||
|
style: {
|
||||||
|
fill: "#00E0DB",
|
||||||
|
stroke: "#00E0DB",
|
||||||
|
},
|
||||||
|
silent: true,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
data: [0],
|
||||||
|
},
|
||||||
|
/** 内心圆 */
|
||||||
|
{
|
||||||
|
type: "custom",
|
||||||
|
coordinateSystem: "none",
|
||||||
|
renderItem: (params, api) => {
|
||||||
|
return {
|
||||||
|
type: "circle",
|
||||||
|
shape: {
|
||||||
|
cx: api.getWidth() / 2,
|
||||||
|
cy: api.getHeight() / 2,
|
||||||
|
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.38,
|
||||||
|
startAngle: ((175 + angle) * Math.PI) / 180,
|
||||||
|
endAngle: ((300 + angle) * Math.PI) / 180,
|
||||||
|
},
|
||||||
|
style: {
|
||||||
|
fill: "transparent",
|
||||||
|
stroke: "#00374C80",
|
||||||
|
lineWidth: 2.6,
|
||||||
|
},
|
||||||
|
silent: true,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
data: [0],
|
||||||
|
},
|
||||||
|
/** 饼图 */
|
||||||
|
{
|
||||||
|
name: "已完成",
|
||||||
|
type: "pie",
|
||||||
|
startAngle: 90,
|
||||||
|
z: 0,
|
||||||
|
label: {
|
||||||
|
position: "center",
|
||||||
|
},
|
||||||
|
radius: ["86%", "64%"],
|
||||||
|
silent: true,
|
||||||
|
animation: false, // 关闭饼图动画
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: dataValue,
|
||||||
|
itemStyle: {
|
||||||
|
color: "RGBA(0, 225, 248, 1)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "未完成",
|
||||||
|
value: 100 - dataValue,
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
color: "#003E7A",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
/** 饼图上刻度 */
|
||||||
|
{
|
||||||
|
type: "gauge",
|
||||||
|
center: ["50%", "50%"],
|
||||||
|
radius: "110%", // 错位调整此处
|
||||||
|
startAngle: 0,
|
||||||
|
endAngle: 360,
|
||||||
|
splitNumber: 8,
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
// length: 39,
|
||||||
|
length: "25%",
|
||||||
|
lineStyle: {
|
||||||
|
width: 5,
|
||||||
|
color: "#002837", // 不动
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
};
|
||||||
|
var time;
|
||||||
|
const setChart = () => {
|
||||||
|
var myChart = echarts.init(chart.value);
|
||||||
|
myChart.setOption(data.option);
|
||||||
|
time = setInterval(() => {
|
||||||
|
angle = angle + 2;
|
||||||
|
myChart.setOption(data.option, true);
|
||||||
|
}, 100);
|
||||||
|
};
|
||||||
|
onBeforeUnmount(() => {
|
||||||
|
if (time) {
|
||||||
|
clearInterval(time);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// 使用生命钩子
|
||||||
|
onBeforeMount(() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
getOption();
|
||||||
|
setChart();
|
||||||
|
}, 600);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
|
|
@ -33,6 +33,13 @@ const colors = [
|
||||||
bottom: "rgba(14, 252, 255, .46)",
|
bottom: "rgba(14, 252, 255, .46)",
|
||||||
front: "rgba(14, 252, 255, .66)",
|
front: "rgba(14, 252, 255, .66)",
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
left: "rgba(60, 143, 255, .16)",
|
||||||
|
right: "rgba(60, 143, 255, .6)",
|
||||||
|
top: "rgba(60, 143, 255, 1)",
|
||||||
|
bottom: "rgba(60, 143, 255, .46)",
|
||||||
|
front: "rgba(60, 143, 255, .66)",
|
||||||
|
},
|
||||||
];
|
];
|
||||||
// const valueList = [20, 53, 47, 65, 29, 11, 10];
|
// const valueList = [20, 53, 47, 65, 29, 11, 10];
|
||||||
const data = reactive({
|
const data = reactive({
|
||||||
|
|
@ -41,7 +48,8 @@ const data = reactive({
|
||||||
Max: 20000,
|
Max: 20000,
|
||||||
valueList: [4504, 16086, 6130, 2844, 4967, 179, 1685, 5010],
|
valueList: [4504, 16086, 6130, 2844, 4967, 179, 1685, 5010],
|
||||||
valueList2: [1181, 2177, 3720, 3711, 4642, 1654, 3395, 5552],
|
valueList2: [1181, 2177, 3720, 3711, 4642, 1654, 3395, 5552],
|
||||||
xxname: ["2020", "2021", "2022", "2023"],
|
valueList3: [1181, 2177, 3720, 3711, 4642, 1654, 3395, 5552],
|
||||||
|
xxname: ["1月", "2月", "3月", "4月","5月"],
|
||||||
});
|
});
|
||||||
// 注册5个面图形:左侧、前面、右面、上面、下面
|
// 注册5个面图形:左侧、前面、右面、上面、下面
|
||||||
//c0:左下角，c1：右下角,c2:右上角，c3：左上角
|
//c0:左下角，c1：右下角,c2:右上角，c3：左上角
|
||||||
|
|
@ -55,8 +63,8 @@ const CubeLeft_1 = echarts.graphic.extendShape({
|
||||||
// 会canvas的应该都能看得懂，shape是从custom传入的
|
// 会canvas的应该都能看得懂，shape是从custom传入的
|
||||||
const xAxisPoint = shape.xAxisPoint;
|
const xAxisPoint = shape.xAxisPoint;
|
||||||
const c0 = [shape.x - 40, shape.y];
|
const c0 = [shape.x - 40, shape.y];
|
||||||
const c1 = [shape.x - 27, shape.y - 14];
|
const c1 = [shape.x - 30, shape.y - 10];
|
||||||
const c2 = [xAxisPoint[0] - 27, xAxisPoint[1] - 14];
|
const c2 = [xAxisPoint[0] - 30, xAxisPoint[1] - 10];
|
||||||
const c3 = [xAxisPoint[0] - 40, xAxisPoint[1]];
|
const c3 = [xAxisPoint[0] - 40, xAxisPoint[1]];
|
||||||
ctx
|
ctx
|
||||||
.moveTo(c0[0], c0[1])
|
.moveTo(c0[0], c0[1])
|
||||||
|
|
@ -75,8 +83,8 @@ const CubeFront_1 = echarts.graphic.extendShape({
|
||||||
// 会canvas的应该都能看得懂，shape是从custom传入的
|
// 会canvas的应该都能看得懂，shape是从custom传入的
|
||||||
const xAxisPoint = shape.xAxisPoint;
|
const xAxisPoint = shape.xAxisPoint;
|
||||||
const c0 = [shape.x - 40, shape.y];
|
const c0 = [shape.x - 40, shape.y];
|
||||||
const c1 = [shape.x - 18, shape.y];
|
const c1 = [shape.x - 28, shape.y];
|
||||||
const c2 = [xAxisPoint[0] - 18, xAxisPoint[1]];
|
const c2 = [xAxisPoint[0] - 28, xAxisPoint[1]];
|
||||||
const c3 = [xAxisPoint[0] - 40, xAxisPoint[1]];
|
const c3 = [xAxisPoint[0] - 40, xAxisPoint[1]];
|
||||||
ctx
|
ctx
|
||||||
.moveTo(c0[0], c0[1])
|
.moveTo(c0[0], c0[1])
|
||||||
|
|
@ -93,10 +101,10 @@ const CubeRight_1 = echarts.graphic.extendShape({
|
||||||
},
|
},
|
||||||
buildPath: function (ctx, shape) {
|
buildPath: function (ctx, shape) {
|
||||||
const xAxisPoint = shape.xAxisPoint;
|
const xAxisPoint = shape.xAxisPoint;
|
||||||
const c0 = [shape.x - 18, shape.y];
|
const c0 = [shape.x - 28, shape.y];
|
||||||
const c1 = [shape.x - 5, shape.y - 14];
|
const c1 = [shape.x - 17, shape.y - 10];
|
||||||
const c2 = [xAxisPoint[0] - 5, xAxisPoint[1] - 14];
|
const c2 = [xAxisPoint[0] - 18, xAxisPoint[1] - 10];
|
||||||
const c3 = [xAxisPoint[0] - 18, xAxisPoint[1]];
|
const c3 = [xAxisPoint[0] - 28, xAxisPoint[1]];
|
||||||
ctx
|
ctx
|
||||||
.moveTo(c0[0], c0[1])
|
.moveTo(c0[0], c0[1])
|
||||||
.lineTo(c1[0], c1[1])
|
.lineTo(c1[0], c1[1])
|
||||||
|
|
@ -112,9 +120,9 @@ const CubeTop_1 = echarts.graphic.extendShape({
|
||||||
},
|
},
|
||||||
buildPath: function (ctx, shape) {
|
buildPath: function (ctx, shape) {
|
||||||
const c0 = [shape.x - 40, shape.y];
|
const c0 = [shape.x - 40, shape.y];
|
||||||
const c1 = [shape.x - 18, shape.y];
|
const c1 = [shape.x - 28, shape.y];
|
||||||
const c2 = [shape.x - 5, shape.y - 14];
|
const c2 = [shape.x - 18, shape.y - 10];
|
||||||
const c3 = [shape.x - 27, shape.y - 14];
|
const c3 = [shape.x - 30, shape.y - 10];
|
||||||
ctx
|
ctx
|
||||||
.moveTo(c0[0], c0[1])
|
.moveTo(c0[0], c0[1])
|
||||||
.lineTo(c1[0], c1[1])
|
.lineTo(c1[0], c1[1])
|
||||||
|
|
@ -133,9 +141,9 @@ const CubeBottom_1 = echarts.graphic.extendShape({
|
||||||
const xAxisPoint = shape.xAxisPoint;
|
const xAxisPoint = shape.xAxisPoint;
|
||||||
|
|
||||||
const c0 = [xAxisPoint[0] - 40, xAxisPoint[1]];
|
const c0 = [xAxisPoint[0] - 40, xAxisPoint[1]];
|
||||||
const c1 = [xAxisPoint[0] - 18, xAxisPoint[1]];
|
const c1 = [xAxisPoint[0] - 28, xAxisPoint[1]];
|
||||||
const c2 = [xAxisPoint[0] - 5, xAxisPoint[1] - 14];
|
const c2 = [xAxisPoint[0] - 18, xAxisPoint[1] - 10];
|
||||||
const c3 = [xAxisPoint[0] - 27, xAxisPoint[1] - 14];
|
const c3 = [xAxisPoint[0] - 30, xAxisPoint[1] - 10];
|
||||||
|
|
||||||
ctx
|
ctx
|
||||||
.moveTo(c0[0], c0[1])
|
.moveTo(c0[0], c0[1])
|
||||||
|
|
@ -160,10 +168,10 @@ const CubeLeft_2 = echarts.graphic.extendShape({
|
||||||
buildPath: function (ctx, shape) {
|
buildPath: function (ctx, shape) {
|
||||||
// 会canvas的应该都能看得懂，shape是从custom传入的
|
// 会canvas的应该都能看得懂，shape是从custom传入的
|
||||||
const xAxisPoint = shape.xAxisPoint;
|
const xAxisPoint = shape.xAxisPoint;
|
||||||
const c0 = [shape.x - 0, shape.y];
|
const c0 = [shape.x - 15, shape.y];
|
||||||
const c1 = [shape.x + 13, shape.y - 14];
|
const c1 = [shape.x - 2, shape.y - 10];
|
||||||
const c2 = [xAxisPoint[0] + 13, xAxisPoint[1] - 14];
|
const c2 = [xAxisPoint[0] - 2, xAxisPoint[1] - 10];
|
||||||
const c3 = [xAxisPoint[0] - 0, xAxisPoint[1]];
|
const c3 = [xAxisPoint[0] - 15, xAxisPoint[1]];
|
||||||
ctx
|
ctx
|
||||||
.moveTo(c0[0], c0[1])
|
.moveTo(c0[0], c0[1])
|
||||||
.lineTo(c1[0], c1[1])
|
.lineTo(c1[0], c1[1])
|
||||||
|
|
@ -180,10 +188,10 @@ const CubeFront_2 = echarts.graphic.extendShape({
|
||||||
buildPath: function (ctx, shape) {
|
buildPath: function (ctx, shape) {
|
||||||
// 会canvas的应该都能看得懂，shape是从custom传入的
|
// 会canvas的应该都能看得懂，shape是从custom传入的
|
||||||
const xAxisPoint = shape.xAxisPoint;
|
const xAxisPoint = shape.xAxisPoint;
|
||||||
const c0 = [shape.x - 0, shape.y];
|
const c0 = [shape.x - 15, shape.y];
|
||||||
const c1 = [shape.x + 22, shape.y];
|
const c1 = [shape.x -3, shape.y];
|
||||||
const c2 = [xAxisPoint[0] + 22, xAxisPoint[1]];
|
const c2 = [xAxisPoint[0] -3, xAxisPoint[1]];
|
||||||
const c3 = [xAxisPoint[0] - 0, xAxisPoint[1]];
|
const c3 = [xAxisPoint[0] - 15, xAxisPoint[1]];
|
||||||
ctx
|
ctx
|
||||||
.moveTo(c0[0], c0[1])
|
.moveTo(c0[0], c0[1])
|
||||||
.lineTo(c1[0], c1[1])
|
.lineTo(c1[0], c1[1])
|
||||||
|
|
@ -199,10 +207,10 @@ const CubeRight_2 = echarts.graphic.extendShape({
|
||||||
},
|
},
|
||||||
buildPath: function (ctx, shape) {
|
buildPath: function (ctx, shape) {
|
||||||
const xAxisPoint = shape.xAxisPoint;
|
const xAxisPoint = shape.xAxisPoint;
|
||||||
const c0 = [shape.x + 22, shape.y];
|
const c0 = [shape.x -3, shape.y];
|
||||||
const c1 = [shape.x + 35, shape.y - 14];
|
const c1 = [shape.x + 10, shape.y - 10];
|
||||||
const c2 = [xAxisPoint[0] + 35, xAxisPoint[1] - 14];
|
const c2 = [xAxisPoint[0] + 10, xAxisPoint[1] - 10];
|
||||||
const c3 = [xAxisPoint[0] + 22, xAxisPoint[1]];
|
const c3 = [xAxisPoint[0] - 3, xAxisPoint[1]];
|
||||||
ctx
|
ctx
|
||||||
.moveTo(c0[0], c0[1])
|
.moveTo(c0[0], c0[1])
|
||||||
.lineTo(c1[0], c1[1])
|
.lineTo(c1[0], c1[1])
|
||||||
|
|
@ -217,10 +225,10 @@ const CubeTop_2 = echarts.graphic.extendShape({
|
||||||
y: 0,
|
y: 0,
|
||||||
},
|
},
|
||||||
buildPath: function (ctx, shape) {
|
buildPath: function (ctx, shape) {
|
||||||
const c0 = [shape.x - 0, shape.y];
|
const c0 = [shape.x - 15, shape.y];
|
||||||
const c1 = [shape.x + 22, shape.y];
|
const c1 = [shape.x - 3, shape.y];
|
||||||
const c2 = [shape.x + 35, shape.y - 14];
|
const c2 = [shape.x + 10, shape.y - 10];
|
||||||
const c3 = [shape.x + 13, shape.y - 14];
|
const c3 = [shape.x - 2, shape.y - 10];
|
||||||
ctx
|
ctx
|
||||||
.moveTo(c0[0], c0[1])
|
.moveTo(c0[0], c0[1])
|
||||||
.lineTo(c1[0], c1[1])
|
.lineTo(c1[0], c1[1])
|
||||||
|
|
@ -238,10 +246,10 @@ const CubeBottom_2 = echarts.graphic.extendShape({
|
||||||
// 会canvas的应该都能看得懂，shape是从custom传入的
|
// 会canvas的应该都能看得懂，shape是从custom传入的
|
||||||
const xAxisPoint = shape.xAxisPoint;
|
const xAxisPoint = shape.xAxisPoint;
|
||||||
|
|
||||||
const c0 = [xAxisPoint[0] - 0, xAxisPoint[1]];
|
const c0 = [xAxisPoint[0] - 15, xAxisPoint[1]];
|
||||||
const c1 = [xAxisPoint[0] + 22, xAxisPoint[1]];
|
const c1 = [xAxisPoint[0] -3, xAxisPoint[1]];
|
||||||
const c2 = [xAxisPoint[0] + 35, xAxisPoint[1] - 14];
|
const c2 = [xAxisPoint[0] + 10, xAxisPoint[1] - 10];
|
||||||
const c3 = [xAxisPoint[0] + 13, xAxisPoint[1] - 14];
|
const c3 = [xAxisPoint[0] -2, xAxisPoint[1] - 10];
|
||||||
|
|
||||||
ctx
|
ctx
|
||||||
.moveTo(c0[0], c0[1])
|
.moveTo(c0[0], c0[1])
|
||||||
|
|
@ -259,15 +267,123 @@ echarts.graphic.registerShape("CubeTop_2", CubeTop_2);
|
||||||
echarts.graphic.registerShape("CubeBottom_2", CubeBottom_2);
|
echarts.graphic.registerShape("CubeBottom_2", CubeBottom_2);
|
||||||
|
|
||||||
// ------------------------------
|
// ------------------------------
|
||||||
|
const CubeLeft_3 = echarts.graphic.extendShape({
|
||||||
|
shape: {
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
},
|
||||||
|
buildPath: function (ctx, shape) {
|
||||||
|
// 会canvas的应该都能看得懂，shape是从custom传入的
|
||||||
|
const xAxisPoint = shape.xAxisPoint;
|
||||||
|
const c0 = [shape.x + 15, shape.y];
|
||||||
|
const c1 = [shape.x + 28, shape.y - 10];
|
||||||
|
const c2 = [xAxisPoint[0] + 28, xAxisPoint[1] - 10];
|
||||||
|
const c3 = [xAxisPoint[0] + 15, xAxisPoint[1]];
|
||||||
|
ctx
|
||||||
|
.moveTo(c0[0], c0[1])
|
||||||
|
.lineTo(c1[0], c1[1])
|
||||||
|
.lineTo(c2[0], c2[1])
|
||||||
|
.lineTo(c3[0], c3[1])
|
||||||
|
.closePath();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const CubeFront_3 = echarts.graphic.extendShape({
|
||||||
|
shape: {
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
},
|
||||||
|
buildPath: function (ctx, shape) {
|
||||||
|
// 会canvas的应该都能看得懂，shape是从custom传入的
|
||||||
|
const xAxisPoint = shape.xAxisPoint;
|
||||||
|
const c0 = [shape.x + 15, shape.y];
|
||||||
|
const c1 = [shape.x + 27, shape.y];
|
||||||
|
const c2 = [xAxisPoint[0] + 27, xAxisPoint[1]];
|
||||||
|
const c3 = [xAxisPoint[0] + 15, xAxisPoint[1]];
|
||||||
|
ctx
|
||||||
|
.moveTo(c0[0], c0[1])
|
||||||
|
.lineTo(c1[0], c1[1])
|
||||||
|
.lineTo(c2[0], c2[1])
|
||||||
|
.lineTo(c3[0], c3[1])
|
||||||
|
.closePath();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const CubeRight_3 = echarts.graphic.extendShape({
|
||||||
|
shape: {
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
},
|
||||||
|
buildPath: function (ctx, shape) {
|
||||||
|
const xAxisPoint = shape.xAxisPoint;
|
||||||
|
const c0 = [shape.x + 27, shape.y];
|
||||||
|
const c1 = [shape.x + 40, shape.y - 10];
|
||||||
|
const c2 = [xAxisPoint[0] + 40, xAxisPoint[1] - 10];
|
||||||
|
const c3 = [xAxisPoint[0] + 27, xAxisPoint[1]];
|
||||||
|
ctx
|
||||||
|
.moveTo(c0[0], c0[1])
|
||||||
|
.lineTo(c1[0], c1[1])
|
||||||
|
.lineTo(c2[0], c2[1])
|
||||||
|
.lineTo(c3[0], c3[1])
|
||||||
|
.closePath();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const CubeTop_3 = echarts.graphic.extendShape({
|
||||||
|
shape: {
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
},
|
||||||
|
buildPath: function (ctx, shape) {
|
||||||
|
const c0 = [shape.x + 15, shape.y];
|
||||||
|
const c1 = [shape.x + 27, shape.y];
|
||||||
|
const c2 = [shape.x + 40, shape.y - 10];
|
||||||
|
const c3 = [shape.x + 28, shape.y - 10];
|
||||||
|
ctx
|
||||||
|
.moveTo(c0[0], c0[1])
|
||||||
|
.lineTo(c1[0], c1[1])
|
||||||
|
.lineTo(c2[0], c2[1])
|
||||||
|
.lineTo(c3[0], c3[1])
|
||||||
|
.closePath();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const CubeBottom_3 = echarts.graphic.extendShape({
|
||||||
|
shape: {
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
},
|
||||||
|
buildPath: function (ctx, shape) {
|
||||||
|
// 会canvas的应该都能看得懂，shape是从custom传入的
|
||||||
|
const xAxisPoint = shape.xAxisPoint;
|
||||||
|
|
||||||
|
const c0 = [xAxisPoint[0] + 15, xAxisPoint[1]];
|
||||||
|
const c1 = [xAxisPoint[0] + 27, xAxisPoint[1]];
|
||||||
|
const c2 = [xAxisPoint[0] + 40, xAxisPoint[1] - 10];
|
||||||
|
const c3 = [xAxisPoint[0] + 28, xAxisPoint[1] - 10];
|
||||||
|
|
||||||
|
ctx
|
||||||
|
.moveTo(c0[0], c0[1])
|
||||||
|
.lineTo(c1[0], c1[1])
|
||||||
|
.lineTo(c2[0], c2[1])
|
||||||
|
.lineTo(c3[0], c3[1])
|
||||||
|
.closePath();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
echarts.graphic.registerShape("CubeLeft_3", CubeLeft_3);
|
||||||
|
echarts.graphic.registerShape("CubeFront_3", CubeFront_3);
|
||||||
|
echarts.graphic.registerShape("CubeRight_3", CubeRight_3);
|
||||||
|
echarts.graphic.registerShape("CubeTop_3", CubeTop_3);
|
||||||
|
echarts.graphic.registerShape("CubeBottom_3", CubeBottom_3);
|
||||||
|
|
||||||
|
//--------------------------------
|
||||||
const getOption = () => {
|
const getOption = () => {
|
||||||
data.option = {
|
data.option = {
|
||||||
legend: {
|
legend: {
|
||||||
data: [
|
data: [
|
||||||
"适龄生育妇女",
|
"房屋数量",
|
||||||
"育龄妇女",
|
"入住数量",
|
||||||
|
"保障性租赁住房"
|
||||||
],
|
],
|
||||||
top: "0%",
|
top: "0%",
|
||||||
right: "30%",
|
right: "10%",
|
||||||
textStyle: {
|
textStyle: {
|
||||||
fontSize: 16,
|
fontSize: 16,
|
||||||
color: "#ffffff",
|
color: "#ffffff",
|
||||||
|
|
@ -275,7 +391,7 @@ const getOption = () => {
|
||||||
},
|
},
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: "axis",
|
trigger: "axis",
|
||||||
formatter: "{b0}:</br>{a0}:{c0}</br>{a1}:{c1}",
|
formatter: "{b0}:</br>{a0}:{c0}</br>{a1}:{c1}</br>{a2}:{c2}",
|
||||||
},
|
},
|
||||||
grid: {
|
grid: {
|
||||||
left: 0,
|
left: 0,
|
||||||
|
|
@ -353,7 +469,7 @@ const getOption = () => {
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
xAxisIndex: 0,
|
xAxisIndex: 0,
|
||||||
name: "适龄生育妇女",
|
name: "房屋数量",
|
||||||
type: "custom",
|
type: "custom",
|
||||||
renderItem: (params, api) => {
|
renderItem: (params, api) => {
|
||||||
const location = api.coord([api.value(0), api.value(1)]);
|
const location = api.coord([api.value(0), api.value(1)]);
|
||||||
|
|
@ -446,7 +562,7 @@ const getOption = () => {
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
xAxisIndex: 0,
|
xAxisIndex: 0,
|
||||||
name: "育龄妇女",
|
name: "入住数量",
|
||||||
type: "custom",
|
type: "custom",
|
||||||
renderItem: (params, api) => {
|
renderItem: (params, api) => {
|
||||||
const location = api.coord([api.value(0), api.value(1)]);
|
const location = api.coord([api.value(0), api.value(1)]);
|
||||||
|
|
@ -537,44 +653,98 @@ const getOption = () => {
|
||||||
},
|
},
|
||||||
data: data.valueList2,
|
data: data.valueList2,
|
||||||
},
|
},
|
||||||
//顶部字体
|
|
||||||
{
|
{
|
||||||
type: "bar",
|
xAxisIndex: 0,
|
||||||
xAxisIndex: 1,
|
name: "保障性租赁住房",
|
||||||
label: {
|
type: "custom",
|
||||||
|
renderItem: (params, api) => {
|
||||||
|
const location = api.coord([api.value(0), api.value(1)]);
|
||||||
|
|
||||||
|
return {
|
||||||
|
type: "group",
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
type: "CubeBottom_3",
|
||||||
|
shape: {
|
||||||
|
api,
|
||||||
|
xValue: api.value(0),
|
||||||
|
yValue: api.value(1),
|
||||||
|
x: location[0],
|
||||||
|
y: location[1],
|
||||||
|
xAxisPoint: api.coord([api.value(0), 0]),
|
||||||
|
},
|
||||||
|
style: {
|
||||||
|
fill: colors[2]["bottom"],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "CubeLeft_3",
|
||||||
|
shape: {
|
||||||
|
api,
|
||||||
|
xValue: api.value(0),
|
||||||
|
yValue: api.value(1),
|
||||||
|
x: location[0],
|
||||||
|
y: location[1],
|
||||||
|
xAxisPoint: api.coord([api.value(0), 0]),
|
||||||
|
},
|
||||||
|
style: {
|
||||||
|
fill: colors[2]["left"],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "CubeFront_3",
|
||||||
|
shape: {
|
||||||
|
api,
|
||||||
|
xValue: api.value(0),
|
||||||
|
yValue: api.value(1),
|
||||||
|
x: location[0],
|
||||||
|
y: location[1],
|
||||||
|
xAxisPoint: api.coord([api.value(0), 0]),
|
||||||
|
},
|
||||||
|
style: {
|
||||||
|
fill: colors[2]["front"],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "CubeRight_3",
|
||||||
|
shape: {
|
||||||
|
api,
|
||||||
|
xValue: api.value(0),
|
||||||
|
yValue: api.value(1),
|
||||||
|
x: location[0],
|
||||||
|
y: location[1],
|
||||||
|
xAxisPoint: api.coord([api.value(0), 0]),
|
||||||
|
},
|
||||||
|
style: {
|
||||||
|
fill: colors[2]["right"],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "CubeTop_3",
|
||||||
|
shape: {
|
||||||
|
api,
|
||||||
|
xValue: api.value(0),
|
||||||
|
yValue: api.value(1),
|
||||||
|
x: location[0],
|
||||||
|
y: location[1],
|
||||||
|
xAxisPoint: api.coord([api.value(0), 0]),
|
||||||
|
},
|
||||||
|
style: {
|
||||||
|
fill: colors[2]["top"],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
//设置图例颜色
|
||||||
|
itemStyle: {
|
||||||
show: true,
|
show: true,
|
||||||
fontSize: 18,
|
color: {
|
||||||
position: "top",
|
type: "linear",
|
||||||
color: "#ffffff",
|
colorStops: [{ offset: 1, color: "rgba(60, 143, 255, 1)" }],
|
||||||
formatter: function (data) {
|
|
||||||
return data.value - 5;
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
itemStyle: {
|
data: data.valueList3,
|
||||||
color: "rgba(221, 242, 255, 0)",
|
|
||||||
},
|
|
||||||
|
|
||||||
data: data.valueList.map((item) => parseInt(item) + 5),
|
|
||||||
barWidth: 30,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: "bar",
|
|
||||||
xAxisIndex: 1,
|
|
||||||
label: {
|
|
||||||
show: true,
|
|
||||||
fontSize: 18,
|
|
||||||
position: "top",
|
|
||||||
color: "#ffffff",
|
|
||||||
formatter: function (data) {
|
|
||||||
return data.value - 5;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
itemStyle: {
|
|
||||||
color: "rgba(221, 242, 255, 0)",
|
|
||||||
},
|
|
||||||
|
|
||||||
data: data.valueList2.map((item) => parseInt(item) + 5),
|
|
||||||
barWidth: 20,
|
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,296 @@
|
||||||
|
<template>
|
||||||
|
<div ref="chart" style="width: 100%; height: 180px"></div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { onMounted, reactive, ref, onBeforeMount, onBeforeUnmount } from "vue";
|
||||||
|
// 局部引入echarts核心模块
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
const props = defineProps({
|
||||||
|
list: {
|
||||||
|
type: Array,
|
||||||
|
default: () => {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const data = reactive({
|
||||||
|
option: {},
|
||||||
|
});
|
||||||
|
let angle = 0; // 角度
|
||||||
|
let dataValue = 86;
|
||||||
|
const chart = ref(); // 创建DOM引用
|
||||||
|
const getOption = () => {
|
||||||
|
data.option = {
|
||||||
|
title: {
|
||||||
|
text: `{v|${dataValue}}{unit|%}`,
|
||||||
|
x: "center",
|
||||||
|
y: "center",
|
||||||
|
textStyle: {
|
||||||
|
rich: {
|
||||||
|
v: {
|
||||||
|
fontSize: 25,
|
||||||
|
color: "#fff",
|
||||||
|
},
|
||||||
|
unit: {
|
||||||
|
fontSize: 25,
|
||||||
|
color: "#fff",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
/** 绘制内部圆弧-1 <right-top> */
|
||||||
|
{
|
||||||
|
type: "custom",
|
||||||
|
coordinateSystem: "none",
|
||||||
|
renderItem: (params, api) => {
|
||||||
|
return {
|
||||||
|
type: "arc",
|
||||||
|
shape: {
|
||||||
|
cx: api.getWidth() / 2,
|
||||||
|
cy: api.getHeight() / 2,
|
||||||
|
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.92,
|
||||||
|
startAngle: ((270 + angle) * Math.PI) / 180,
|
||||||
|
endAngle: ((360 + angle) * Math.PI) / 180,
|
||||||
|
},
|
||||||
|
style: {
|
||||||
|
fill: "transparent",
|
||||||
|
stroke: "#008BFF",
|
||||||
|
lineWidth: 2,
|
||||||
|
},
|
||||||
|
silent: true,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
data: [0],
|
||||||
|
},
|
||||||
|
/** 绘制内部圆弧-2 <left-bottom> */
|
||||||
|
{
|
||||||
|
type: "custom",
|
||||||
|
coordinateSystem: "none",
|
||||||
|
renderItem: (params, api) => {
|
||||||
|
return {
|
||||||
|
type: "arc",
|
||||||
|
shape: {
|
||||||
|
cx: api.getWidth() / 2,
|
||||||
|
cy: api.getHeight() / 2,
|
||||||
|
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.92,
|
||||||
|
startAngle: ((90 + angle) * Math.PI) / 180,
|
||||||
|
endAngle: ((180 + angle) * Math.PI) / 180,
|
||||||
|
},
|
||||||
|
style: {
|
||||||
|
fill: "transparent",
|
||||||
|
stroke: "#008BFF",
|
||||||
|
lineWidth: 2,
|
||||||
|
},
|
||||||
|
silent: true,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
data: [0],
|
||||||
|
},
|
||||||
|
/** 绘制外部圆弧-1 <right-bottom> */
|
||||||
|
{
|
||||||
|
type: "custom",
|
||||||
|
coordinateSystem: "none",
|
||||||
|
renderItem: (params, api) => {
|
||||||
|
return {
|
||||||
|
type: "arc",
|
||||||
|
shape: {
|
||||||
|
cx: api.getWidth() / 2,
|
||||||
|
cy: api.getHeight() / 2,
|
||||||
|
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.98,
|
||||||
|
startAngle: ((355 + -angle) * Math.PI) / 180,
|
||||||
|
endAngle: ((120 + -angle) * Math.PI) / 180,
|
||||||
|
},
|
||||||
|
style: {
|
||||||
|
fill: "transparent",
|
||||||
|
stroke: "#008BFF",
|
||||||
|
lineWidth: 2.6,
|
||||||
|
},
|
||||||
|
silent: true,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
data: [0],
|
||||||
|
},
|
||||||
|
/** 绘制外部圆弧-2 <left-top> */
|
||||||
|
{
|
||||||
|
type: "custom",
|
||||||
|
coordinateSystem: "none",
|
||||||
|
renderItem: (params, api) => {
|
||||||
|
return {
|
||||||
|
type: "arc",
|
||||||
|
shape: {
|
||||||
|
cx: api.getWidth() / 2,
|
||||||
|
cy: api.getHeight() / 2,
|
||||||
|
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.98,
|
||||||
|
startAngle: ((175 + -angle) * Math.PI) / 180,
|
||||||
|
endAngle: ((300 + -angle) * Math.PI) / 180,
|
||||||
|
},
|
||||||
|
style: {
|
||||||
|
fill: "transparent",
|
||||||
|
stroke: "#008BFF",
|
||||||
|
lineWidth: 2.6,
|
||||||
|
},
|
||||||
|
silent: true,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
data: [0],
|
||||||
|
},
|
||||||
|
/** 绘制外部圆弧-1-开始圆点 <right-bottom> */
|
||||||
|
{
|
||||||
|
type: "custom",
|
||||||
|
coordinateSystem: "none",
|
||||||
|
renderItem: (params, api) => {
|
||||||
|
let x0 = api.getWidth() / 2;
|
||||||
|
let y0 = api.getHeight() / 2;
|
||||||
|
let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.98;
|
||||||
|
return {
|
||||||
|
type: "circle",
|
||||||
|
shape: {
|
||||||
|
/** 角度355° 外弧1开始角度 */
|
||||||
|
cx: x0 + r * Math.cos(((355 + -angle) * Math.PI) / 180),
|
||||||
|
cy: y0 + r * Math.sin(((355 + -angle) * Math.PI) / 180),
|
||||||
|
r: 4,
|
||||||
|
},
|
||||||
|
style: {
|
||||||
|
fill: "#008BFF",
|
||||||
|
stroke: "#008BFF",
|
||||||
|
},
|
||||||
|
silent: true,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
data: [0],
|
||||||
|
},
|
||||||
|
/** 绘制外部圆弧-2-开始圆点 <left-top> */
|
||||||
|
{
|
||||||
|
type: "custom",
|
||||||
|
coordinateSystem: "none",
|
||||||
|
renderItem: (params, api) => {
|
||||||
|
let x0 = api.getWidth() / 2;
|
||||||
|
let y0 = api.getHeight() / 2;
|
||||||
|
let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.98;
|
||||||
|
return {
|
||||||
|
type: "circle",
|
||||||
|
shape: {
|
||||||
|
/** 角度175° 外弧2开始角度 */
|
||||||
|
cx: x0 + r * Math.cos(((175 + -angle) * Math.PI) / 180),
|
||||||
|
cy: y0 + r * Math.sin(((175 + -angle) * Math.PI) / 180),
|
||||||
|
r: 4,
|
||||||
|
},
|
||||||
|
style: {
|
||||||
|
fill: "#008BFF",
|
||||||
|
stroke: "#008BFF",
|
||||||
|
},
|
||||||
|
silent: true,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
data: [0],
|
||||||
|
},
|
||||||
|
/** 内心圆 */
|
||||||
|
{
|
||||||
|
type: "custom",
|
||||||
|
coordinateSystem: "none",
|
||||||
|
renderItem: (params, api) => {
|
||||||
|
return {
|
||||||
|
type: "circle",
|
||||||
|
shape: {
|
||||||
|
cx: api.getWidth() / 2,
|
||||||
|
cy: api.getHeight() / 2,
|
||||||
|
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.38,
|
||||||
|
startAngle: ((175 + angle) * Math.PI) / 180,
|
||||||
|
endAngle: ((300 + angle) * Math.PI) / 180,
|
||||||
|
},
|
||||||
|
style: {
|
||||||
|
fill: "transparent",
|
||||||
|
stroke: "#00374C80",
|
||||||
|
lineWidth: 2.6,
|
||||||
|
},
|
||||||
|
silent: true,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
data: [0],
|
||||||
|
},
|
||||||
|
/** 饼图 */
|
||||||
|
{
|
||||||
|
name: "已完成",
|
||||||
|
type: "pie",
|
||||||
|
startAngle: 90,
|
||||||
|
z: 0,
|
||||||
|
label: {
|
||||||
|
position: "center",
|
||||||
|
},
|
||||||
|
radius: ["86%", "64%"],
|
||||||
|
silent: true,
|
||||||
|
animation: false, // 关闭饼图动画
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: dataValue,
|
||||||
|
itemStyle: {
|
||||||
|
color: "RGBA(0, 139, 255, 1)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "未完成",
|
||||||
|
value: 100 - dataValue,
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
color: "#003E7A",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
/** 饼图上刻度 */
|
||||||
|
{
|
||||||
|
type: "gauge",
|
||||||
|
center: ["50%", "50%"],
|
||||||
|
radius: "110%", // 错位调整此处
|
||||||
|
startAngle: 0,
|
||||||
|
endAngle: 360,
|
||||||
|
splitNumber: 8,
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
// length: 39,
|
||||||
|
length: "25%",
|
||||||
|
lineStyle: {
|
||||||
|
width: 5,
|
||||||
|
color: "#002837", // 不动
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
};
|
||||||
|
var time;
|
||||||
|
const setChart = () => {
|
||||||
|
var myChart = echarts.init(chart.value);
|
||||||
|
myChart.setOption(data.option);
|
||||||
|
time = setInterval(() => {
|
||||||
|
angle = angle + 2;
|
||||||
|
myChart.setOption(data.option, true);
|
||||||
|
}, 100);
|
||||||
|
};
|
||||||
|
onBeforeUnmount(() => {
|
||||||
|
if (time) {
|
||||||
|
clearInterval(time);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// 使用生命钩子
|
||||||
|
onBeforeMount(() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
getOption();
|
||||||
|
setChart();
|
||||||
|
}, 600);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { onMounted, reactive, ref ,onBeforeMount } from "vue";
|
import { onMounted, reactive, ref, onBeforeMount } from "vue";
|
||||||
// 局部引入echarts核心模块
|
// 局部引入echarts核心模块
|
||||||
import * as echarts from "echarts";
|
import * as echarts from "echarts";
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
|
|
@ -31,87 +31,12 @@ const data = reactive({
|
||||||
const chart = ref(); // 创建DOM引用
|
const chart = ref(); // 创建DOM引用
|
||||||
|
|
||||||
//内圈数据
|
//内圈数据
|
||||||
var data2 = [
|
const data2 = ref([
|
||||||
{
|
|
||||||
value: data.dataList[0].value,
|
]);
|
||||||
name: "2.0收件数",
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [
|
|
||||||
{
|
|
||||||
offset: 0,
|
|
||||||
color: "rgba(255, 224, 0, 0.29)",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 1,
|
|
||||||
color: "rgba(255, 224, 0, 1)",
|
|
||||||
},
|
|
||||||
]),
|
|
||||||
shadowColor: "rgba(1,1,1,0.5)",
|
|
||||||
shadowBlur: 1,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: data.dataList[1].value - data.dataList[0].value,
|
|
||||||
name: "",
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
color: "rgba(255, 224, 0, 0.1)", // 未完成的圆环的颜色
|
|
||||||
label: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
labelLine: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
emphasis: {
|
|
||||||
color: "rgba(255, 224, 0, 0.1)", // 未完成的圆环的颜色
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: data.dataList[1].value,
|
|
||||||
name: "总收件数",
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
color: "rgba(0,0,0,0)",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
];
|
|
||||||
//外圈数据
|
//外圈数据
|
||||||
const data1 = [
|
const data1 = ref([
|
||||||
{
|
]);
|
||||||
value: data.dataList[1].value,
|
|
||||||
name: "",
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
borderWidth: 1,
|
|
||||||
borderColor: "rgba(193, 229, 255, .1)",
|
|
||||||
color: new echarts.graphic.LinearGradient(1, 1, 1, 0, [
|
|
||||||
{
|
|
||||||
offset: 1,
|
|
||||||
color: "rgba(127, 242, 255, .2)",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 0,
|
|
||||||
color: "rgba(109, 195, 255, 0)",
|
|
||||||
},
|
|
||||||
]),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: data.dataList[1].value,
|
|
||||||
name: "",
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
color: "rgba(0,0,0,0)",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const getOption = () => {
|
const getOption = () => {
|
||||||
data.option = {
|
data.option = {
|
||||||
|
|
@ -146,7 +71,7 @@ const getOption = () => {
|
||||||
title: [
|
title: [
|
||||||
{
|
{
|
||||||
text: `${data.percent}%`,
|
text: `${data.percent}%`,
|
||||||
right: "18%",
|
right: "38%",
|
||||||
bottom: "40%",
|
bottom: "40%",
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: "#ffffff",
|
color: "#ffffff",
|
||||||
|
|
@ -160,7 +85,7 @@ const getOption = () => {
|
||||||
type: "pie",
|
type: "pie",
|
||||||
hoverAnimation: false,
|
hoverAnimation: false,
|
||||||
radius: ["60%", "80%"],
|
radius: ["60%", "80%"],
|
||||||
center: ["53%", "54%"],
|
center: ["50%", "54%"],
|
||||||
startAngle: 180,
|
startAngle: 180,
|
||||||
label: {
|
label: {
|
||||||
normal: {
|
normal: {
|
||||||
|
|
@ -168,11 +93,11 @@ const getOption = () => {
|
||||||
position: "center",
|
position: "center",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
data: data2,
|
data: data2.value,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "pie",
|
type: "pie",
|
||||||
center: ["53%", "54%"],
|
center: ["50%", "54%"],
|
||||||
radius: ["80%", "95%"],
|
radius: ["80%", "95%"],
|
||||||
hoverAnimation: false,
|
hoverAnimation: false,
|
||||||
startAngle: 180,
|
startAngle: 180,
|
||||||
|
|
@ -182,12 +107,93 @@ const getOption = () => {
|
||||||
position: "center",
|
position: "center",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
data: data1,
|
data: data1.value,
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
const change = () => {
|
||||||
|
data2.value = [
|
||||||
|
{
|
||||||
|
value: data.dataList[0].value,
|
||||||
|
name: "2.0收件数",
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: "rgba(255, 224, 0, 0.29)",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: "rgba(255, 224, 0, 1)",
|
||||||
|
},
|
||||||
|
]),
|
||||||
|
shadowColor: "rgba(1,1,1,0.5)",
|
||||||
|
shadowBlur: 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: data.dataList[1].value - data.dataList[0].value,
|
||||||
|
name: "",
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: "rgba(255, 224, 0, 0.1)", // 未完成的圆环的颜色
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
color: "rgba(255, 224, 0, 0.1)", // 未完成的圆环的颜色
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: data.dataList[1].value,
|
||||||
|
name: "总收件数",
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: "rgba(0,0,0,0)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
data1.value = [
|
||||||
|
{
|
||||||
|
value: data.dataList[1].value,
|
||||||
|
name: "",
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: "rgba(193, 229, 255, .1)",
|
||||||
|
color: new echarts.graphic.LinearGradient(1, 1, 1, 0, [
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: "rgba(127, 242, 255, .2)",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: "rgba(109, 195, 255, 0)",
|
||||||
|
},
|
||||||
|
]),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: data.dataList[1].value,
|
||||||
|
name: "",
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: "rgba(0,0,0,0)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
};
|
||||||
const setChart = () => {
|
const setChart = () => {
|
||||||
var myChart = echarts.init(chart.value);
|
var myChart = echarts.init(chart.value);
|
||||||
myChart.setOption(data.option);
|
myChart.setOption(data.option);
|
||||||
|
|
@ -196,14 +202,14 @@ const setChart = () => {
|
||||||
// 使用生命钩子
|
// 使用生命钩子
|
||||||
onBeforeMount(() => {
|
onBeforeMount(() => {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
data.dataList[0].value=props.list.finish;
|
data.dataList[0].value = props.list.finish;
|
||||||
data.dataList[1].value=props.list.total;
|
data.dataList[1].value = props.list.total;
|
||||||
data.percent=props.list.percent;
|
data.percent = props.list.percent;
|
||||||
|
change();
|
||||||
getOption();
|
getOption();
|
||||||
setChart();
|
setChart();
|
||||||
}, 600);
|
}, 600);
|
||||||
});
|
});
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped></style>
|
<style scoped></style>
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { onMounted, reactive, ref ,onBeforeMount } from "vue";
|
import { onMounted, reactive, ref, onBeforeMount } from "vue";
|
||||||
// 局部引入echarts核心模块
|
// 局部引入echarts核心模块
|
||||||
import * as echarts from "echarts";
|
import * as echarts from "echarts";
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
|
|
@ -31,91 +31,12 @@ const data = reactive({
|
||||||
const chart = ref(); // 创建DOM引用
|
const chart = ref(); // 创建DOM引用
|
||||||
|
|
||||||
//内圈数据
|
//内圈数据
|
||||||
var data2 = [
|
const data2 = ref([
|
||||||
{
|
|
||||||
value: data.dataList[0].value,
|
]);
|
||||||
name: "2.0收件数",
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [
|
|
||||||
{
|
|
||||||
offset: 0,
|
|
||||||
color: "rgba(0, 255, 250, 0.29)",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 0.5,
|
|
||||||
color: "rgba(0, 255, 250, 0.8)",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 1,
|
|
||||||
color: "rgba(0, 255, 250, 1)",
|
|
||||||
},
|
|
||||||
]),
|
|
||||||
shadowColor: "rgba(1,1,1,0.5)",
|
|
||||||
shadowBlur: 1,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: data.dataList[1].value - data.dataList[0].value,
|
|
||||||
name: "",
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
color: "#095b9b", // 未完成的圆环的颜色
|
|
||||||
label: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
labelLine: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
emphasis: {
|
|
||||||
color: "#095b9b", // 未完成的圆环的颜色
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: data.dataList[1].value,
|
|
||||||
name: "总收件数",
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
color: "rgba(0,0,0,0)",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
];
|
|
||||||
//外圈数据
|
//外圈数据
|
||||||
const data1 = [
|
const data1 = ref([
|
||||||
{
|
]);
|
||||||
value: data.dataList[1].value,
|
|
||||||
name: "",
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
borderWidth: 1,
|
|
||||||
borderColor: "rgba(193, 229, 255, .1)",
|
|
||||||
color: new echarts.graphic.LinearGradient(1, 1, 1, 0, [
|
|
||||||
{
|
|
||||||
offset: 1,
|
|
||||||
color: "rgba(127, 242, 255, .2)",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 0,
|
|
||||||
color: "rgba(109, 195, 255, 0)",
|
|
||||||
},
|
|
||||||
]),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: data.dataList[1].value,
|
|
||||||
name: "",
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
color: "rgba(0,0,0,0)",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const getOption = () => {
|
const getOption = () => {
|
||||||
data.option = {
|
data.option = {
|
||||||
|
|
@ -150,7 +71,7 @@ const getOption = () => {
|
||||||
title: [
|
title: [
|
||||||
{
|
{
|
||||||
text: `${data.percent}%`,
|
text: `${data.percent}%`,
|
||||||
right: "18%",
|
right: "38%",
|
||||||
bottom: "40%",
|
bottom: "40%",
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: "#ffffff",
|
color: "#ffffff",
|
||||||
|
|
@ -164,7 +85,7 @@ const getOption = () => {
|
||||||
type: "pie",
|
type: "pie",
|
||||||
hoverAnimation: false,
|
hoverAnimation: false,
|
||||||
radius: ["60%", "80%"],
|
radius: ["60%", "80%"],
|
||||||
center: ["53%", "54%"],
|
center: ["50%", "54%"],
|
||||||
startAngle: 180,
|
startAngle: 180,
|
||||||
label: {
|
label: {
|
||||||
normal: {
|
normal: {
|
||||||
|
|
@ -172,11 +93,11 @@ const getOption = () => {
|
||||||
position: "center",
|
position: "center",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
data: data2,
|
data: data2.value,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "pie",
|
type: "pie",
|
||||||
center: ["53%", "54%"],
|
center: ["50%", "54%"],
|
||||||
radius: ["80%", "95%"],
|
radius: ["80%", "95%"],
|
||||||
hoverAnimation: false,
|
hoverAnimation: false,
|
||||||
startAngle: 180,
|
startAngle: 180,
|
||||||
|
|
@ -186,12 +107,97 @@ const getOption = () => {
|
||||||
position: "center",
|
position: "center",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
data: data1,
|
data: data1.value,
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
const change = () => {
|
||||||
|
data2.value = [
|
||||||
|
{
|
||||||
|
value: data.dataList[0].value,
|
||||||
|
name: "2.0收件数",
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: "rgba(0, 255, 250, 0.29)",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 0.5,
|
||||||
|
color: "rgba(0, 255, 250, 0.8)",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: "rgba(0, 255, 250, 1)",
|
||||||
|
},
|
||||||
|
]),
|
||||||
|
shadowColor: "rgba(1,1,1,0.5)",
|
||||||
|
shadowBlur: 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: data.dataList[1].value - data.dataList[0].value,
|
||||||
|
name: "",
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: "#095b9b", // 未完成的圆环的颜色
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
color: "#095b9b", // 未完成的圆环的颜色
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: data.dataList[1].value,
|
||||||
|
name: "总收件数",
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: "rgba(0,0,0,0)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
data1.value = [
|
||||||
|
{
|
||||||
|
value: data.dataList[1].value,
|
||||||
|
name: "",
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: "rgba(193, 229, 255, .1)",
|
||||||
|
color: new echarts.graphic.LinearGradient(1, 1, 1, 0, [
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: "rgba(127, 242, 255, .2)",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: "rgba(109, 195, 255, 0)",
|
||||||
|
},
|
||||||
|
]),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: data.dataList[1].value,
|
||||||
|
name: "",
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: "rgba(0,0,0,0)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
};
|
||||||
const setChart = () => {
|
const setChart = () => {
|
||||||
var myChart = echarts.init(chart.value);
|
var myChart = echarts.init(chart.value);
|
||||||
myChart.setOption(data.option);
|
myChart.setOption(data.option);
|
||||||
|
|
@ -200,14 +206,14 @@ const setChart = () => {
|
||||||
// 使用生命钩子
|
// 使用生命钩子
|
||||||
onBeforeMount(() => {
|
onBeforeMount(() => {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
data.dataList[0].value=props.list.finish;
|
data.dataList[0].value = props.list.finish;
|
||||||
data.dataList[1].value=props.list.total;
|
data.dataList[1].value = props.list.total;
|
||||||
data.percent=props.list.percent;
|
data.percent = props.list.percent;
|
||||||
|
change();
|
||||||
getOption();
|
getOption();
|
||||||
setChart();
|
setChart();
|
||||||
}, 600);
|
}, 600);
|
||||||
});
|
});
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped></style>
|
<style scoped></style>
|
||||||
|
|
@ -2903,7 +2903,7 @@ const createZyys = (polygon, indexx, name, tooltip) => {
|
||||||
} else {
|
} else {
|
||||||
zyysCenter.length = 0;
|
zyysCenter.length = 0;
|
||||||
zyysDk.length = 0;
|
zyysDk.length = 0;
|
||||||
await get_dk_zyys(polygon.fgfwrs);
|
await get_dk_zyys(polygon.fgfwrs,polygon.startAge,polygon.endAge);
|
||||||
xr_dk_center_zyys();
|
xr_dk_center_zyys();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2955,7 +2955,7 @@ const loadCs_zyys = async (name) => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
const get_dk_zyys = async (sj) => {
|
const get_dk_zyys = async (sj,start,end) => {
|
||||||
zyys_dk.value.length = 0;
|
zyys_dk.value.length = 0;
|
||||||
zyys_center.value.length = 0;
|
zyys_center.value.length = 0;
|
||||||
zyys_data.value.point.length = 0;
|
zyys_data.value.point.length = 0;
|
||||||
|
|
@ -2966,8 +2966,6 @@ const get_dk_zyys = async (sj) => {
|
||||||
zyys_jd.push(itemN.town);
|
zyys_jd.push(itemN.town);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
console.log(1111111111111, zyys_jd);
|
|
||||||
|
|
||||||
zyys_jd.forEach((item) => {
|
zyys_jd.forEach((item) => {
|
||||||
loadCs_zyys(item);
|
loadCs_zyys(item);
|
||||||
});
|
});
|
||||||
|
|
@ -2979,7 +2977,7 @@ const get_dk_zyys = async (sj) => {
|
||||||
});
|
});
|
||||||
zyysCenter.forEach((center) => {
|
zyysCenter.forEach((center) => {
|
||||||
if (item.committee == center.name) {
|
if (item.committee == center.name) {
|
||||||
let a = { ...center, num: item.num,town: item.town,committee: item.committee};
|
let a = { ...center, num: item.num,town: item.town,committee: item.committee,startAge:start,endAge:end };
|
||||||
zyys_data.value.center.push(a);
|
zyys_data.value.center.push(a);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
@ -3074,10 +3072,10 @@ const Xr_zyysNum = (polygon, indexx) => {
|
||||||
zyys_center.value[indexx].addEventListener("click", () => {
|
zyys_center.value[indexx].addEventListener("click", () => {
|
||||||
console.log(polygon);
|
console.log(polygon);
|
||||||
// cfCsZs.value = polygon.name;
|
// cfCsZs.value = polygon.name;
|
||||||
open_detail_zyys(polygon.town, polygon.committee);
|
open_detail_zyys(polygon.town, polygon.committee,polygon.startAge,polygon.endAge);
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
const open_detail_zyys = (town,committee) => {
|
const open_detail_zyys = (town,committee,start,end) => {
|
||||||
let age = "";
|
let age = "";
|
||||||
dialogShow.value = true;
|
dialogShow.value = true;
|
||||||
http
|
http
|
||||||
|
|
@ -3086,7 +3084,7 @@ const open_detail_zyys = (town,committee) => {
|
||||||
pagination.pageSize
|
pagination.pageSize
|
||||||
}&committee=${committee}&town=${
|
}&committee=${committee}&town=${
|
||||||
town
|
town
|
||||||
}`
|
}&startAge=${start}&endAge=${end}`
|
||||||
)
|
)
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
if (res.code == 200) {
|
if (res.code == 200) {
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1,18 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="module11">
|
<div class="module11">
|
||||||
<div class="displayFlex left_bg">
|
<div class="displayFlex left_bg">
|
||||||
<div class="flex1" style="margin-top: 10px">
|
<div class="flex1">
|
||||||
<div class="yd_title left_1">
|
<div class="yd_title left_1">
|
||||||
<div class="animate-border">
|
<div class="animate-border">
|
||||||
<i></i>
|
<i></i>
|
||||||
<i></i>
|
<i></i>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<eP3 :list="data.jsbgl" v-if="showEchart"></eP3>
|
<eP3
|
||||||
|
:list="data.jsbgl"
|
||||||
|
v-if="showEchart"
|
||||||
|
style="width: 95%; margin-top: 10px"
|
||||||
|
></eP3>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex1">
|
<div class="flex1">
|
||||||
<div class="yd_title left_2">
|
<div class="yd_title left_2">
|
||||||
|
|
@ -17,10 +21,23 @@
|
||||||
<i></i>
|
<i></i>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<eP2
|
<div class="wfjw">
|
||||||
:list="data.medicalInsurance.ffrc"
|
<div class="wfjw_choose">
|
||||||
:year="data.medicalInsurance.year"
|
<div
|
||||||
></eP2>
|
class="wfjw_choose_item"
|
||||||
|
v-for="(item, index) in data.wfjw.chooselist"
|
||||||
|
:class="data.wfjw.choose == item ? 'active' : 'unactive'"
|
||||||
|
:key="index"
|
||||||
|
@click="chooseWfjw(item)"
|
||||||
|
>
|
||||||
|
{{ item }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<eP2
|
||||||
|
:list="data.medicalInsurance.ffrc"
|
||||||
|
:year="data.medicalInsurance.year"
|
||||||
|
></eP2>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="displayFlex center_bg">
|
<div class="displayFlex center_bg">
|
||||||
|
|
@ -35,13 +52,13 @@
|
||||||
<div class="shang_item">
|
<div class="shang_item">
|
||||||
<div class="title">物业小区</div>
|
<div class="title">物业小区</div>
|
||||||
<div class="i">
|
<div class="i">
|
||||||
<zwfw1 :list="data.fgl.list1" />
|
<zwfw1 :list="data.fgl.list1" v-if="showEchart" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="shang_item">
|
<div class="shang_item">
|
||||||
<div class="title">专业物业</div>
|
<div class="title">专业物业</div>
|
||||||
<div class="i">
|
<div class="i">
|
||||||
<zwfw2 :list="data.fgl.list2"/>
|
<zwfw2 :list="data.fgl.list2" v-if="showEchart" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -54,9 +71,23 @@
|
||||||
<i></i>
|
<i></i>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="wlsq">
|
||||||
|
<el-table
|
||||||
|
:data="data.tableData1"
|
||||||
|
style="width: 100%; height: 500px"
|
||||||
|
class="table_border"
|
||||||
|
:row-style="rowState"
|
||||||
|
:header-cell-style="tableHeaderColor"
|
||||||
|
>
|
||||||
|
<el-table-column prop="name" label="社区名称" />
|
||||||
|
<el-table-column prop="address" label="社区位置" />
|
||||||
|
<el-table-column prop="text" label="社区材料" />
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="displayFlex right_bg">
|
<div class="displayFlex right_bg">
|
||||||
|
<!-- 住宅工程质量提升行动 -->
|
||||||
<div class="flex1">
|
<div class="flex1">
|
||||||
<div class="yd_title right_1">
|
<div class="yd_title right_1">
|
||||||
<div class="animate-border">
|
<div class="animate-border">
|
||||||
|
|
@ -64,7 +95,18 @@
|
||||||
<i></i>
|
<i></i>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="zzgc">
|
||||||
|
<div class="zzgc_item">
|
||||||
|
<eP1></eP1>
|
||||||
|
<div class="zzgc_item_title">按期办结率</div>
|
||||||
|
</div>
|
||||||
|
<div class="zzgc_item">
|
||||||
|
<eP4></eP4>
|
||||||
|
<div class="zzgc_item_title">专项检查次数</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- 棚户区改造 -->
|
||||||
<div class="flex1">
|
<div class="flex1">
|
||||||
<div class="yd_title right_2">
|
<div class="yd_title right_2">
|
||||||
<div class="animate-border">
|
<div class="animate-border">
|
||||||
|
|
@ -72,6 +114,30 @@
|
||||||
<i></i>
|
<i></i>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="phqgz">
|
||||||
|
<div class="phqgz_title">
|
||||||
|
<img src="@/assets/images/jz/sjx.png" alt="" />
|
||||||
|
<div class="phqgz_title_text">已改造：3300户</div>
|
||||||
|
</div>
|
||||||
|
<el-table
|
||||||
|
:data="data.tableData2"
|
||||||
|
style="width: 100%; height: 500px"
|
||||||
|
class="table_border"
|
||||||
|
:row-style="rowState"
|
||||||
|
:header-cell-style="tableHeaderColor"
|
||||||
|
>
|
||||||
|
<el-table-column prop="starttime" label="开始时间" width="132" />
|
||||||
|
|
||||||
|
<el-table-column prop="endtime" label="结束时间" width="131" />
|
||||||
|
<el-table-column prop="address" label="地点" width="132" />
|
||||||
|
<el-table-column prop="title" label="名称" width="132" />
|
||||||
|
<el-table-column prop="finish" label="详情">
|
||||||
|
<template #default="scope">
|
||||||
|
<div style="text-align: center">查看详情</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -79,34 +145,127 @@
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, reactive, onMounted, onBeforeMount } from "vue";
|
import { ref, reactive, onMounted, onBeforeMount } from "vue";
|
||||||
|
import eP1 from "../echarts_jz/eP1.vue";
|
||||||
import eP2 from "../echarts_jz/eP2.vue";
|
import eP2 from "../echarts_jz/eP2.vue";
|
||||||
import eP3 from "../echarts_jz/eP3.vue";
|
import eP3 from "../echarts_jz/eP3.vue";
|
||||||
|
import eP4 from "../echarts_jz/eP4.vue";
|
||||||
import http from "@/utils/request.js";
|
import http from "@/utils/request.js";
|
||||||
import zwfw1 from "../echarts_jz/zwfw1.vue";
|
import zwfw1 from "../echarts_jz/zwfw1.vue";
|
||||||
import zwfw2 from "../echarts_jz/zwfw2.vue";
|
import zwfw2 from "../echarts_jz/zwfw2.vue";
|
||||||
const data = reactive({
|
const data = reactive({
|
||||||
medicalInsurance: {}, //医疗保险
|
medicalInsurance: {},
|
||||||
fgl: {
|
fgl: {
|
||||||
list1: {
|
list1: {
|
||||||
finish: "60",
|
finish: 60,
|
||||||
total: "100",
|
total: 100,
|
||||||
percent: "60",
|
percent: 60,
|
||||||
},
|
},
|
||||||
list2: {
|
list2: {
|
||||||
finish: "40",
|
finish: "40",
|
||||||
total: "100",
|
total: "100",
|
||||||
percent: "40",
|
percent: "40",
|
||||||
},
|
},
|
||||||
},//覆盖率
|
}, //覆盖率
|
||||||
jkda: {
|
tableData1: [
|
||||||
jdfs: "336993",
|
{
|
||||||
jdl: "91.82",
|
name: "金隅智慧园",
|
||||||
jtysqyl: "49.37",
|
address: "金隅智慧园",
|
||||||
}, //健康档案
|
text: "金隅智慧园疫情防控演练",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "金隅智慧园",
|
||||||
|
address: "金隅智慧园",
|
||||||
|
text: "金隅智慧园疫情防控演练",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "金隅智慧园",
|
||||||
|
address: "金隅智慧园",
|
||||||
|
text: "金隅智慧园疫情防控演练",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "金隅智慧园",
|
||||||
|
address: "金隅智慧园",
|
||||||
|
text: "金隅智慧园疫情防控演练",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
tableData2: [
|
||||||
|
{
|
||||||
|
starttime: "2023-11-01",
|
||||||
|
endtime: "2023-11-30",
|
||||||
|
address: "金隅智慧园",
|
||||||
|
title: "金隅智慧园疫情防控演练",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
starttime: "2023-11-01",
|
||||||
|
endtime: "2023-11-30",
|
||||||
|
address: "金隅智慧园",
|
||||||
|
title: "金隅智慧园疫情防控演练",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
starttime: "2023-11-01",
|
||||||
|
endtime: "2023-11-30",
|
||||||
|
address: "金隅智慧园",
|
||||||
|
title: "金隅智慧园疫情防控演练",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
starttime: "2023-11-01",
|
||||||
|
endtime: "2023-11-30",
|
||||||
|
address: "金隅智慧园",
|
||||||
|
title: "金隅智慧园疫情防控演练",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
starttime: "2023-11-01",
|
||||||
|
endtime: "2023-11-30",
|
||||||
|
address: "金隅智慧园",
|
||||||
|
title: "金隅智慧园疫情防控演练",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
starttime: "2023-11-01",
|
||||||
|
endtime: "2023-11-30",
|
||||||
|
address: "金隅智慧园",
|
||||||
|
title: "金隅智慧园疫情防控演练",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
//危房解危
|
||||||
|
wfjw: {
|
||||||
|
chooselist: ["城镇", "农村"],
|
||||||
|
choose: "城镇",
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
// 表格样式
|
||||||
|
const tableHeaderColor = (arg) => {
|
||||||
|
return {
|
||||||
|
paddingLeft: "10px",
|
||||||
|
letterSpacing: "1px",
|
||||||
|
fontSize: "15px",
|
||||||
|
height: "32px",
|
||||||
|
backgroundColor: "#455F8A",
|
||||||
|
color: "#fff",
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const rowState = (row) => {
|
||||||
|
if (row.rowIndex % 2 == 0) {
|
||||||
|
return {
|
||||||
|
letterSpacing: "1px",
|
||||||
|
fontSize: "14px",
|
||||||
|
height: "36px",
|
||||||
|
backgroundColor: "rgba(31, 63, 113, 1)",
|
||||||
|
color: "#fff",
|
||||||
|
};
|
||||||
|
} else if (row.rowIndex % 2 !== 0) {
|
||||||
|
return {
|
||||||
|
letterSpacing: "1px",
|
||||||
|
fontSize: "14px",
|
||||||
|
height: "36px",
|
||||||
|
backgroundColor: "rgba(43, 74, 121, 1)",
|
||||||
|
color: "#fff",
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
const showEchart = ref(false);
|
const showEchart = ref(false);
|
||||||
|
const chooseWfjw=(val)=>{
|
||||||
|
data.wfjw.choose = val
|
||||||
|
}
|
||||||
const getData = async () => {
|
const getData = async () => {
|
||||||
showEchart.value = true;
|
showEchart.value = true;
|
||||||
// await http.get("/api/ggfwyth/health").then((res) => {
|
// await http.get("/api/ggfwyth/health").then((res) => {
|
||||||
|
|
@ -358,32 +517,146 @@ onMounted(() => {});
|
||||||
.font {
|
.font {
|
||||||
font-size: 18px !important;
|
font-size: 18px !important;
|
||||||
}
|
}
|
||||||
.shang {
|
//危房解危
|
||||||
margin-top:20px;
|
.wfjw {
|
||||||
|
width: 95%;
|
||||||
|
margin-top: 10px;
|
||||||
|
.wfjw_choose {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-around;
|
align-items: center;
|
||||||
&_item {
|
.wfjw_choose_item {
|
||||||
width: 45%;
|
margin-right: 20px;
|
||||||
display: flex;
|
cursor: pointer;
|
||||||
flex-direction: column;
|
width: 84px;
|
||||||
align-items: center;
|
height: 32px;
|
||||||
.title {
|
text-align: center;
|
||||||
width: 50%;
|
line-height: 32px;
|
||||||
background-image: url(@/assets/images/sy/zwfw_title.png);
|
padding: 6px;
|
||||||
background-repeat: no-repeat;
|
font-family: PingFangSC, PingFang SC;
|
||||||
background-size: 100% 100%;
|
font-weight: 500;
|
||||||
text-align: center;
|
font-size: 14px;
|
||||||
font-weight: 400;
|
color: #ffffff;
|
||||||
font-size: 16px;
|
}
|
||||||
color: #ffffff;
|
.active {
|
||||||
line-height: 20px;
|
background-image: url(@/assets/images/jz/wfjw1.png);
|
||||||
letter-spacing: 2px;
|
background-repeat: no-repeat;
|
||||||
}
|
background-size: 100% 100%;
|
||||||
.i {
|
}
|
||||||
width: 100%;
|
.unactive {
|
||||||
height: 200px;
|
background-image: url(@/assets/images/jz/wfjw2.png);
|
||||||
}
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
//覆盖率
|
||||||
|
.shang {
|
||||||
|
margin-top: 20px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
&_item {
|
||||||
|
width: 45%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
.title {
|
||||||
|
width: 50%;
|
||||||
|
background-image: url(@/assets/images/sy/zwfw_title.png);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #ffffff;
|
||||||
|
line-height: 20px;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
}
|
||||||
|
.i {
|
||||||
|
width: 100%;
|
||||||
|
height: 200px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//未来社区
|
||||||
|
.wlsq {
|
||||||
|
width: 95%;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
//住宅工程
|
||||||
|
.zzgc {
|
||||||
|
margin-top: 10px;
|
||||||
|
display: flex;
|
||||||
|
box-sizing: border-box;
|
||||||
|
// justify-content: space-between;
|
||||||
|
padding: 20px;
|
||||||
|
.zzgc_item {
|
||||||
|
width: 48%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
.zzgc_item_title {
|
||||||
|
margin-top: 20px;
|
||||||
|
font-family: PingFangSC, PingFang SC;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #ffffff;
|
||||||
|
line-height: 22px;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
background: radial-gradient(
|
||||||
|
224% 77% at 50% 100%,
|
||||||
|
rgba(63, 194, 252, 0.64) 0%,
|
||||||
|
rgba(63, 194, 252, 0) 100%,
|
||||||
|
rgba(255, 255, 255, 0) 100%
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//棚户区改造
|
||||||
|
.phqgz {
|
||||||
|
width: 95%;
|
||||||
|
.phqgz_title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 20px;
|
||||||
|
img {
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
}
|
||||||
|
.phqgz_title_text {
|
||||||
|
font-family: PingFangSC, PingFang SC;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #62f3ff;
|
||||||
|
line-height: 22px;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:deep(.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf) {
|
||||||
|
border: none !important;
|
||||||
|
padding-left: 10px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-table td.el-table__cell) {
|
||||||
|
padding-left: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-table--enable-row-hover .el-table__body tr:hover > td) {
|
||||||
|
background-color: #2f4b74;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-table__empty-block) {
|
||||||
|
background-color: #122560;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-table .el-table__row) {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
:deep(.el-table) {
|
||||||
|
background: rgba(32, 64, 115, 1);
|
||||||
|
|
||||||
|
--el-table-border-color: none;
|
||||||
|
border: 1px solid #7aceff;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
Loading…
Reference in New Issue