feat: 新增底部右侧图表

README.md

@@ -1,8 +1,9 @@
 ## 一、项目描述
 
+- 这里一个基于 Vue3、TypeScript、DataV、ECharts 框架的 " **数据大屏项目** "，使用 '.vue' 和 '.tsx' 文件实现界面，采用新版动态屏幕适配方案，支持数据动态刷新渲染、内部DataV、ECharts图表都支持自由替换。组件详情请点击下方 ECharts 和 DataV 文档。
+
 - [**Vue2 版本请点击这里查看**](https://gitee.com/MTrun/big-screen-vue-datav)
 - [**React 版本请点击这里查看，全新界面超级好看！！！(o ﾟ v ﾟ)ノ**](https://gitee.com/MTrun/react-big-screen)
-- 这里一个基于 Vue3、TypeScript、DataV、ECharts 框架的 " **数据大屏项目** "，使用 '.vue' 和 '.tsx' 文件实现界面，支持数据动态刷新渲染、内部DataV、ECharts图表都支持自由替换。组件详情请点击下方 ECharts 和 DataV 文档。
 - 项目按照 1920*1080 比例设计，支持任何尺寸的同比例缩放。
 - 项目封装的 ECharts 区域使用了全部引入的方式，增加了打包体积，在实际运用中请使用 **按需引入**。
 - 拉取项目之后，建议按照自己的功能区域重命名文件，现以简单的位置进行区分。

src/components/echart/index.tsx

@@ -5,23 +5,33 @@ import * as echarts from 'echarts'
 
 // 定义类型
 const PropsType = {
+  // 图表唯一 id
   id: String,
+  // 图表类名
   className: {
     type: String,
     default: 'chart'
   },
+  // 图表宽度
   width: {
     type: String,
     require: true
   },
+  // 图表高度
   height: {
     type: String,
     require: true
   },
+  // 图表数据项
   options: {
     type: Object,
     default: () => ({}),
-    require:  true
+    require: true
+  },
+  // 手动触发更新标识，建议从 0 开始
+  updateFlag: {
+    type: Number,
+    default: 0,
   }
 } as const
 
@@ -34,7 +44,7 @@ export default defineComponent({
 
     // 初始化echart
     const initChart = () => {
-      chart.value.setOption(props.options, true)
+      chart.value.setOption(props.options)
     }
 
     // 生命周期
@@ -61,6 +71,11 @@ export default defineComponent({
       }
     )
 
+    // 手动触发图表渲染
+    watch(() => props.updateFlag, () => {
+      initChart()
+    })
+
     return () => {
       const { id, className, height, width } = props
       return <div

src/views/bottomRight/chart/draw.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, watch, reactive } from 'vue'
+import { defineComponent, watch, reactive, ref } from 'vue';
 // 声明类型
 const PropsType = {
   cdata: {
@@ -11,6 +11,7 @@ const PropsType = {
 export default defineComponent({
   props: PropsType,
   setup(props) {
+    const updateFlag = ref(0)
     // 定义颜色
     const colorList = {
       linearYtoG: {
@@ -337,6 +338,8 @@ export default defineComponent({
             }
           ]
         }
+        // 手动触发更新
+        updateFlag.value += 1
       },
       {
         immediate: true,
@@ -349,7 +352,7 @@ export default defineComponent({
       const width = "100%"
 
       return <div>
-        <echart options={options} height={height} width={width} />
+        <echart options={options} height={height} width={width} updateFlag={updateFlag.value} />
       </div>
     }
   }