From c891f18df1809fdea3764e0df2867ceb52a745f0 Mon Sep 17 00:00:00 2001 From: yaoyuhao Date: Mon, 17 Jun 2024 09:52:45 +0800 Subject: [PATCH 1/6] 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(); From a3eb85e5c7d7fdb5d8e02743cc238daa85520e08 Mon Sep 17 00:00:00 2001 From: duanxiaohai <1812246227@qq.com> Date: Mon, 17 Jun 2024 09:58:05 +0800 Subject: [PATCH 2/6] gx --- src/view/analyze.vue | 34 +++---- src/view/echart_analyze/eP2.vue | 175 +++++++++++--------------------- 2 files changed, 77 insertions(+), 132 deletions(-) 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(); From a06da0ccf764d0545598e557bb0001eee32519b3 Mon Sep 17 00:00:00 2001 From: duanxiaohai <1812246227@qq.com> Date: Mon, 17 Jun 2024 10:30:46 +0800 Subject: [PATCH 3/6] gx --- src/view/analyze.vue | 2 +- src/view/echart_analyze/eP2 copy.vue | 257 +++++++++++++++++++++++++++ src/view/echart_analyze/eP2.vue | 218 +++++++++-------------- 3 files changed, 343 insertions(+), 134 deletions(-) create mode 100644 src/view/echart_analyze/eP2 copy.vue diff --git a/src/view/analyze.vue b/src/view/analyze.vue index 7cb42a0..4757e0f 100644 --- a/src/view/analyze.vue +++ b/src/view/analyze.vue @@ -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 copy.vue b/src/view/echart_analyze/eP2 copy.vue new file mode 100644 index 0000000..f0e3e16 --- /dev/null +++ b/src/view/echart_analyze/eP2 copy.vue @@ -0,0 +1,257 @@ + + + + + diff --git a/src/view/echart_analyze/eP2.vue b/src/view/echart_analyze/eP2.vue index 5b2e008..59926d2 100644 --- a/src/view/echart_analyze/eP2.vue +++ b/src/view/echart_analyze/eP2.vue @@ -1,72 +1,92 @@ From a520321e706680bf1740a20c0ea9739f0d794614 Mon Sep 17 00:00:00 2001 From: yaoyuhao Date: Mon, 17 Jun 2024 10:43:30 +0800 Subject: [PATCH 4/6] 1 --- src/view/echart_analyze/right2.vue | 545 +++++++++++++++-------------- 1 file changed, 280 insertions(+), 265 deletions(-) diff --git a/src/view/echart_analyze/right2.vue b/src/view/echart_analyze/right2.vue index 7f8b16a..c7b8e3a 100644 --- a/src/view/echart_analyze/right2.vue +++ b/src/view/echart_analyze/right2.vue @@ -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); }); + + From da16ed499fe90e0a0664aea3efb06a52e6309113 Mon Sep 17 00:00:00 2001 From: duanxiaohai <1812246227@qq.com> Date: Mon, 17 Jun 2024 11:50:40 +0800 Subject: [PATCH 5/6] gx --- src/view/analyze.vue | 80 +++++---- src/view/echart_analyze/eP2 copy.vue | 257 --------------------------- src/view/work.vue | 4 +- 3 files changed, 45 insertions(+), 296 deletions(-) delete mode 100644 src/view/echart_analyze/eP2 copy.vue diff --git a/src/view/analyze.vue b/src/view/analyze.vue index 4757e0f..98d2609 100644 --- a/src/view/analyze.vue +++ b/src/view/analyze.vue @@ -131,7 +131,14 @@ diff --git a/src/view/work.vue b/src/view/work.vue index a6530d5..fc9f9d2 100644 --- a/src/view/work.vue +++ b/src/view/work.vue @@ -176,7 +176,7 @@ From 5bf970faf60a66b4a2607ea3bb632e2935b3472c Mon Sep 17 00:00:00 2001 From: duanxiaohai <1812246227@qq.com> Date: Mon, 17 Jun 2024 17:04:26 +0800 Subject: [PATCH 6/6] gx --- src/view/analyze.vue | 38 +++++++++++++++++++++--------- src/view/echart_analyze/eP2.vue | 19 +++++++++++---- src/view/echart_analyze/right1.vue | 4 ++-- src/view/echart_analyze/ylXZZC.vue | 4 ++-- 4 files changed, 45 insertions(+), 20 deletions(-) diff --git a/src/view/analyze.vue b/src/view/analyze.vue index 98d2609..23b0f17 100644 --- a/src/view/analyze.vue +++ b/src/view/analyze.vue @@ -60,7 +60,7 @@
{{ item }} @@ -573,8 +573,10 @@ onBeforeUnmount(() => { display: flex; flex-wrap: wrap; color: #ffffff; + margin-top: 14px; .ViewDataTop { width: 114px; + height: 132px; display: flex; align-items: center; flex-direction: column; @@ -585,9 +587,10 @@ onBeforeUnmount(() => { 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); @@ -598,18 +601,31 @@ onBeforeUnmount(() => { } .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); + } } } } diff --git a/src/view/echart_analyze/eP2.vue b/src/view/echart_analyze/eP2.vue index 59926d2..59c9fa9 100644 --- a/src/view/echart_analyze/eP2.vue +++ b/src/view/echart_analyze/eP2.vue @@ -39,7 +39,18 @@ const data = reactive({ color: "#ffffff", }, }, - bgColor: ["#2468FF", "#E8FF00", "#FF5733", "#33FF57", "#3357FF", "#FF33A1", "#57FF33", "#33FFA1", "#A133FF", "#FF5733"], + bgColor: [ + "#2468FF", + "#E8FF00", + "#FF5733", + "#33FF57", + "#3357FF", + "#FF33A1", + "#57FF33", + "#33FFA1", + "#A133FF", + "#FF5733", + ], }); const updateSeries = () => { @@ -106,10 +117,8 @@ const getOption = () => { type: "category", data: data.year, axisLabel: { - textStyle: { - color: "#ffffff", - fontSize: 16, - }, + color: "#ffffff", + fontSize: 16, }, }, yAxis: [ diff --git a/src/view/echart_analyze/right1.vue b/src/view/echart_analyze/right1.vue index 4eb4978..1968636 100644 --- a/src/view/echart_analyze/right1.vue +++ b/src/view/echart_analyze/right1.vue @@ -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, diff --git a/src/view/echart_analyze/ylXZZC.vue b/src/view/echart_analyze/ylXZZC.vue index a3ff8d6..aee5d66 100644 --- a/src/view/echart_analyze/ylXZZC.vue +++ b/src/view/echart_analyze/ylXZZC.vue @@ -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,