diff --git a/src/view/analyze.vue b/src/view/analyze.vue index cd6198f..14d7d04 100644 --- a/src/view/analyze.vue +++ b/src/view/analyze.vue @@ -44,12 +44,7 @@ {{ item.name }} - + @@ -119,7 +114,7 @@ - +
@@ -170,38 +165,38 @@ const data = reactive({ { name: "医保支出万元以上", value: "11112", - show: false, + show: true, data: ["100", "120", "199", "133", "210"], //医保支出万元以上 }, { name: "大病住院", value: "120", show: false, - data: ["100", "120", "199", "133", "210"], //大病住院 + data: ["100", "0", "199", "133", "210"], //大病住院 }, { name: "高血压", value: "2345", show: false, - data: ["100", "120", "199", "133", "210"], //高血压 + data: ["100", "10", "199", "133", "210"], //高血压 }, { 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 +223,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"], //一码通 diff --git a/src/view/echart_analyze/eP2.vue b/src/view/echart_analyze/eP2.vue index b0c2c8b..5b2e008 100644 --- a/src/view/echart_analyze/eP2.vue +++ b/src/view/echart_analyze/eP2.vue @@ -8,7 +8,7 @@ import { onBeforeMount, reactive, ref, watch } from "vue"; import * as echarts from "echarts"; const chart = ref(); // 创建DOM引用 - +const clear = ref(false); const props = defineProps({ list: { type: Array, @@ -35,7 +35,17 @@ const props = defineProps({ }, }, }); - +const sers = ref([ + { + name: "背景", + type: "bar", + data: [], + showBackground: true, + backgroundStyle: { + color: "rgba(180, 180, 180, 0.2)", + }, + }, +]); const data = reactive({ list: [], list1: [], @@ -44,6 +54,17 @@ const data = reactive({ option: {}, bg: [], name: [], + ser: [], + len: { + data: [], + top: "0%", + right: "5%", + textStyle: { + fontSize: 16, + color: "#ffffff", + }, + }, + formatter: "{b0}
", }); const getOption = () => { @@ -51,19 +72,11 @@ const getOption = () => { tooltip: { trigger: "axis", padding: [20, 10, 20, 10], - formatter: "{b0}
{a1}:{c1}
{a2}:{c2}", - }, - legend: { - data: data.name, - top: "5%", - right: "10%", - textStyle: { - fontSize: 16, - color: "#ffffff", - }, + formatter: data.formatter, }, + legend: data.len, grid: { - top: "25%", + top: "35%", left: "6%", right: "6%", bottom: "3%", @@ -155,102 +168,27 @@ const getOption = () => { }, }, ], - series: [ - { - name: "背景", - type: "bar", - data: data.bg, - showBackground: true, - backgroundStyle: { - color: "rgba(180, 180, 180, 0.2)", - }, - }, - { - yAxisIndex: 0, - 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: data.list1, - }, - { - yAxisIndex: 1, - name: "糖尿病", - type: "line", - symbol: "emptyCircle", - - symbolSize: 10, - itemStyle: { - borderColor: " #00FCFF ", - borderWidth: 1, - color: "#00FCFF ", - }, - label: { - show: true, - color: "#00FCFF", - formatter: function (data) { - return data.value; - }, - }, - data: data.list2, - }, - ], + series: data.ser, }; }; const setChart = () => { var myChart = echarts.init(chart.value); + if (clear.value) { + myChart.clear(); + } + myChart.setOption(data.option); }; -// const setChart1 = () => { -// if (Object.keys(data.list).length !== 0) { -// data.list1 = []; -// data.list2 = []; -// data.list.data.forEach((item) => { -// // data.list1.push(item.jzrs); //救助人数 -// // data.list2.push(item.jzje); //救助金额 -// data.option.series.push(); -// }); -// data.name = []; -// data.list.forEach((item) => { -// data.name.push(item.name); //数据名 -// }); -// console.log(data.list, data.name, "数据名"); -// } -// }; + const setChart1 = () => { - data.name = []; - if (Object.keys(data.list).length !== 0) { - data.list1 = []; - data.list2 = []; - // data.name = []; - data.option.series = []; - // Define background series - data.option.series.push({ - name: "背景", - type: "bar", - data: data.bg, - showBackground: true, - backgroundStyle: { - color: "rgba(180, 180, 180, 0.2)", - }, - }); + data.ser.length = 0; + sers.value.forEach((item) => { + data.ser.push(item); + }); + if (data.name.length > 0) { data.list.forEach((item) => { - // console.log(item, "数据名111"); - data.option.series.push({ + data.ser.push({ yAxisIndex: 0, name: item.name, type: "line", @@ -268,40 +206,47 @@ const setChart1 = () => { return data.value; }, }, - data: [item.data], + + data: item.data, }); }); - data.list.forEach((item) => { - data.name.push(item.name); //数据名 - }); - - console.log(data.list, data.name, "数据名"); } + console.log("监听", data.ser); + console.log("监听1", sers.value); }; // 监听数据 watch( () => props.list, (newVal, oldVal) => { - setTimeout(() => { + if (newVal.length < oldVal.length) { + clear.value = true; + } else { + clear.value = false; + } data.list = newVal; - // console.log("救助人1", data.list); - getOption(); + 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}
"; + if (data.name.length > 0) { + for (let i = 1; i <= data.name.length; i++) { + let s1 = `{a${i}}:{c${i}}
`; + data.formatter += s1; + } + } + setChart1(); + getOption(); setChart(); - }, 600); } ); // 使用生命钩子 onBeforeMount(() => { setTimeout(() => { data.list = props.list; - data.list1 = props.list1; - data.list2 = props.list2; data.year = props.year; - data.year.forEach(() => { - data.bg.push(0); - }); + sers.value[0].data = data.year.map((item) => 0); setChart1(); getOption(); setChart();