This commit is contained in:
duanxiaohai
parent
a06da0ccf7
commit
da16ed499f
|
|
@ -131,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";
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,257 +0,0 @@
|
|||
<template>
|
||||
<div ref="chart" style="width: 100%; height: 300px"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onBeforeMount, reactive, ref, watch } from "vue";
|
||||
// 局部引入echarts核心模块
|
||||
import * as echarts from "echarts";
|
||||
|
||||
const chart = ref(); // 创建DOM引用
|
||||
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 [];
|
||||
},
|
||||
},
|
||||
});
|
||||
const sers = 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: {
|
||||
data: [],
|
||||
top: "3%",
|
||||
right: "5%",
|
||||
textStyle: {
|
||||
fontSize: 16,
|
||||
color: "#ffffff",
|
||||
},
|
||||
},
|
||||
formatter: "{b0}<br />",
|
||||
});
|
||||
|
||||
const getOption = () => {
|
||||
data.option = {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
padding: [20, 10, 20, 10],
|
||||
formatter: data.formatter,
|
||||
},
|
||||
legend: data.len,
|
||||
grid: {
|
||||
top: "35%",
|
||||
left: "6%",
|
||||
right: "6%",
|
||||
bottom: "3%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: data.year,
|
||||
axisLabel: {
|
||||
//坐标轴刻度标签的相关设置
|
||||
textStyle: {
|
||||
color: "#ffffff",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
name: "人数/人",
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(255, 255, 255, 0.2)",
|
||||
fontSize: 16,
|
||||
width: 1,
|
||||
},
|
||||
},
|
||||
min: 0, // 设置Y轴最小值
|
||||
max: function (value) {
|
||||
// 自定义Y轴最大值，确保数据点显示在顶部
|
||||
return Math.ceil(Math.max(value.max, value.max * 1.2) / 50) * 50;
|
||||
},
|
||||
nameTextStyle: {
|
||||
// 设置Y轴名称的样式
|
||||
fontSize: 14, // 这里设置字体大小为20
|
||||
},
|
||||
// axisLabel: {
|
||||
// //坐标轴刻度标签的相关设置
|
||||
// textStyle: {
|
||||
// color: "#ffffff",
|
||||
// fontSize: 16,
|
||||
// },
|
||||
// },
|
||||
axisLine: {
|
||||
//y轴线的颜色以及宽度
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#ffffff",
|
||||
fontSize: 16,
|
||||
width: 1,
|
||||
type: "solid",
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "value",
|
||||
// name: "糖尿病",
|
||||
splitLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "rgba(255, 255, 255, 0.2)",
|
||||
fontSize: 16,
|
||||
width: 1,
|
||||
},
|
||||
},
|
||||
min: 0, // 设置Y轴最小值
|
||||
max: function (value) {
|
||||
// 自定义Y轴最大值，确保数据点显示在顶部
|
||||
return Math.ceil(Math.max(value.max, value.max * 1.6) / 50) * 50;
|
||||
},
|
||||
nameTextStyle: {
|
||||
// 设置Y轴名称的样式
|
||||
fontSize: 14, // 这里设置字体大小为20
|
||||
},
|
||||
axisLabel: {
|
||||
show: false,
|
||||
//坐标轴刻度标签的相关设置
|
||||
},
|
||||
axisLine: {
|
||||
//y轴线的颜色以及宽度
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#ffffff",
|
||||
fontSize: 16,
|
||||
width: 1,
|
||||
type: "solid",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
series: data.ser,
|
||||
};
|
||||
};
|
||||
|
||||
const setChart = () => {
|
||||
var myChart = echarts.init(chart.value);
|
||||
if (clear.value) {
|
||||
myChart.clear();
|
||||
}
|
||||
|
||||
myChart.setOption(data.option);
|
||||
};
|
||||
|
||||
const setChart1 = () => {
|
||||
data.ser.length = 0;
|
||||
sers.value.forEach((item) => {
|
||||
data.ser.push(item);
|
||||
});
|
||||
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,
|
||||
});
|
||||
});
|
||||
}
|
||||
// console.log("监听", data.ser);
|
||||
// console.log("监听1", sers.value);
|
||||
};
|
||||
|
||||
// 监听数据
|
||||
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;
|
||||
sers.value[0].data = data.year.map((item) => 0);
|
||||
data.formatter = "{b0}<br />";
|
||||
if (data.name.length > 0) {
|
||||
for (let i = 1; i <= data.name.length; i++) {
|
||||
let s1 = `{a${i}}:{c${i}}<br />`;
|
||||
data.formatter += s1;
|
||||
}
|
||||
}
|
||||
|
||||
setChart1();
|
||||
getOption();
|
||||
setChart();
|
||||
}
|
||||
);
|
||||
// 使用生命钩子
|
||||
onBeforeMount(() => {
|
||||
setTimeout(() => {
|
||||
data.list = props.list;
|
||||
data.year = props.year;
|
||||
sers.value[0].data = data.year.map((item) => 0);
|
||||
setChart1();
|
||||
getOption();
|
||||
setChart();
|
||||
}, 600);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -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