From 02d456317e787f92c42e0126117de7ae9e334b73 Mon Sep 17 00:00:00 2001 From: yaoyuhao Date: Fri, 14 Jun 2024 14:03:24 +0800 Subject: [PATCH 1/4] 1 --- src/view/echart_analyze/right2.vue | 52 ++++++------------------------ src/view/yl.vue | 21 ++++++++++-- 2 files changed, 28 insertions(+), 45 deletions(-) diff --git a/src/view/echart_analyze/right2.vue b/src/view/echart_analyze/right2.vue index 5acab87..7f8b16a 100644 --- a/src/view/echart_analyze/right2.vue +++ b/src/view/echart_analyze/right2.vue @@ -10,6 +10,7 @@ import * as echarts from "echarts"; const chart = ref(); // 创建DOM引用 const colors = [ + { left: "rgba(234, 162, 57, .16)", right: "rgba(234, 162, 57, .6)", @@ -31,41 +32,7 @@ const colors = [ bottom: "rgba(60, 143, 255, .46)", front: "rgba(60, 143, 255, .66)", }, - { - left: "rgba(234, 162, 57, .16)", - right: "rgba(234, 162, 57, .6)", - top: "rgba(234, 162, 57, 1)", - bottom: "rgba(234, 162, 57, .46)", - front: "rgba(234, 162, 57, .66)", - }, - { - left: "rgba(14, 252, 255, .16)", - right: "rgba(14, 252, 255, .6)", - top: "rgba(14, 252, 255, 1)", - bottom: "rgba(14, 252, 255, .46)", - 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)", - }, - { - left: "rgba(234, 162, 57, .16)", - right: "rgba(234, 162, 57, .6)", - top: "rgba(234, 162, 57, 1)", - bottom: "rgba(234, 162, 57, .46)", - front: "rgba(234, 162, 57, .66)", - }, - { - left: "rgba(14, 252, 255, .16)", - right: "rgba(14, 252, 255, .6)", - top: "rgba(14, 252, 255, 1)", - bottom: "rgba(14, 252, 255, .46)", - front: "rgba(14, 252, 255, .66)", - }, + ]; const maxList = [90, 90, 90, 90, 90, 90, 90]; const valueList = [20, 53, 47, 65, 29, 11, 50]; @@ -216,7 +183,8 @@ const option = { color: "#fff", fontSize: 16, formatter: function (value) { - return value.length > 2 ? value.slice(0, 2) + "..." : value; + + return value.length > 3 ? value.slice(0, 2) + "..." : value; }, }, }, @@ -367,7 +335,7 @@ const option = { xAxisPoint: api.coord([api.value(0), 0]), }, style: { - fill: colors[params.dataIndexInside]["bottom"], + fill: colors[`${params.dataIndexInside % 3}`]["bottom"], }, }, { @@ -381,7 +349,7 @@ const option = { xAxisPoint: api.coord([api.value(0), 0]), }, style: { - fill: colors[params.dataIndexInside]["left"], + fill: colors[`${params.dataIndexInside % 3}`]["left"], }, }, { @@ -395,7 +363,7 @@ const option = { xAxisPoint: api.coord([api.value(0), 0]), }, style: { - fill: colors[params.dataIndexInside]["front"], + fill: colors[`${params.dataIndexInside % 3}`]["front"], }, }, { @@ -409,7 +377,7 @@ const option = { xAxisPoint: api.coord([api.value(0), 0]), }, style: { - fill: colors[params.dataIndexInside]["right"], + fill: colors[`${params.dataIndexInside % 3}`]["right"], }, }, { @@ -423,7 +391,7 @@ const option = { xAxisPoint: api.coord([api.value(0), 0]), }, style: { - fill: colors[params.dataIndexInside]["top"], + fill: colors[`${params.dataIndexInside % 3}`]["top"], }, }, ], @@ -442,7 +410,7 @@ const option = { position: "top", color: "#ffffff", formatter: function (data) { - return data.value; + return data.value -5; }, }, itemStyle: { diff --git a/src/view/yl.vue b/src/view/yl.vue index 6159709..5a03152 100644 --- a/src/view/yl.vue +++ b/src/view/yl.vue @@ -204,7 +204,7 @@
@@ -364,6 +364,16 @@ const yl_column = ref([ property: "rzlrsl", }, ]); +const yl_column2 = ref([ + { + label: "机构名称", + property: "mc", + }, + { + label: "机构地址", + property: "dz", + }, +]); // 表格分页 const pagination = reactive({ total: 100, @@ -379,10 +389,15 @@ const chooseVillage = (village) => { tableType.url = "/api/ggfwyth/zcxxList"; getTownDetail(); }; -const showDialog = (title, url) => { +const showDialog = (title, url,coulumn) => { tableType.title = title; tableType.url = url; - tableType.columns = yl_column.value; + if(coulumn=='num'){ + tableType.columns = yl_column2.value; + }else{ + tableType.columns = yl_column.value; + } + getTable(url, pagination.currentPage); }; //获取表格数据 From 5099a627e3ee5a19de43b25592dc1e3cadf46d5d Mon Sep 17 00:00:00 2001 From: yaoyuhao Date: Fri, 14 Jun 2024 16:57:58 +0800 Subject: [PATCH 2/4] 1 --- src/view/analyze.vue | 6 +- src/view/echart_analyze/eP2.vue | 127 ++++++-------------------------- 2 files changed, 26 insertions(+), 107 deletions(-) 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(); From c0f66dc0a91b4408bd9c9529b770e03fd902cfe0 Mon Sep 17 00:00:00 2001 From: yaoyuhao Date: Fri, 14 Jun 2024 17:02:59 +0800 Subject: [PATCH 3/4] 1 --- src/view/echart_analyze/eP2.vue | 22 ++++++++++++---------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/src/view/echart_analyze/eP2.vue b/src/view/echart_analyze/eP2.vue index e540c8d..38e4e68 100644 --- a/src/view/echart_analyze/eP2.vue +++ b/src/view/echart_analyze/eP2.vue @@ -55,6 +55,15 @@ const data = reactive({ bg: [], name: [], ser: [], + len: { + data: [], + top: "5%", + right: "10%", + textStyle: { + fontSize: 16, + color: "#ffffff", + }, + }, }); const getOption = () => { @@ -64,15 +73,7 @@ const getOption = () => { padding: [20, 10, 20, 10], formatter: "{b0}
{a1}:{c1}
{a2}:{c2}", }, - legend: { - data: ['医保支出万元以上','大病住院','高血压','糖尿病'], - top: "5%", - right: "10%", - textStyle: { - fontSize: 16, - color: "#ffffff", - }, - }, + legend: data.len, grid: { top: "25%", left: "6%", @@ -210,6 +211,7 @@ watch( (newVal, oldVal) => { data.list = newVal; data.name = props.list.map((item) => item.name); + data.len.data=data.name; // console.log(55555, data.name); setChart1(); setChart(); @@ -220,7 +222,7 @@ onBeforeMount(() => { setTimeout(() => { data.list = props.list; data.year = props.year; - ser.value[0].data=data.year.map((item) => 0); + ser.value[0].data = data.year.map((item) => 0); setChart1(); getOption(); setChart(); From c891f18df1809fdea3764e0df2867ceb52a745f0 Mon Sep 17 00:00:00 2001 From: yaoyuhao Date: Mon, 17 Jun 2024 09:52:45 +0800 Subject: [PATCH 4/4] gx --- src/view/echart_analyze/eP2.vue | 44 +++++++++++++++++++++++++-------- 1 file changed, 34 insertions(+), 10 deletions(-) diff --git a/src/view/echart_analyze/eP2.vue b/src/view/echart_analyze/eP2.vue index 38e4e68..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,7 @@ const props = defineProps({ }, }, }); -const ser = ref([ +const sers = ref([ { name: "背景", type: "bar", @@ -57,13 +57,14 @@ const data = reactive({ ser: [], len: { data: [], - top: "5%", - right: "10%", + top: "0%", + right: "5%", textStyle: { fontSize: 16, color: "#ffffff", }, }, + formatter: "{b0}
", }); const getOption = () => { @@ -71,11 +72,11 @@ const getOption = () => { tooltip: { trigger: "axis", padding: [20, 10, 20, 10], - formatter: "{b0}
{a1}:{c1}
{a2}:{c2}", + formatter: data.formatter, }, legend: data.len, grid: { - top: "25%", + top: "35%", left: "6%", right: "6%", bottom: "3%", @@ -173,11 +174,18 @@ const getOption = () => { const setChart = () => { var myChart = echarts.init(chart.value); + if (clear.value) { + myChart.clear(); + } + myChart.setOption(data.option); }; const setChart1 = () => { - data.ser = ser.value; + data.ser.length = 0; + sers.value.forEach((item) => { + data.ser.push(item); + }); if (data.name.length > 0) { data.list.forEach((item) => { data.ser.push({ @@ -203,17 +211,33 @@ const setChart1 = () => { }); }); } + 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; - // console.log(55555, data.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(); } ); @@ -222,7 +246,7 @@ onBeforeMount(() => { setTimeout(() => { data.list = props.list; data.year = props.year; - ser.value[0].data = data.year.map((item) => 0); + sers.value[0].data = data.year.map((item) => 0); setChart1(); getOption(); setChart();