feat(gradientarea): 新增面积图转折线图效果

src/views/bi/competitor/sycm_prd/GradientArea.vue

@@ -34,10 +34,23 @@ const props = defineProps({
 const echartsRef = ref(null)
 const chart = shallowRef(null)
 let myThousand = false // 是否显示万单位
+let isArea = ref(true) // 是否面积图
 
 const emits = defineEmits(['changeType'])
 
 const setOptions = () => {
+  // 面积图是否切换
+  const seriesResult = props.chartData.series.map(o => {
+    if (!isArea.value) {
+      const obj = {...o}
+      delete obj.areaStyle
+      delete obj.lineStyle
+      return obj
+    } else {
+      return o
+    }
+  })
+
   chart.value.setOption({
     tooltip: {
       trigger: 'axis',
@@ -87,6 +100,14 @@ const setOptions = () => {
           onclick: () => {
             emits('changeType', 'table')
           }
+        },
+        myTool2: {
+          show: true,
+          title: '面积/折线图',
+          icon: 'path://M5,5 L5,30 L15,30 L25,20 L35,30 L45,30 L45,5 Z',
+          onclick: () => {
+            isArea.value = !isArea.value
+          }
         }
       }
     },
@@ -108,7 +129,7 @@ const setOptions = () => {
         type: 'value'
       }
     ],
-    series: props.chartData.series
+    series: seriesResult
   }, true)
 }
 

src/views/bi/competitor/sycm_store/GradientArea.vue

@@ -34,10 +34,22 @@ const props = defineProps({
 const echartsRef = ref(null)
 const chart = shallowRef(null)
 let myThousand = false // 是否显示万单位
+let isArea = ref(true) // 是否面积图
 
 const emits = defineEmits(['changeType'])
 
 const setOptions = () => {
+  // 面积图是否切换
+  const seriesResult = props.chartData.series.map(o => {
+    if (!isArea.value) {
+      const obj = { ...o }
+      delete obj.areaStyle
+      delete obj.lineStyle
+      return obj
+    } else {
+      return o
+    }
+  })
   chart.value.setOption({
     tooltip: {
       trigger: 'axis',
@@ -87,6 +99,14 @@ const setOptions = () => {
           onclick: () => {
             emits('changeType', 'table')
           }
+        },
+        myTool2: {
+          show: true,
+          title: '面积/折线图',
+          icon: 'path://M5,5 L5,30 L15,30 L25,20 L35,30 L45,30 L45,5 Z',
+          onclick: () => {
+            isArea.value = !isArea.value
+          }
         }
       }
     },
@@ -108,7 +128,7 @@ const setOptions = () => {
         type: 'value'
       }
     ],
-    series: props.chartData.series
+    series: seriesResult
   }, true)
 }
 

src/views/index.vue

 <template>
   <div class="dashboard-editor-container app-container">
     <panel-group @handleSetLineChartData="handleSetLineChartData" />
-    <div class="row">
-      <common-menu></common-menu>
-    </div>
-
-    <el-row :gutter="32" class="row">
+    <common-menu class="row"></common-menu>
+    <el-row :gutter="32"
+      class="row">
       <el-col :xs="24"
         :sm="24"
         :lg="8">
@@ -29,7 +27,7 @@
       </el-col>
     </el-row>
     <el-row class="line-chart row">
-      <line-chart :chartData="lineChartData"/>
+      <line-chart :chartData="lineChartData" />
     </el-row>
   </div>
 </template>
@@ -69,7 +67,7 @@ const handleSetLineChartData = (type) => {
 <style lang="scss"
   scoped>
   .dashboard-editor-container {
-    .row{
+    .row {
       margin-top: 20px;
     }