From 7a3efa6804c288d906dbf32ddcae961c32127677 Mon Sep 17 00:00:00 2001
From: junjie <junjie.xia@fit2cloud.com>
Date: Wed, 1 Sep 2021 10:12:24 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=A7=86=E5=9B=BE=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E7=BB=84=E5=90=88=E5=9B=BE;=E6=8A=98=E7=BA=BF=E9=9D=A2?=
 =?UTF-8?q?=E7=A7=AF=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/views/chart/chart/chart.js       | 57 +++++++++++++++++++
 frontend/src/views/chart/chart/line/line.js   |  8 ++-
 frontend/src/views/chart/chart/mix/mix.js     |  8 ++-
 .../views/chart/components/ChartComponent.vue |  6 +-
 4 files changed, 73 insertions(+), 6 deletions(-)

diff --git a/frontend/src/views/chart/chart/chart.js b/frontend/src/views/chart/chart/chart.js
index fecf05878d..1dfd989b5d 100644
--- a/frontend/src/views/chart/chart/chart.js
+++ b/frontend/src/views/chart/chart/chart.js
@@ -736,3 +736,60 @@ export const BASE_TREEMAP = {
     }
   ]
 }
+
+export const BASE_MIX = {
+  title: {
+    text: '',
+    textStyle: {
+      fontWeight: 'normal'
+    }
+  },
+  grid: {
+    containLabel: true
+  },
+  tooltip: {},
+  legend: {
+    show: true,
+    type: 'scroll',
+    itemWidth: 10,
+    itemHeight: 10,
+    icon: 'rect',
+    data: []
+  },
+  xAxis: {
+    data: []
+  },
+  yAxis: {
+    type: 'value'
+  },
+  series: [],
+  dataZoom: [
+    {
+      type: 'slider',
+      show: false,
+      xAxisIndex: [0],
+      start: 0,
+      end: 100
+    },
+    {
+      type: 'slider',
+      show: false,
+      yAxisIndex: [0],
+      left: '93%',
+      start: 0,
+      end: 100
+    },
+    {
+      type: 'inside',
+      xAxisIndex: [0],
+      start: 0,
+      end: 100
+    },
+    {
+      type: 'inside',
+      yAxisIndex: [0],
+      start: 0,
+      end: 100
+    }
+  ]
+}
diff --git a/frontend/src/views/chart/chart/line/line.js b/frontend/src/views/chart/chart/line/line.js
index bce0a4ac29..d8439617b8 100644
--- a/frontend/src/views/chart/chart/line/line.js
+++ b/frontend/src/views/chart/chart/line/line.js
@@ -36,8 +36,12 @@ export function baseLineOption(chart_option, chart) {
           type: customAttr.size.lineType
         }
         y.smooth = customAttr.size.lineSmooth
-        y.areaStyle = {
-          opacity: customAttr.size.lineArea ? 0.6 : 0
+        if (customAttr.size.lineArea) {
+          y.areaStyle = {
+            opacity: 0.6
+          }
+        } else {
+          delete y.areaStyle
         }
       }
       // label
diff --git a/frontend/src/views/chart/chart/mix/mix.js b/frontend/src/views/chart/chart/mix/mix.js
index 9237249e76..493f304679 100644
--- a/frontend/src/views/chart/chart/mix/mix.js
+++ b/frontend/src/views/chart/chart/mix/mix.js
@@ -49,8 +49,12 @@ export function baseMixOption(chart_option, chart) {
             type: customAttr.size.lineType
           }
           y.smooth = customAttr.size.lineSmooth
-          y.areaStyle = {
-            opacity: customAttr.size.lineArea ? 0.6 : 0
+          if (customAttr.size.lineArea) {
+            y.areaStyle = {
+              opacity: 0.6
+            }
+          } else {
+            delete y.areaStyle
           }
         }
         // scatter
diff --git a/frontend/src/views/chart/components/ChartComponent.vue b/frontend/src/views/chart/components/ChartComponent.vue
index 8b2463aff9..981b7b7831 100644
--- a/frontend/src/views/chart/components/ChartComponent.vue
+++ b/frontend/src/views/chart/components/ChartComponent.vue
@@ -16,7 +16,8 @@ import {
   BASE_GAUGE,
   BASE_MAP,
   BASE_SCATTER,
-  BASE_TREEMAP
+  BASE_TREEMAP,
+  BASE_MIX
 } from '../chart/chart'
 import { baseBarOption, stackBarOption, horizontalBarOption, horizontalStackBarOption } from '../chart/bar/bar'
 import { baseLineOption, stackLineOption } from '../chart/line/line'
@@ -152,8 +153,9 @@ export default {
       } else if (chart.type === 'treemap') {
         chart_option = baseTreemapOption(JSON.parse(JSON.stringify(BASE_TREEMAP)), chart)
       } else if (chart.type === 'chart-mix') {
-        chart_option = baseMixOption(JSON.parse(JSON.stringify(BASE_BAR)), chart)
+        chart_option = baseMixOption(JSON.parse(JSON.stringify(BASE_MIX)), chart)
       }
+      console.log(JSON.stringify(chart_option))
 
       if (chart.type === 'map') {
         const customAttr = JSON.parse(chart.customAttr)