趋势图

src/views/business/macroeconomics/trend.vue

@@ -120,6 +120,7 @@ onMounted(() => {
 
 const setOption = (options) => {
   if (chartDom) {
+    chartDom.clear()
     chartDom.setOption(options)
   }
 }
@@ -135,14 +136,14 @@ const initChart = () => {
 
 const lineChart = (data) => {
   const { chart_data, chart_options, title } = data
-
   const xAxis = chart_data.xAxis.list
 
-  const series = chart_data.data.map((e) => {
+  const series = chart_data.data.filter((item) => item.list.some((value) => value !== null)).map((e) => {
+
     return {
       name: e.name,
       type: chart_options.type,
-      color: '#3662FE',
+      color: chart_options.color,
       smooth: true,
       areaStyle: {
         normal: {
@@ -154,11 +155,11 @@ const lineChart = (data) => {
             [
               {
                 offset: 0,
-                color: 'rgba(54, 98, 254, 0.3)',
+                color: hexToRgba(chart_options.color ?? '#ffffff','0.3'),
               },
               {
                 offset: 0.8,
-                color: 'rgba(54, 98, 254, 0)',
+                color: hexToRgba(chart_options.color ?? '#ffffff','0'),
               },
             ],
             false
@@ -243,35 +244,13 @@ const barChart = (data) => {
 
   const xAxis = chart_data.xAxis.list
 
-  const series = chart_data.data.map((e) => {
+  const series = chart_data.data.filter((item) => item.list.some((value) => value !== null)).map((e) => {
     return {
       name: e.name,
       type: chart_options.type,
-      color: '#3662FE',
+      color: chart_options.color,
       smooth: true,
-      areaStyle: {
-        normal: {
-          color: new echarts.graphic.LinearGradient(
-            0,
-            0,
-            0,
-            1,
-            [
-              {
-                offset: 0,
-                color: 'rgba(54, 98, 254, 0.3)',
-              },
-              {
-                offset: 0.8,
-                color: 'rgba(54, 98, 254, 0)',
-              },
-            ],
-            false
-          ),
-          shadowColor: 'rgba(54, 98, 254, 0.1)',
-          shadowBlur: 10,
-        },
-      },
+    
       symbol: 'circle',
       symbolSize: 5,
       data: e.list,
@@ -301,7 +280,7 @@ const barChart = (data) => {
     },
     xAxis: {
       type: 'category',
-      boundaryGap: false,
+      // boundaryGap: false,
       data: xAxis,
       axisLabel: {
         color: 'rgba(255, 255, 255, .4)',
@@ -342,4 +321,13 @@ const barChart = (data) => {
     series: series,
   })
 }
+
+
+function hexToRgba(hexColor,opacity) {
+      const hex = hexColor.replace('#', '')
+      const r = parseInt(hex.substring(0, 2), 16)
+      const g = parseInt(hex.substring(2, 4), 16)
+      const b = parseInt(hex.substring(4, 6), 16)
+      return `rgba(${r}, ${g}, ${b}, ${opacity})`
+}
 </script>