From 1f4cf37bd7c08f365ba4569f7621ecec6350d13f Mon Sep 17 00:00:00 2001 From: yaoyuhao Date: Fri, 16 Aug 2024 17:05:07 +0800 Subject: [PATCH] gx --- src/view/echart_analyze/dialog_nlfb.vue | 194 +++++++++++++++++++++--- 1 file changed, 177 insertions(+), 17 deletions(-) diff --git a/src/view/echart_analyze/dialog_nlfb.vue b/src/view/echart_analyze/dialog_nlfb.vue index 04f415e..5e19862 100644 --- a/src/view/echart_analyze/dialog_nlfb.vue +++ b/src/view/echart_analyze/dialog_nlfb.vue @@ -33,9 +33,12 @@ const props = defineProps({ }, }); const data = reactive({ - list: [], - list2: [], - list3: [], + list: [709, 3424, 2064, 2980, ,], + unlist: [, , , 2980, 1790, 3100], + list2: [1548, 5895, 2753, 4602, ,], + unlist2: [, , , 4602, 2030, 3900], + list3: [180, 930, 632, 780, ,], + unlist3: [, , , 780, 520, 600], year: [], option: {}, bg: [], @@ -44,10 +47,11 @@ const data = reactive({ const chart = ref(); // 创建DOM引用 const getOption = () => { data.option = { - tooltip: { - trigger: "axis", - padding: [20, 10, 20, 10], - }, + // tooltip: { + // trigger: "axis", + // padding: [20, 10, 20, 10], + // formatter: "{b0}:
{a0}:{c0}
{a1}:{c1}
{a2}:{c2}", + // }, legend: { data: ["0-18岁", "19-60岁", "60岁以上"], top: "3%", @@ -104,7 +108,7 @@ const getOption = () => { }, series: [ { - xAxisIndex: 0, + xAxisIndex: 0, name: "0-18岁", type: "line", // stack: "Total", @@ -154,7 +158,7 @@ const getOption = () => { data: data.list, }, { - xAxisIndex: 0, + xAxisIndex: 0, name: "19-60岁", type: "line", // stack: "Total", @@ -170,7 +174,7 @@ const getOption = () => { show: true, color: "#ffffff", position: "top", - fontSize: 16, + fontSize: 16, formatter: function (data) { return data.value; }, @@ -203,7 +207,7 @@ const getOption = () => { data: data.list2, }, { - xAxisIndex: 0, + xAxisIndex: 0, name: "60岁以上", type: "line", // stack: "Total", @@ -219,7 +223,7 @@ const getOption = () => { show: true, color: "#ffffff", position: "top", - fontSize: 16, + fontSize: 16, formatter: function (data) { return data.value; }, @@ -250,6 +254,161 @@ const getOption = () => { }, data: data.list3, }, + { + xAxisIndex: 0, + name: "0-18岁", + type: "line", + // stack: "Total", + symbol: "emptyCircle", + smooth: true, + symbolSize: 10, + lineStyle: { + type: "dashed", // 设置为虚线，'dashed' 或 'dotted' 类型 + }, + itemStyle: { + borderColor: "#E8FF00", + borderWidth: 1, + color: "#E8FF00", + }, + label: { + show: true, + color: "#ffffff", + position: "top", + fontSize: 16, + + formatter: function (data) { + return data.value; + }, + }, + areaStyle: { + color: "#F4F65B", + normal: { + //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。 + color: new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + // color: 'RGBA(184, 204, 241, 1)' + color: "rgba(255, 234, 90, 0.50)", + }, + { + offset: 1, + color: "rgba(255, 234, 90, 0)", + }, + ], + false + ), + shadowBlur: 0, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。 + }, + }, + data: data.unlist, + }, + { + xAxisIndex: 0, + name: "19-60岁", + type: "line", + symbol: "emptyCircle", + smooth: true, + symbolSize: 10, + lineStyle: { + type: "dashed", // 设置为虚线，'dashed' 或 'dotted' 类型 + }, + itemStyle: { + borderColor: "#00FCFF", + borderWidth: 1, + color: "#00FCFF", + }, + label: { + show: true, + color: "#ffffff", + position: "top", + fontSize: 16, + formatter: function (data) { + return data.value; + }, + }, + areaStyle: { + color: "#F4F65B", + normal: { + //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。 + color: new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + // color: 'RGBA(184, 204, 241, 1)' + color: "rgba(0, 252, 255, 0.50)", + }, + { + offset: 1, + color: "rgba(0, 252, 255, 0)", + }, + ], + false + ), + shadowBlur: 0, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。 + }, + }, + data: data.unlist2, + }, + { + xAxisIndex: 0, + name: "60岁以上", + type: "line", + // stack: "Total", + symbol: "emptyCircle", + smooth: true, + symbolSize: 10, + lineStyle: { + type: "dashed", // 设置为虚线，'dashed' 或 'dotted' 类型 + }, + itemStyle: { + borderColor: "#00A8FF", + borderWidth: 1, + color: "#00A8FF", + }, + label: { + show: true, + color: "#ffffff", + position: "top", + fontSize: 16, + formatter: function (data) { + return data.value; + }, + }, + areaStyle: { + color: "#00A8FF", + normal: { + //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。 + color: new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: "rgba(0, 168, 255,0.50)", + }, + { + offset: 1, + color: "rgba(0, 168, 255,0)", + }, + ], + false + ), + shadowBlur: 0, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。 + }, + }, + data: data.unlist3, + }, ], }; }; @@ -257,8 +416,9 @@ watch( () => props.list, (newValue, oldValue) => { setTimeout(() => { - data.list = props.list; - data.list2 = props.list2; + // data.list = props.list; + // data.list2 = props.list2; + // data.list3 = props.list3; data.year = props.year; getOption(); setChart(); @@ -276,9 +436,9 @@ const setChart = () => { onBeforeMount(() => { setTimeout(() => { - data.list = props.list; - data.list2 = props.list2; - data.list3 = props.list3; + // data.list = props.list; + // data.list2 = props.list2; + // data.list3 = props.list3; data.year = props.year; getOption(); setChart();