diff --git a/src/view/analyze.vue b/src/view/analyze.vue index cd6198f..77f7161 100644 --- a/src/view/analyze.vue +++ b/src/view/analyze.vue @@ -177,13 +177,13 @@ const data = reactive({ name: "大病住院", value: "120", show: false, - data: ["100", "120", "199", "133", "210"], //大病住院 + data: ["10", "12", "19", "13", "21"], //大病住院 }, { name: "高血压", value: "2345", show: false, - data: ["100", "120", "199", "133", "210"], //高血压 + data: ["100", "10", "199", "13", "210"], //高血压 }, { name: "糖尿病", @@ -260,7 +260,7 @@ const onViewData = (value, i) => { name: item.name, data: item.data, })); - // console.log(data.DataViewing, 666); + console.log(data.DataViewing, 666); // switch (value) { // case "医保支出万元以上": diff --git a/src/view/echart_analyze/eP2.vue b/src/view/echart_analyze/eP2.vue index b0c2c8b..e540c8d 100644 --- a/src/view/echart_analyze/eP2.vue +++ b/src/view/echart_analyze/eP2.vue @@ -35,7 +35,17 @@ const props = defineProps({ }, }, }); - +const ser = ref([ + { + name: "背景", + type: "bar", + data: [], + showBackground: true, + backgroundStyle: { + color: "rgba(180, 180, 180, 0.2)", + }, + }, +]); const data = reactive({ list: [], list1: [], @@ -44,6 +54,7 @@ const data = reactive({ option: {}, bg: [], name: [], + ser: [], }); const getOption = () => { @@ -54,7 +65,7 @@ const getOption = () => { formatter: "{b0}
{a1}:{c1}
{a2}:{c2}", }, legend: { - data: data.name, + data: ['医保支出万元以上','大病住院','高血压','糖尿病'], top: "5%", right: "10%", textStyle: { @@ -155,59 +166,7 @@ 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, }; }; @@ -215,42 +174,12 @@ const setChart = () => { var myChart = echarts.init(chart.value); 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 = ser.value; + 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,14 +197,10 @@ 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, "数据名"); } }; @@ -283,25 +208,19 @@ const setChart1 = () => { watch( () => props.list, (newVal, oldVal) => { - setTimeout(() => { data.list = newVal; - // console.log("救助人1", data.list); - getOption(); + data.name = props.list.map((item) => item.name); + // console.log(55555, data.name); setChart1(); 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); - }); + ser.value[0].data=data.year.map((item) => 0); setChart1(); getOption(); setChart();