fix：升级版本、修改legend和tooltip失效的问题

README.md

@@ -16,6 +16,7 @@ QQ群二维码：
 - 拉取项目之后，建议按照自己的功能区域重命名文件，现以简单的位置进行区分。
 - 项目环境：@vue/cli-4.5.13、DataV-2.10、Echarts-5.1.1、Npm-6.14.6、Node-v14.16。
 - 请拉取 master 分支的代码，其余分支是开发分支。
+- 需要其它地图数据的，请查看我的其它项目（有一个地图合集）
 - 注意：dataV 暂不支持 Vue3 的数据更新，可以正常使用静态组件（边框等），如果动态数据修改的需求可以参考npm库 `bin-datav` 的源码进行更改。
 
 友情链接：
@@ -55,7 +56,7 @@ QQ群二维码：
 
 ### 封装组件渲染图表
 
-所有的 ECharts 图表渲染都是基于 `components/echart/index.tsx` 封装组件创建的，已经对数据动进行了深度监听，能够动态渲染图表数据。如果项目传入的数据量巨大，深度监听将会影响到项目性能，此时建议手动触发初始化函数 `initChart`（建议公司项目中都使用这个，节约性能）。如果遇到动态赋值图表无法监听到的时候，也可以调用这个函数进行手动更新。
+所有的 ECharts 图表渲染都是基于 `components/echart/index.tsx` 封装组件创建的，动态修改数据需要手动触发初始化函数 `initChart`，参考 `centerLeft1` 里的图表写法即可。如果遇到动态赋值图表无法监听到的时候，也可以调用这个函数进行手动更新。
 
 封装的渲染图表组件支持传入以下参数，可根据业务需求自行添加/删除。
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-big-screen-plugin",
-  "version": "0.1.0",
+  "version": "1.0.1",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -17,21 +17,21 @@
     "vuex": "^4.0.0-0"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^4.18.0",
-    "@typescript-eslint/parser": "^4.18.0",
+    "@typescript-eslint/eslint-plugin": "^5.13.0",
+    "@typescript-eslint/parser": "^5.13.0",
     "@vue/babel-plugin-jsx": "^1.0.6",
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-plugin-router": "~4.5.0",
-    "@vue/cli-plugin-typescript": "~4.5.0",
-    "@vue/cli-plugin-vuex": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
+    "@vue/cli-plugin-babel": "~5.0.1",
+    "@vue/cli-plugin-eslint": "~5.0.1",
+    "@vue/cli-plugin-router": "~5.0.1",
+    "@vue/cli-plugin-typescript": "~5.0.1",
+    "@vue/cli-plugin-vuex": "~5.0.1",
+    "@vue/cli-service": "~5.0.1",
     "@vue/compiler-sfc": "^3.0.0",
-    "@vue/eslint-config-typescript": "^7.0.0",
-    "eslint": "^6.7.2",
-    "eslint-plugin-vue": "^7.0.0",
+    "@vue/eslint-config-typescript": "^10.0.0",
+    "eslint": "^8.10.0",
+    "eslint-plugin-vue": "^8.5.0",
     "sass": "^1.26.5",
-    "sass-loader": "^8.0.2",
-    "typescript": "~4.1.5"
+    "sass-loader": "^12.6.0",
+    "typescript": "~4.6.2"
   }
 }

src/components/componentInstall.ts

@@ -2,7 +2,7 @@ import type { DefineComponent } from 'vue'
 
 const component = Object.create(null)
 /* eslint-disable */
-import Echart from './echart/index'
+import Echart from './echartCanvas/index'
 
 component.install = function (vue: DefineComponent) {
   // ECharts 图表渲染

src/components/echart/index.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, onMounted, ref, watch, onBeforeUnmount } from 'vue'
+import { defineComponent, onMounted, ref, watch, onBeforeUnmount, reactive } from 'vue'
 import '@/common/echart/map/fujian.js'
 import theme from '@/common/echart/style/theme.js' // 引入默认主题
 import * as echarts from 'echarts'
@@ -32,9 +32,11 @@ const PropsType = {
 export default defineComponent({
   name: 'Echarts',
   props: PropsType,
-  setup(props,{expose}) {
+  setup(props, { expose }) {
     const chartRef = ref<HTMLElement>()
-    const chart = ref<any>()
+    const charts = {
+      chart: null
+    }
     
     /**
      * 初始化echart
@@ -43,7 +45,7 @@ export default defineComponent({
      */
     const initChart = (data?: any, clearCaching = false) => {
       if (data || props.options) {
-        chart.value.setOption(data || props.options, clearCaching)
+        charts.chart.setOption(data || props.options, clearCaching)
       }
     }
 
@@ -51,12 +53,12 @@ export default defineComponent({
     onMounted(() => {
       // 定义实例
       echarts.registerTheme('myTheme', theme) // 覆盖默认主题
-      chart.value = echarts.init(chartRef.value, 'myTheme')
+      charts.chart = echarts.init(chartRef.value, 'myTheme')
       initChart()
     })
     onBeforeUnmount(() => {
-      chart.value.dispose()
-      chart.value = null
+      charts.chart.dispose()
+      charts.chart = null
     })
 
     // 监听改变

src/views/bottomLeft/chart/draw.tsx

@@ -24,8 +24,7 @@ export default defineComponent({
         options = {
           tooltip: {
             show: true,
-            trigger: "axis",
-            backgroundColor: "rgba(255,255,255,0.1)",
+            trigger: "item",
             axisPointer: {
               type: "shadow",
               label: {
@@ -35,7 +34,7 @@ export default defineComponent({
             }
           },
           legend: {
-            show: false,
+            show: true,
           },
           grid: {
             x: "8%",

src/views/bottomRight/chart/index.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, reactive, onMounted, ref } from 'vue';
+import { defineComponent, reactive, onMounted, ref, onUnmounted } from 'vue';
 import Draw from './draw'
 
 export default defineComponent({
@@ -76,6 +76,10 @@ export default defineComponent({
       drawTimingFn()
     })
 
+    onUnmounted(() => {
+      clearInterval(drawTiming.value)
+    })
+
     return () => {
       return <div>
         <Draw cdata={cdata} />

src/views/centerLeft1/chart/draw.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, watch, shallowReactive } from 'vue'
+import { defineComponent, ref, watch, shallowReactive } from 'vue'
 
 // 声明类型
 const PropsType = {
@@ -12,6 +12,8 @@ const PropsType = {
 export default defineComponent({
   props: PropsType,
   setup(props) {
+    // 定义 ref
+    const chartRef = ref()
     // 配置项
     let options = shallowReactive({color:null,tooltip:null,toolbox:null,calculable:null,legend:null,series:null})
 
@@ -70,6 +72,11 @@ export default defineComponent({
             }
           ]
         }
+        // 手动触发更新
+        if (chartRef.value) {
+          // 通过初始化参数打入数据
+          chartRef.value.initChart(options)
+        }
       },
       {
         immediate: true,
@@ -82,7 +89,7 @@ export default defineComponent({
       const width = "260px"
 
       return <div>
-        <echart options={options} height={height} width={width} />
+        <echart ref={chartRef} options={options} height={height} width={width} />
       </div>
     }
   }

src/views/centerLeft1/chart/index.tsx

@@ -1,11 +1,12 @@
-import { defineComponent, reactive } from 'vue'
+import { defineComponent, onUnmounted, reactive } from 'vue'
 import Draw from './draw'
 
 export default defineComponent({
   components: {
-    Draw
+    Draw,
   },
   setup() {
+    let intervalInstance = null
     const cdata = reactive({
       xData: ['数据1', '数据2', '数据3', '数据4', '数据5', '数据6'],
       seriesData: [
@@ -14,14 +15,25 @@ export default defineComponent({
         { value: 15, name: '数据3' },
         { value: 25, name: '数据4' },
         { value: 20, name: '数据5' },
-        { value: 35, name: '数据6' }
-      ]
+        { value: 35, name: '数据6' },
+      ],
     })
+    intervalInstance = setInterval(() => {
+      const data = cdata.seriesData
+      cdata.seriesData = data.map((e) => {
+        return { value: e.value + 10, name: e.name }
+      })
+    }, 1000)
 
+    onUnmounted(() => {
+      clearInterval(intervalInstance)
+    })
     return () => {
-      return <div>
-        <Draw cdata={cdata} />
-      </div>
+      return (
+        <div>
+          <Draw cdata={cdata} />
+        </div>
+      )
     }
-  }
-})
+  },
+})

src/views/centerLeft1/index.vue

@@ -35,7 +35,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, onMounted, reactive } from 'vue'
+import { defineComponent, onMounted, onUnmounted,  reactive } from 'vue'
 import Chart from './chart/index'
 export default defineComponent({
   components: {
@@ -69,7 +69,7 @@ export default defineComponent({
       'icon-clouddownload'
     ]
     const numberData = reactive([])
-
+    let intervalInstance = null
     onMounted(() => {
       setData()
       changeTiming()
@@ -92,7 +92,7 @@ export default defineComponent({
     }
 
     const changeTiming = () => {
-      setInterval(() => {
+      intervalInstance = setInterval(() => {
         changeNumber()
       }, 2000)
     }
@@ -102,6 +102,10 @@ export default defineComponent({
         item.config = { ...item.config }
       })
     }
+    onUnmounted(() => {
+      clearInterval(intervalInstance)   
+    })
+
     return { numberData, iconFont}
   }
 })

src/views/index/index.vue

@@ -98,7 +98,7 @@ import {
   ref,
   reactive,
   onMounted,
-  onBeforeUnmount,
+  onUnmounted,
 } from 'vue'
 import { formatTime } from '@/utils/index'
 import { WEEK } from '@/constant/index'
@@ -143,7 +143,7 @@ export default defineComponent({
       calcRate()
     })
 
-    onBeforeUnmount(() => {
+    onUnmounted(() => {
       unWindowDraw()
       clearInterval(timeInfo.setInterval)
     })

vue.config.js

@@ -0,0 +1,5 @@
+const { defineConfig } = require('@vue/cli-service')
+module.exports = defineConfig({
+  transpileDependencies: true,
+  lintOnSave: false
+})