feature: 新增第一个图表

src/components/componentInstall.ts

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

src/components/echart/index.vue

@@ -8,10 +8,10 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, onMounted, ref } from 'vue'
+import { defineComponent, getCurrentInstance, onMounted, ref, watch } from 'vue'
 import '@/common/map/fujian'
 import theme from '@/common/map/theme' // 引入默认主题
-import * as echarts from "echarts";
+import * as echarts from 'echarts'
 
 const PropsType = {
   id: String,
@@ -38,21 +38,33 @@ export default defineComponent({
   props: PropsType,
   setup(props) {
     const chartRef = ref<HTMLElement>()
-    const chart = ref<any>();
-    // 定义实例
-    chart.value = echarts.init(chartRef.value, 'myTheme')
-    
+    const chart = ref<any>()
+
+    // 初始化echart
+    const initChart = () => {
+      chart.value.setOption(props.options, true)
+    }
+
     // 生命周期
     onMounted(() => {
+      // 定义实例
       echarts.registerTheme('myTheme', theme) // 覆盖默认主题
+      chart.value = echarts.init(chartRef.value, 'myTheme')
       initChart()
     })
 
-    // 初始化echart
-    const initChart = () => {
-      chart.value.setOption(props.options, true)
-    }
-    return {chartRef}
+    // 监听改变
+    watch(
+      () => props.options,
+      val => {
+        val && initChart()
+      },
+      {
+        deep: true
+      }
+    )
+
+    return { chartRef }
   }
 })
-</script>
+</script>

src/main.ts

@@ -7,11 +7,11 @@ import dataV from '@jiaminghi/data-view';
 import './assets/scss/style.scss';
 // 引入图表（所有图标见 icon 目录下的 demo_index.html）
 import './assets/icon/iconfont.css'
-// 引入echarts
-import * as echarts from 'echarts';
+// 引入 全局注册组件
+import PublicComponent from '@/components/componentInstall';
 
 const app = createApp(App)
-
+app.use(PublicComponent)
 app.use(dataV)
 app.use(store)
 app.use(router)

src/views/centerLeft1/chart/draw.vue

@@ -0,0 +1,77 @@
+<template>
+  <div>
+    <echart :options="options" height="220px" width="260px" />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, watch, reactive } from 'vue'
+
+const PropsType = {
+  cdata: {
+    type: Object,
+    default: () => ({
+      xData: [],
+      seriesData: []
+    })
+  }
+} as const
+
+export default defineComponent({
+  props: PropsType,
+  setup(props) {
+    // 配置项
+    let options = reactive({})
+    watch(
+      () => props.cdata,
+      (val: any) => {
+        options = {
+          color: [
+            '#37a2da',
+            '#32c5e9',
+            '#9fe6b8',
+            '#ffdb5c',
+            '#ff9f7f',
+            '#fb7293',
+            '#e7bcf3',
+            '#8378ea'
+          ],
+          tooltip: {
+            trigger: 'item',
+            formatter: '{a} <br/>{b} : {c} ({d}%)'
+          },
+          toolbox: {
+            show: true
+          },
+          calculable: true,
+          legend: {
+            orient: 'horizontal',
+            icon: 'circle',
+            bottom: 0,
+            x: 'center',
+            data: val.xData,
+            textStyle: {
+              color: '#fff'
+            }
+          },
+          series: [
+            {
+              name: '通过率统计',
+              type: 'pie',
+              radius: [10, 60],
+              roseType: 'area',
+              center: ['50%', '40%'],
+              data: val.seriesData
+            }
+          ]
+        }
+      },
+      {
+        immediate: true,
+        deep: true
+      }
+    )
+    return { options }
+  }
+})
+</script>

src/views/centerLeft1/chart/index.vue

@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <Draw :cdata="cdata" />
+  </div>
+</template>
+
+<script lang="ts">
+import Draw from './draw.vue'
+import { defineComponent, onMounted, reactive } from 'vue'
+
+export default defineComponent({
+  components: {
+    Draw
+  },
+  setup() {
+    const cdata = reactive({
+      xData: ['rose1', 'rose2', 'rose3', 'rose4', 'rose5', 'rose6'],
+      seriesData: [
+        { value: 10, name: 'rose1' },
+        { value: 5, name: 'rose2' },
+        { value: 15, name: 'rose3' },
+        { value: 25, name: 'rose4' },
+        { value: 20, name: 'rose5' },
+        { value: 35, name: 'rose6' }
+      ]
+    })
+    return { cdata }
+  }
+})
+</script>
+
+<style lang="scss" scoped></style>

src/views/centerLeft1/index.vue

@@ -11,7 +11,7 @@
         </div>
       </div>
       <div class="d-flex jc-center">
-        <CentreLeft1Chart />
+        <chart />
       </div>
       <!-- 4个主要的数据 -->
       <div class="bottom-data">
@@ -32,8 +32,11 @@
 
 <script lang="ts">
 import { defineComponent, onMounted, reactive } from 'vue'
-
+import Chart from './chart/index.vue'
 export default defineComponent({
+  components: {
+    Chart,
+  },
   setup() {
     // 下层数据
     const numberData = reactive([