feat：修改图表数据传递方式

README.md

@@ -54,8 +54,8 @@
 |参数名称              | 类型      | 作用/功能                      |
 | -------------------| --------- | ------------------------------|
 | id                 | String    | 唯一 id（非必填，使用 ref 指定节点）|
-| className          | String    | class样式名称（非必填）                 |
-| options            | Object    | ECharts 配置（必填）                   |
+| className          | String    | class样式名称（非必填）            |
+| options            | Object    | ECharts 配置（非必填），可通过初始化参数打入（大数据场景可使用）|
 | height             | String    | 图表高度（必填）                    |
 | width              | String    | 图表宽度（必填）                    |
 

src/components/echart/index.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, onMounted, ref, watch, onBeforeUnmount } from 'vue'
+import { defineComponent, onMounted, ref, watch, onBeforeUnmount, useContext } from 'vue'
 import '@/common/echart/map/fujian.js'
 import theme from '@/common/echart/style/theme.js' // 引入默认主题
 import * as echarts from 'echarts'
@@ -26,12 +26,6 @@ const PropsType = {
   options: {
     type: Object,
     default: () => ({}),
-    require: true
-  },
-  // 手动触发更新标识，建议从 0 开始
-  updateFlag: {
-    type: Number,
-    default: 0,
   }
 } as const
 
@@ -41,10 +35,13 @@ export default defineComponent({
   setup(props) {
     const chartRef = ref<HTMLElement>()
     const chart = ref<any>()
-
+    // 暴露接口
+    const { expose } = useContext();
     // 初始化echart
-    const initChart = () => {
-      chart.value.setOption(props.options)
+    const initChart = (data?: any) => {
+      if (data || props.options) {
+        chart.value.setOption(data || props.options)
+      }
     }
 
     // 生命周期
@@ -54,7 +51,6 @@ export default defineComponent({
       chart.value = echarts.init(chartRef.value, 'myTheme')
       initChart()
     })
-
     onBeforeUnmount(() => {
       chart.value.dispose()
       chart.value = null
@@ -64,17 +60,18 @@ export default defineComponent({
     watch(
       () => props.options,
       val => {
-        val && initChart()
+        val && initChart(val)
       },
       {
         deep: true
       }
     )
 
-    // 手动触发图表渲染
-    watch(() => props.updateFlag, () => {
-      initChart()
-    })
+    // 对外暴露接口
+    expose({
+      chartRef,
+      initChart
+    });
 
     return () => {
       const { id, className, height, width } = props

src/views/bottomLeft/chart/draw.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, watch, shallowReactive } from 'vue'
+import { defineComponent, watch, ref } from 'vue'
 import * as echarts from 'echarts'
 // 声明类型
 const PropsType = {
@@ -12,9 +12,12 @@ const PropsType = {
 export default defineComponent({
   props: PropsType,
   setup(props) {
+    // 定义 ref
+    const chartRef = ref()
     // 配置项
-    let options = shallowReactive({})
+    let options = {}
 
+    // 监听
     watch(
       () => props.cdata,
       (val: any) => {
@@ -131,6 +134,11 @@ export default defineComponent({
             }
           ]
         }
+        // 手动触发更新
+        if (chartRef.value) {
+          // 通过初始化参数打入数据
+          chartRef.value.initChart(options)
+        }
       },
       {
         immediate: true,
@@ -143,7 +151,7 @@ export default defineComponent({
       const width = "100%"
 
       return <div>
-        <echart options={options} height={height} width={width} />
+        <echart ref={chartRef} height={height} width={width} />
       </div>
     }
   }

src/views/bottomRight/chart/draw.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, watch, reactive, ref } from 'vue';
+import { defineComponent, watch, ref } from 'vue';
 // 声明类型
 const PropsType = {
   cdata: {
@@ -11,7 +11,8 @@ const PropsType = {
 export default defineComponent({
   props: PropsType,
   setup(props) {
-    const updateFlag = ref(0)
+    // 定义 ref
+    const chartRef = ref()
     // 定义颜色
     const colorList = {
       linearYtoG: {
@@ -84,8 +85,9 @@ export default defineComponent({
       }
     }
     // 配置项
-    let options = reactive({})
+    let options ={}
 
+    // 监听
     watch(
       () => props.cdata,
       (val: any) => {
@@ -339,7 +341,10 @@ export default defineComponent({
           ]
         }
         // 手动触发更新
-        updateFlag.value += 1
+        if (chartRef.value) {
+          // 通过初始化参数打入数据
+          chartRef.value.initChart(options)
+        }
       },
       {
         immediate: true,
@@ -352,7 +357,7 @@ export default defineComponent({
       const width = "100%"
 
       return <div>
-        <echart options={options} height={height} width={width} updateFlag={updateFlag.value} />
+        <echart ref={chartRef} height={height} width={width} />
       </div>
     }
   }

src/views/centerLeft2/chart/draw.tsx

@@ -12,12 +12,6 @@ const PropsType = {
 export default defineComponent({
   props: PropsType,
   setup(props) {
-    // 定时器
-    // let intervalId = 0
-    // 地图选择
-    // let preSelectMapIndex = 0
-    // ref
-    const chartRef = ref()
     // 配置项
     let options = shallowReactive({})
     // 设置点的位置(经纬度)
@@ -74,78 +68,6 @@ export default defineComponent({
       }
       return scatterData;
     }
-    // 重新随机选中地图区域
-    // const reSelectMapRandomArea = () => {
-    //   const length = 9;
-    //   nextTick(() => {
-    //     const map = chartRef.value;
-    //     let index = Math.floor(Math.random() * length);
-    //     while (index === preSelectMapIndex || index >= length) {
-    //       index = Math.floor(Math.random() * length);
-    //     }
-    //     if (map.dispatchAction) {
-    //       map.dispatchAction({
-    //         type: 'mapUnSelect',
-    //         seriesIndex: 0,
-    //         dataIndex: preSelectMapIndex,
-    //       });
-    //       map.dispatchAction({
-    //         type: 'showTip',
-    //         seriesIndex: 0,
-    //         dataIndex: index,
-    //       });
-    //       map.dispatchAction({
-    //         type: 'mapSelect',
-    //         seriesIndex: 0,
-    //         dataIndex: index,
-    //       });
-    //       preSelectMapIndex = index;
-    //     }
-    //   });
-    // }
-    // const handleMapRandomSelect = () => {
-    //   nextTick(() => {
-    //     const map = chartRef.value;
-    //     setTimeout(() => {
-    //       reSelectMapRandomArea();
-    //     }, 0);
-    //     // 移入区域，清除定时器、取消之前选中并选中当前
-    //     if (map.on) {
-    //       map.on('mouseover', function (params) {
-    //         clearInterval(intervalId);
-    //         if (map.dispatchAction) {
-    //           map.dispatchAction({
-    //             type: 'mapUnSelect',
-    //             seriesIndex: 0,
-    //             dataIndex: preSelectMapIndex,
-    //           });
-    //           map.dispatchAction({
-    //             type: 'mapSelect',
-    //             seriesIndex: 0,
-    //             dataIndex: params.dataIndex,
-    //           });
-    //           preSelectMapIndex = params.dataIndex;
-    //         }
-    //       });
-    //     }
-    //     // 移出区域重新随机选中地图区域，并开启定时器
-    //     if (map.on) {
-    //       map.on('globalout', function () {
-    //         reSelectMapRandomArea();
-    //         startInterval();
-    //       });
-    //       startInterval();
-    //     }
-    //   });
-    // }
-    // 开启定时器
-    // const startInterval = () => {
-    //   // 应通过接口获取配置时间，暂时写死5s
-    //   const time = 2000;
-    //   intervalId = setInterval(() => {
-    //     reSelectMapRandomArea();
-    //   }, time);
-    // }
     // 监听
     watch(
       () => props.cdata,
@@ -175,7 +97,7 @@ export default defineComponent({
           //   max: 10,
           //   show: false,
           //   seriesIndex: 0,
-          //   颜色
+          //   // 颜色
           //   inRange: {
           //     color: ['rgba(41,166,206, .5)', 'rgba(69,117,245, .9)'],
           //   },
@@ -276,25 +198,18 @@ export default defineComponent({
             },
           ],
         }
-        // 重新选择区域
-        // handleMapRandomSelect();
       },
       {
         immediate: true,
         deep: true
       }
     )
-
-    // 销毁
-    // onUnmounted(() => {
-    //   clearInterval(intervalId)
-    // })
     return () => {
       const height = "360px"
       const width = "330px"
 
       return <div>
-        <echart ref={chartRef} options={options} height={height} width={width} />
+        <echart options={options} height={height} width={width} />
       </div>
     }
   }

src/views/centerLeft2/index.vue

@@ -17,7 +17,7 @@
   </div>
 </template>
 
-<script>
+<script lang='ts'>
 import { defineComponent } from 'vue'
 import Chart from './chart/index'
 export default defineComponent({