完成污区图

src/components/echarts/MyEchart.vue

@@ -1,9 +1,11 @@
 <template>
-    <div ref="chartRef" class="my-chart" />
+    <div class="chart">
+        <div ref="chartRef" class="my-chart" />
+    </div>
 </template>
 
 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, ref, defineExpose, watch } from 'vue'
+import { onBeforeUnmount, onMounted, ref, defineExpose, watch, nextTick } from 'vue'
 // import echarts from './echarts'
 import * as echarts from 'echarts' // 全引入
 import 'echarts-gl'
@@ -11,12 +13,15 @@ import 'echarts-liquidfill'
 import 'echarts/lib/component/dataZoom'
 import { color, gradeColor3 } from './color'
 import { useConfig } from '@/stores/config'
+import { saveAs } from 'file-saver'
+import { t } from 'vxe-table'
+// import { nextTick } from 'process'
 
 const config = useConfig()
 color[0] = config.layout.elementUiPrimary[0]
 const chartRef = ref<HTMLDivElement>()
 
-const props = defineProps(['options'])
+const props = defineProps(['options', 'isInterVal', 'pieInterVal'])
 let chart: echarts.ECharts | any = null
 const resizeHandler = () => {
     // 不在视野中的时候不进行resize
@@ -29,16 +34,18 @@ const resizeHandler = () => {
     })
 }
 const initChart = () => {
-    chart?.dispose()
-
+    if (!props.isInterVal && !props.pieInterVal) {
+        chart?.dispose()
+    }
+    // chart?.dispose()
     chart = echarts.init(chartRef.value as HTMLDivElement)
     const options = {
         title: {
             left: 'center',
-            textStyle: {
-                color: '#000',
-                fontSize: 18
-            },
+            // textStyle: {
+            color: '#000',
+            fontSize: 18,
+            // },
             ...(props.options?.title || null)
         },
         tooltip: {
@@ -58,23 +65,37 @@ const initChart = () => {
             },
             backgroundColor: 'rgba(0,0,0,0.35)',
             borderWidth: 0,
+            confine:true,
             ...(props.options?.tooltip || null)
         },
+        toolbox: {
+            right: 20,
+            top: 20,
+            feature: {
+                saveAsImage: {
+                    title: '保存图片',
+                },
+                ...(props.options?.toolbox?.featureProps || null),
+               
+            },
+            // },
+            ...(props.options?.toolbox || null)
+        },
         legend: {
             right: 20,
             top: 0,
             itemGap: 10,
             itemStyle: {},
-            textStyle: {
-                fontSize: 12,
-                padding: [2, 0, 0, 0] //[上、右、下、左]
-            },
+            // textStyle: {
+            fontSize: 12,
+            padding: [2, 0, 0, 0], //[上、右、下、左]
+            // },
             itemWidth: 15,
             itemHeight: 10,
             ...(props.options?.legend || null)
         },
         grid: {
-            top: '50px',
+            top: '60px',
             left: '30px',
             right: '70px',
             bottom: props.options?.options?.dataZoom === null ? '10px' : '40px',
@@ -98,14 +119,14 @@ const initChart = () => {
                 end: 100
             }
         ],
-        toolbox: props.options?.toolbox || {},
         color: props.options?.color || color,
         series: props.options?.series,
         ...props.options?.options
     }
     handlerBar(options)
     // 处理柱状图
-    chart.setOption(options)
+    chart.setOption(options,true)
+
     setTimeout(() => {
         chart.resize()
     }, 0)
@@ -151,7 +172,10 @@ const handlerYAxis = () => {
         },
         axisLabel: {
             color: '#000',
-            fontSize: 14
+            fontSize: 14,
+            formatter: function (value) {
+                return value.toFixed(0) // 格式化显示为一位小数
+            }
         },
         splitLine: {
             lineStyle: {
@@ -182,16 +206,16 @@ const handlerXAxis = () => {
         type: 'category',
         axisTick: { show: false },
         axisLine: {
-            lineStyle: {
-                color: '#000'
-            }
+            // lineStyle: {
+            color: '#000'
+            // }
         },
         axisLabel: {
-            textStyle: {
-                fontFamily: 'dinproRegular',
-                color: '#000',
-                fontSize: '12'
-            }
+            // textStyle: {
+            fontFamily: 'dinproRegular',
+            color: '#000',
+            fontSize: '12'
+            // }
         }
     }
     // props.options?.xAxis 是数组还是对象
@@ -209,6 +233,10 @@ const handlerXAxis = () => {
         }
     }
 }
+
+
+
+
 let throttle: ReturnType<typeof setTimeout>
 // 动态计算table高度
 const resizeObserver = new ResizeObserver(entries => {
@@ -239,8 +267,20 @@ watch(
 </script>
 
 <style lang="scss" scoped>
-.my-chart {
-    height: 100%;
+.chart {
     width: 100%;
+    height: 100%;
+    position: relative;
+
+    .el-button {
+        position: absolute;
+        right: 0px;
+        top: -60px;
+    }
+
+    .my-chart {
+        height: 100%;
+        width: 100%;
+    }
 }
 </style>