Merge branch 'main' of git.zdool.com:xs/ggfwjsc
This commit is contained in:
lnn19986213
commit
ff0421bc3b
|
|
@ -44,12 +44,7 @@
|
|||
<span> {{ item.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<eP2
|
||||
:list="data.DataViewing"
|
||||
:list1="data.leftCenter3"
|
||||
:list2="data.leftCenter4"
|
||||
:year="data.leftCenterYear"
|
||||
></eP2>
|
||||
<eP2 :list="data.DataViewing" :year="data.leftCenterYear"></eP2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -65,7 +60,7 @@
|
|||
<div class="minTopNum">
|
||||
<div
|
||||
class="numItem"
|
||||
v-for="(item, inex) in minData.minTop"
|
||||
v-for="(item, index) in minData.minTop"
|
||||
:key="index"
|
||||
>
|
||||
{{ item }}
|
||||
|
|
@ -119,7 +114,7 @@
|
|||
<i></i>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <img src="@/assets/images/sjfx/right3D.png" alt="" class="right3d" /> -->
|
||||
<!-- <img src="@/assets/images/sjfx/right3D.png" alt="" class="right3d" /> -->
|
||||
<right2></right2>
|
||||
</div>
|
||||
<div class="flex1">
|
||||
|
|
@ -136,7 +131,14 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, onBeforeMount, computed } from "vue";
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
onMounted,
|
||||
onBeforeMount,
|
||||
onBeforeUnmount,
|
||||
computed,
|
||||
} from "vue";
|
||||
import right2 from "./echart_analyze/right2.vue";
|
||||
import right1 from "./echart_analyze/right1.vue";
|
||||
import http from "@/utils/request.js";
|
||||
|
|
@ -170,7 +172,7 @@ const data = reactive({
|
|||
{
|
||||
name: "医保支出万元以上",
|
||||
value: "11112",
|
||||
show: false,
|
||||
show: true,
|
||||
data: ["100", "120", "199", "133", "210"], //医保支出万元以上
|
||||
},
|
||||
{
|
||||
|
|
@ -189,19 +191,19 @@ const data = reactive({
|
|||
name: "糖尿病",
|
||||
value: "1241",
|
||||
show: false,
|
||||
data: ["100", "120", "199", "133", "210"], //糖尿病
|
||||
data: ["100", "120", "19", "133", "210"], //糖尿病
|
||||
},
|
||||
{
|
||||
name: "高血脂",
|
||||
value: "1414",
|
||||
show: false,
|
||||
data: ["100", "120", "199", "133", "210"], //高血脂
|
||||
data: ["100", "120", "199", "13", "210"], //高血脂
|
||||
},
|
||||
{
|
||||
name: "高血糖",
|
||||
value: "2355",
|
||||
show: false,
|
||||
data: ["100", "120", "199", "133", "210"], //高血糖
|
||||
data: ["100", "120", "199", "133", "10"], //高血糖
|
||||
},
|
||||
{
|
||||
name: "残疾",
|
||||
|
|
@ -228,11 +230,16 @@ const data = reactive({
|
|||
data: ["100", "120", "199", "133", "210"], //其他疾病
|
||||
},
|
||||
],
|
||||
DataViewing: {}, //数据查看
|
||||
leftCenter1: ["100", "120", "199", "133", "210"], //医保支出万元以上
|
||||
leftCenter3: ["100", "80", "199", "133", "210"], //大病住院
|
||||
leftCenter4: ["100", "120", "199", "133", "210"], //糖尿病
|
||||
DataViewing: [
|
||||
{
|
||||
name: "医保支出万元以上",
|
||||
data: ["100", "120", "199", "133", "210"], //医保支出万元以上
|
||||
},
|
||||
], //数据查看
|
||||
leftCenterYear: ["2019", "2020", "2021", "2022", "2023"], //年份
|
||||
// leftCenter1: ["100", "120", "199", "133", "210"], //医保支出万元以上
|
||||
// leftCenter3: ["100", "80", "199", "133", "210"], //大病住院
|
||||
// leftCenter4: ["100", "120", "199", "133", "210"], //糖尿病
|
||||
|
||||
zccs1: ["图书馆", "交通出行", "景区"], //一码通
|
||||
zccs2: ["100", "130", "220"], //一码通
|
||||
|
|
@ -255,51 +262,48 @@ const minData = reactive({
|
|||
});
|
||||
// 数据查看
|
||||
const onViewData = (value, i) => {
|
||||
clearInterval(interval); //清除定时器
|
||||
data.ViewData[i].show = !data.ViewData[i].show;
|
||||
data.DataViewing = data.ViewData.filter((item) => item.show).map((item) => ({
|
||||
name: item.name,
|
||||
data: item.data,
|
||||
}));
|
||||
console.log(data.DataViewing, 666);
|
||||
|
||||
// switch (value) {
|
||||
// case "医保支出万元以上":
|
||||
// data.ViewData[i].show = !data.ViewData[i].show;
|
||||
// break;
|
||||
// case "大病住院":
|
||||
// data.ViewData[i].show = true;
|
||||
// break;
|
||||
// case "高血压":
|
||||
// data.ViewData[i].show = true;
|
||||
// break;
|
||||
// case "糖尿病":
|
||||
// data.ViewData[i].show = true;
|
||||
// break;
|
||||
// case "高血脂":
|
||||
// data.ViewData[i].show = true;
|
||||
// break;
|
||||
// case "高血糖":
|
||||
// data.ViewData[i].show = true;
|
||||
// break;
|
||||
// case "残疾":
|
||||
// data.ViewData[i].show = true;
|
||||
// break;
|
||||
// case "低保":
|
||||
// data.ViewData[i].show = true;
|
||||
// break;
|
||||
// case "特困":
|
||||
// data.ViewData[i].show = true;
|
||||
// break;
|
||||
// case "其他疾病":
|
||||
// data.ViewData[i].show = true;
|
||||
// break;
|
||||
// default:
|
||||
// break;
|
||||
// }
|
||||
};
|
||||
onMounted(() => {});
|
||||
const onViewData1 = (i) => {
|
||||
data.ViewData[i].show = !data.ViewData[i].show;
|
||||
data.DataViewing = data.ViewData.filter((item) => item.show).map((item) => ({
|
||||
name: item.name,
|
||||
data: item.data,
|
||||
}));
|
||||
};
|
||||
|
||||
let interval;
|
||||
let currentIndex = ref(0);
|
||||
|
||||
const toggleShow = () => {
|
||||
const length = data.ViewData.length;
|
||||
if (length === 0) return;
|
||||
const current = currentIndex.value;
|
||||
const nextIndex = (currentIndex.value + 1) % length;
|
||||
// 取反当前索引和下一个索引的 show 值
|
||||
// data.ViewData[current].show = !data.ViewData[current].show;
|
||||
data.ViewData[nextIndex].show = !data.ViewData[nextIndex].show;
|
||||
onViewData1(current);
|
||||
currentIndex.value = nextIndex;
|
||||
};
|
||||
|
||||
const startAutoSwitching = () => {
|
||||
interval = setInterval(toggleShow, 6000); // 每6秒切换一次
|
||||
};
|
||||
onMounted(() => {
|
||||
startAutoSwitching();
|
||||
});
|
||||
|
||||
onBeforeMount(() => {});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
clearInterval(interval); //清除定时器
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
@ -569,8 +573,10 @@ onBeforeMount(() => {});
|
|||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
color: #ffffff;
|
||||
margin-top: 14px;
|
||||
.ViewDataTop {
|
||||
width: 114px;
|
||||
height: 132px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
|
@ -581,9 +587,10 @@ onBeforeMount(() => {});
|
|||
background-size: 100% 100%;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin-bottom: -24px;
|
||||
margin-bottom: -28px;
|
||||
text-align: center;
|
||||
line-height: 100px;
|
||||
animation: moveUpDown 2s infinite;
|
||||
}
|
||||
.ViewDataTopimg_1 {
|
||||
background-image: url(@/assets/images/sjfx/sjfx1.png);
|
||||
|
|
@ -594,18 +601,31 @@ onBeforeMount(() => {});
|
|||
}
|
||||
.ViewDataBottomimg {
|
||||
background-image: url(@/assets/images/sjfx/sjfx2.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin-bottom: -24px;
|
||||
animation: scaleUpDown 2s infinite;
|
||||
// transform: scale(1.3);
|
||||
}
|
||||
.ViewDataBottomimg_1 {
|
||||
background-image: url(@/assets/images/sjfx/sjfx3.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 105px;
|
||||
height: 57px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
@keyframes moveUpDown {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
}
|
||||
@keyframes scaleUpDown {
|
||||
0%,
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,81 +1,113 @@
|
|||
<template>
|
||||
<div ref="chart" style="width: 100%; height: 260px"></div>
|
||||
<div ref="chart" style="width: 100%; height: 320px"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onBeforeMount, reactive, ref, watch } from "vue";
|
||||
// 局部引入echarts核心模块
|
||||
import { onMounted, reactive, ref, watch } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
|
||||
const chart = ref(); // 创建DOM引用
|
||||
|
||||
const chart = ref();
|
||||
const clear = ref(false);
|
||||
const props = defineProps({
|
||||
list: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
list1: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
list2: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
year: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
list: Array,
|
||||
year: Array,
|
||||
});
|
||||
const ser = ref([
|
||||
{
|
||||
name: "背景",
|
||||
type: "bar",
|
||||
data: [],
|
||||
showBackground: true,
|
||||
backgroundStyle: {
|
||||
color: "rgba(180, 180, 180, 0.2)",
|
||||
},
|
||||
},
|
||||
]);
|
||||
|
||||
const data = reactive({
|
||||
list: [],
|
||||
list1: [],
|
||||
list2: [],
|
||||
year: [],
|
||||
option: {},
|
||||
bg: [],
|
||||
name: [],
|
||||
ser: [],
|
||||
len: {
|
||||
formatter: "{b0}<br />",
|
||||
series: [
|
||||
{
|
||||
name: "背景",
|
||||
type: "bar",
|
||||
data: [],
|
||||
showBackground: true,
|
||||
backgroundStyle: {
|
||||
color: "rgba(180, 180, 180, 0.2)",
|
||||
},
|
||||
},
|
||||
],
|
||||
legend: {
|
||||
data: [],
|
||||
top: "5%",
|
||||
right: "10%",
|
||||
top: "3%",
|
||||
right: "5%",
|
||||
textStyle: {
|
||||
fontSize: 16,
|
||||
color: "#ffffff",
|
||||
},
|
||||
},
|
||||
bgColor: [
|
||||
"#2468FF",
|
||||
"#E8FF00",
|
||||
"#FF5733",
|
||||
"#33FF57",
|
||||
"#3357FF",
|
||||
"#FF33A1",
|
||||
"#57FF33",
|
||||
"#33FFA1",
|
||||
"#A133FF",
|
||||
"#FF5733",
|
||||
],
|
||||
});
|
||||
|
||||
const updateSeries = () => {
|
||||
data.series = [
|
||||
{
|
||||
name: "背景",
|
||||
type: "bar",
|
||||
data: data.year.map(() => 0),
|
||||
showBackground: true,
|
||||
backgroundStyle: {
|
||||
color: "rgba(180, 180, 180, 0.2)",
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
if (data.list.length > 0) {
|
||||
data.list.forEach((item, index) => {
|
||||
const color = data.bgColor[index % data.bgColor.length];
|
||||
data.series.push({
|
||||
yAxisIndex: 0,
|
||||
name: item.name,
|
||||
type: "line",
|
||||
symbol: "emptyCircle",
|
||||
symbolSize: 10,
|
||||
itemStyle: {
|
||||
borderColor: color,
|
||||
borderWidth: 1,
|
||||
color: color,
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
color: color,
|
||||
formatter: (data) => data.value,
|
||||
},
|
||||
data: item.data,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
data.legend.data = data.list.map((item) => item.name);
|
||||
data.formatter =
|
||||
"{b0}<br />" +
|
||||
data.list
|
||||
.map((_, index) => `{a${index + 1}}:{c${index + 1}}<br />`)
|
||||
.join("");
|
||||
};
|
||||
|
||||
const getOption = () => {
|
||||
data.option = {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
padding: [20, 10, 20, 10],
|
||||
formatter: "{b0}<br />{a1}:{c1} <br />{a2}:{c2}",
|
||||
formatter: data.formatter,
|
||||
},
|
||||
legend: data.len,
|
||||
legend: data.legend,
|
||||
grid: {
|
||||
top: "25%",
|
||||
top: "35%",
|
||||
left: "6%",
|
||||
right: "6%",
|
||||
bottom: "3%",
|
||||
|
|
@ -85,11 +117,8 @@ const getOption = () => {
|
|||
type: "category",
|
||||
data: data.year,
|
||||
axisLabel: {
|
||||
//坐标轴刻度标签的相关设置
|
||||
textStyle: {
|
||||
color: "#ffffff",
|
||||
fontSize: 16,
|
||||
},
|
||||
color: "#ffffff",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
yAxis: [
|
||||
|
|
@ -104,24 +133,13 @@ const getOption = () => {
|
|||
width: 1,
|
||||
},
|
||||
},
|
||||
min: 0, // 设置Y轴最小值
|
||||
max: function (value) {
|
||||
// 自定义Y轴最大值，确保数据点显示在顶部
|
||||
return Math.ceil(Math.max(value.max, value.max * 1.2) / 50) * 50;
|
||||
},
|
||||
min: 0,
|
||||
max: (value) =>
|
||||
Math.ceil(Math.max(value.max, value.max * 1.2) / 50) * 50,
|
||||
nameTextStyle: {
|
||||
// 设置Y轴名称的样式
|
||||
fontSize: 14, // 这里设置字体大小为20
|
||||
fontSize: 14,
|
||||
},
|
||||
// axisLabel: {
|
||||
// //坐标轴刻度标签的相关设置
|
||||
// textStyle: {
|
||||
// color: "#ffffff",
|
||||
// fontSize: 16,
|
||||
// },
|
||||
// },
|
||||
axisLine: {
|
||||
//y轴线的颜色以及宽度
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#ffffff",
|
||||
|
|
@ -133,7 +151,6 @@ const getOption = () => {
|
|||
},
|
||||
{
|
||||
type: "value",
|
||||
// name: "糖尿病",
|
||||
splitLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
|
|
@ -142,21 +159,16 @@ const getOption = () => {
|
|||
width: 1,
|
||||
},
|
||||
},
|
||||
min: 0, // 设置Y轴最小值
|
||||
max: function (value) {
|
||||
// 自定义Y轴最大值，确保数据点显示在顶部
|
||||
return Math.ceil(Math.max(value.max, value.max * 1.6) / 50) * 50;
|
||||
},
|
||||
min: 0,
|
||||
max: (value) =>
|
||||
Math.ceil(Math.max(value.max, value.max * 1.6) / 50) * 50,
|
||||
nameTextStyle: {
|
||||
// 设置Y轴名称的样式
|
||||
fontSize: 14, // 这里设置字体大小为20
|
||||
fontSize: 14,
|
||||
},
|
||||
axisLabel: {
|
||||
show: false,
|
||||
//坐标轴刻度标签的相关设置
|
||||
},
|
||||
axisLine: {
|
||||
//y轴线的颜色以及宽度
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#ffffff",
|
||||
|
|
@ -167,66 +179,39 @@ const getOption = () => {
|
|||
},
|
||||
},
|
||||
],
|
||||
series: data.ser,
|
||||
series: data.series,
|
||||
};
|
||||
};
|
||||
|
||||
const setChart = () => {
|
||||
var myChart = echarts.init(chart.value);
|
||||
const myChart = echarts.init(chart.value);
|
||||
if (clear.value) {
|
||||
myChart.clear();
|
||||
}
|
||||
myChart.setOption(data.option);
|
||||
};
|
||||
|
||||
const setChart1 = () => {
|
||||
data.ser = ser.value;
|
||||
if (data.name.length > 0) {
|
||||
data.list.forEach((item) => {
|
||||
data.ser.push({
|
||||
yAxisIndex: 0,
|
||||
name: item.name,
|
||||
type: "line",
|
||||
symbol: "emptyCircle",
|
||||
symbolSize: 10,
|
||||
itemStyle: {
|
||||
borderColor: "#2468FF",
|
||||
borderWidth: 1,
|
||||
color: "#2468FF",
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
color: "#2468FF",
|
||||
formatter: function (data) {
|
||||
return data.value;
|
||||
},
|
||||
},
|
||||
|
||||
data: item.data,
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 监听数据
|
||||
watch(
|
||||
() => props.list,
|
||||
(newVal, oldVal) => {
|
||||
if (newVal.length < oldVal.length) {
|
||||
clear.value = true;
|
||||
} else {
|
||||
clear.value = false;
|
||||
}
|
||||
data.list = newVal;
|
||||
data.name = props.list.map((item) => item.name);
|
||||
data.len.data=data.name;
|
||||
// console.log(55555, data.name);
|
||||
setChart1();
|
||||
updateSeries();
|
||||
getOption();
|
||||
setChart();
|
||||
}
|
||||
);
|
||||
// 使用生命钩子
|
||||
onBeforeMount(() => {
|
||||
setTimeout(() => {
|
||||
data.list = props.list;
|
||||
data.year = props.year;
|
||||
ser.value[0].data = data.year.map((item) => 0);
|
||||
setChart1();
|
||||
getOption();
|
||||
setChart();
|
||||
}, 600);
|
||||
|
||||
onMounted(() => {
|
||||
data.list = props.list;
|
||||
data.year = props.year;
|
||||
updateSeries();
|
||||
getOption();
|
||||
setChart();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -115,7 +115,7 @@ let option = {
|
|||
// formatter: '{c}%' // 这里是数据展示的时候显示的数据
|
||||
}, // 柱子上方的数值
|
||||
itemStyle: {
|
||||
normal: {
|
||||
// normal: {
|
||||
borderWidth: 1,
|
||||
// borderColor: "rgba(0, 183, 255, 1)",
|
||||
borderRadius: [0, 0, 50, 0], //圆角边框
|
||||
|
|
@ -123,7 +123,7 @@ let option = {
|
|||
{ offset: 0, color: "rgba(0, 183, 255, 0)" },
|
||||
{ offset: 1, color: "rgba(0, 183, 255, 1)" },
|
||||
]),
|
||||
},
|
||||
// },
|
||||
},
|
||||
barWidth: 10,
|
||||
data: data2,
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@ import * as echarts from "echarts";
|
|||
const chart = ref(); // 创建DOM引用
|
||||
|
||||
const colors = [
|
||||
|
||||
{
|
||||
left: "rgba(234, 162, 57, .16)",
|
||||
right: "rgba(234, 162, 57, .6)",
|
||||
|
|
@ -32,11 +31,13 @@ const colors = [
|
|||
bottom: "rgba(60, 143, 255, .46)",
|
||||
front: "rgba(60, 143, 255, .66)",
|
||||
},
|
||||
|
||||
];
|
||||
const maxList = [90, 90, 90, 90, 90, 90, 90];
|
||||
const valueList = [20, 53, 47, 65, 29, 11, 50];
|
||||
|
||||
const maxList = ref([]);
|
||||
const valueList = [20, 53, 47, 65, 29, 11, 10];
|
||||
const data = reactive({
|
||||
option: {},
|
||||
Max: 100,
|
||||
});
|
||||
// 注册5个面图形:左侧、前面、右面、上面、下面
|
||||
//c0:左下角，c1：右下角,c2:右上角，c3：左上角
|
||||
// 绘制左侧面-ok rgba(103, 180, 233, 0.04)
|
||||
|
|
@ -145,290 +146,304 @@ echarts.graphic.registerShape("CubeFront_1", CubeFront_1);
|
|||
echarts.graphic.registerShape("CubeRight_1", CubeRight_1);
|
||||
echarts.graphic.registerShape("CubeTop_1", CubeTop_1);
|
||||
echarts.graphic.registerShape("CubeBottom_1", CubeBottom_1);
|
||||
const getOption = () => {
|
||||
data.option = {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
formatter: "{b0}:{c1}",
|
||||
},
|
||||
grid: {
|
||||
left: 10,
|
||||
right: 0,
|
||||
bottom: 20,
|
||||
top: 20,
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
data: [
|
||||
"小奔通",
|
||||
"两慢病",
|
||||
"水费",
|
||||
"就业招工",
|
||||
"零工市厂匹配",
|
||||
"医保",
|
||||
"交通出行",
|
||||
],
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
offset: 10,
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
formatter: "{b0}:{c1}",
|
||||
},
|
||||
grid: {
|
||||
left: 10,
|
||||
right: 0,
|
||||
bottom: 20,
|
||||
top: 20,
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
data: [
|
||||
"小奔通",
|
||||
"两慢病",
|
||||
"水费",
|
||||
"就业招工",
|
||||
"零工市厂匹配",
|
||||
"医保",
|
||||
"交通出行",
|
||||
],
|
||||
axisLine: {
|
||||
show: false,
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
formatter: function (value) {
|
||||
return value.length > 3 ? value.slice(0, 2) + "..." : value;
|
||||
},
|
||||
},
|
||||
},
|
||||
offset: 10,
|
||||
{
|
||||
type: "category",
|
||||
data: [
|
||||
"小奔通",
|
||||
"两慢病",
|
||||
"水费",
|
||||
"就业招工",
|
||||
"零工市厂匹配",
|
||||
"医保",
|
||||
"交通出行",
|
||||
],
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
offset: 10,
|
||||
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: false,
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: {
|
||||
min: 0,
|
||||
// max: 200,
|
||||
max: data.Max,
|
||||
interval: 20,
|
||||
type: "value",
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(255, 255, 255, .16)",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: "dashed",
|
||||
color: "rgba(255, 255, 255, .16)",
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
formatter: function (value) {
|
||||
|
||||
return value.length > 3 ? value.slice(0, 2) + "..." : value;
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "category",
|
||||
data: [
|
||||
"小奔通",
|
||||
"两慢病",
|
||||
"水费",
|
||||
"就业招工",
|
||||
"零工市厂匹配",
|
||||
"医保",
|
||||
"交通出行",
|
||||
],
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
offset: 10,
|
||||
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: false,
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: {
|
||||
min: 0,
|
||||
max: 100,
|
||||
interval: 20,
|
||||
type: "value",
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(255, 255, 255, .16)",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: "dashed",
|
||||
color: "rgba(255, 255, 255, .16)",
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
fontSize: 16,
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
series: [
|
||||
//阴影部分
|
||||
{
|
||||
type: "custom",
|
||||
renderItem: function (params, api) {
|
||||
console.log(api);
|
||||
const location = api.coord([api.value(0), api.value(1)]);
|
||||
return {
|
||||
type: "group",
|
||||
children: [
|
||||
{
|
||||
type: "CubeBottom_1",
|
||||
shape: {
|
||||
api,
|
||||
x: location[0],
|
||||
y: location[1],
|
||||
xAxisPoint: api.coord([api.value(0), 0]),
|
||||
series: [
|
||||
//阴影部分
|
||||
{
|
||||
type: "custom",
|
||||
renderItem: function (params, api) {
|
||||
console.log(api);
|
||||
const location = api.coord([api.value(0), api.value(1)]);
|
||||
return {
|
||||
type: "group",
|
||||
children: [
|
||||
{
|
||||
type: "CubeBottom_1",
|
||||
shape: {
|
||||
api,
|
||||
x: location[0],
|
||||
y: location[1],
|
||||
xAxisPoint: api.coord([api.value(0), 0]),
|
||||
},
|
||||
style: {
|
||||
fill: "rgba(103, 180, 233, .16)",
|
||||
},
|
||||
},
|
||||
style: {
|
||||
fill: "rgba(103, 180, 233, .16)",
|
||||
{
|
||||
type: "CubeLeft_1",
|
||||
shape: {
|
||||
api,
|
||||
x: location[0],
|
||||
y: location[1],
|
||||
xAxisPoint: api.coord([api.value(0), 0]),
|
||||
},
|
||||
style: {
|
||||
fill: "rgba(103, 180, 233, .04)",
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "CubeLeft_1",
|
||||
shape: {
|
||||
api,
|
||||
x: location[0],
|
||||
y: location[1],
|
||||
xAxisPoint: api.coord([api.value(0), 0]),
|
||||
{
|
||||
type: "CubeFront_1",
|
||||
shape: {
|
||||
api,
|
||||
x: location[0],
|
||||
y: location[1],
|
||||
xAxisPoint: api.coord([api.value(0), 0]),
|
||||
},
|
||||
style: {
|
||||
fill: "rgba(103, 180, 233, .16)",
|
||||
},
|
||||
},
|
||||
style: {
|
||||
fill: "rgba(103, 180, 233, .04)",
|
||||
{
|
||||
type: "CubeRight_1",
|
||||
shape: {
|
||||
api,
|
||||
x: location[0],
|
||||
y: location[1],
|
||||
xAxisPoint: api.coord([api.value(0), 0]),
|
||||
},
|
||||
style: {
|
||||
fill: "rgba(103, 180, 233, .08)",
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "CubeFront_1",
|
||||
shape: {
|
||||
api,
|
||||
x: location[0],
|
||||
y: location[1],
|
||||
xAxisPoint: api.coord([api.value(0), 0]),
|
||||
{
|
||||
type: "CubeTop_1",
|
||||
shape: {
|
||||
api,
|
||||
x: location[0],
|
||||
y: location[1],
|
||||
xAxisPoint: api.coord([api.value(0), 0]),
|
||||
},
|
||||
style: {
|
||||
fill: "rgba(103, 180, 233, .26)",
|
||||
},
|
||||
},
|
||||
style: {
|
||||
fill: "rgba(103, 180, 233, .16)",
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "CubeRight_1",
|
||||
shape: {
|
||||
api,
|
||||
x: location[0],
|
||||
y: location[1],
|
||||
xAxisPoint: api.coord([api.value(0), 0]),
|
||||
},
|
||||
style: {
|
||||
fill: "rgba(103, 180, 233, .08)",
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "CubeTop_1",
|
||||
shape: {
|
||||
api,
|
||||
x: location[0],
|
||||
y: location[1],
|
||||
xAxisPoint: api.coord([api.value(0), 0]),
|
||||
},
|
||||
style: {
|
||||
fill: "rgba(103, 180, 233, .26)",
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
data: maxList,
|
||||
},
|
||||
{
|
||||
type: "custom",
|
||||
renderItem: (params, api) => {
|
||||
const location = api.coord([api.value(0), api.value(1)]);
|
||||
|
||||
return {
|
||||
type: "group",
|
||||
children: [
|
||||
{
|
||||
type: "CubeBottom_1",
|
||||
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[`${params.dataIndexInside % 3}`]["bottom"],
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "CubeLeft_1",
|
||||
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[`${params.dataIndexInside % 3}`]["left"],
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "CubeFront_1",
|
||||
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[`${params.dataIndexInside % 3}`]["front"],
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "CubeRight_1",
|
||||
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[`${params.dataIndexInside % 3}`]["right"],
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "CubeTop_1",
|
||||
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[`${params.dataIndexInside % 3}`]["top"],
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
|
||||
data: valueList,
|
||||
},
|
||||
//顶部字体
|
||||
{
|
||||
type: "bar",
|
||||
xAxisIndex: 1,
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 18,
|
||||
position: "top",
|
||||
color: "#ffffff",
|
||||
formatter: function (data) {
|
||||
return data.value -5;
|
||||
],
|
||||
};
|
||||
},
|
||||
data: maxList.value,
|
||||
},
|
||||
itemStyle: {
|
||||
color: "rgba(221, 242, 255, 0)",
|
||||
},
|
||||
{
|
||||
type: "custom",
|
||||
renderItem: (params, api) => {
|
||||
const location = api.coord([api.value(0), api.value(1)]);
|
||||
|
||||
data: valueList.map((item) => item + 5),
|
||||
barWidth: 20,
|
||||
},
|
||||
],
|
||||
return {
|
||||
type: "group",
|
||||
children: [
|
||||
{
|
||||
type: "CubeBottom_1",
|
||||
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[`${params.dataIndexInside % 3}`]["bottom"],
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "CubeLeft_1",
|
||||
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[`${params.dataIndexInside % 3}`]["left"],
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "CubeFront_1",
|
||||
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[`${params.dataIndexInside % 3}`]["front"],
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "CubeRight_1",
|
||||
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[`${params.dataIndexInside % 3}`]["right"],
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "CubeTop_1",
|
||||
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[`${params.dataIndexInside % 3}`]["top"],
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
|
||||
data: valueList,
|
||||
},
|
||||
//顶部字体
|
||||
{
|
||||
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: valueList.map((item) => item + 5),
|
||||
barWidth: 20,
|
||||
},
|
||||
],
|
||||
};
|
||||
};
|
||||
const setChart = () => {
|
||||
var myChart = echarts.init(chart.value);
|
||||
myChart.setOption(data.option);
|
||||
};
|
||||
const getMaxCeilingValue = (arr) => {
|
||||
let max = Math.max(...arr);
|
||||
return Math.ceil(max / 100) * 100;
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
var myChart = echarts.init(chart.value);
|
||||
|
||||
myChart.setOption(option);
|
||||
onBeforeMount(() => {
|
||||
setTimeout(() => {
|
||||
data.Max = getMaxCeilingValue(valueList);
|
||||
maxList.value = valueList.map((item) => data.Max * 0.9);
|
||||
getOption();
|
||||
setChart();
|
||||
}, 600);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -179,7 +179,7 @@ const getOption = () => {
|
|||
barMaxWidth: 20, // 每一个都要设置
|
||||
barMinWidth: 5, // 每一个都要设置
|
||||
itemStyle: {
|
||||
normal: {
|
||||
// normal: {
|
||||
borderWidth: 1,
|
||||
borderColor: "rgba(0, 183, 255, 1)",
|
||||
borderRadius: [0, 0, 50, 0], //圆角边框
|
||||
|
|
@ -187,7 +187,7 @@ const getOption = () => {
|
|||
{ offset: 0, color: "rgba(26, 255, 217, 0)" },
|
||||
{ offset: 1, color: "rgba(0, 183, 255, 1)" },
|
||||
]),
|
||||
},
|
||||
// },
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
|
|
|
|||
|
|
@ -176,7 +176,7 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, onBeforeMount, computed } from "vue";
|
||||
import { ref, reactive, onMounted, onBeforeMount,onBeforeUnmount, computed } from "vue";
|
||||
import eP1 from "./echarts_work/eP1.vue";
|
||||
import eP2 from "./echarts_work/eP2.vue";
|
||||
import eP3 from "./echarts_work/eP3.vue";
|
||||
|
|
@ -449,6 +449,8 @@ onMounted(() => {
|
|||
|
||||
onBeforeMount(() => {
|
||||
getData();
|
||||
});
|
||||
onBeforeUnmount(() => {
|
||||
clearInterval(interval); //清除定时器
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue