lw-cdp-ui 1.4.41 → 1.4.43

package/dist/components/lwBiChart/item.vue

@@ -2,24 +2,22 @@
   <component v-if="isShow" :is="chartComponent" :rawData="rawData" :height="height" :isBi="isBi" />
 </template>
 
-<script setup>
-import { computed, provide } from 'vue'
+<script>
 import * as echarts from 'echarts'
 
-import BarChart from './charts/BarChart.vue'
-import LineChart from './charts/LineChart.vue'
-import PieChart from './charts/PieChart.vue'
-import AreaChart from './charts/AreaChart.vue'
-import MetricCard from './charts/MetricCard.vue'
-import GaugeChart from './charts/GaugeChart.vue'
-import FunnelChart from './charts/FunnelChart.vue'
-import ScatterChart from './charts/ScatterChart.vue'
-import RadarChart from './charts/RadarChart.vue'
-import MapChart from './charts/MapChart.vue'
-import ReportTable from './charts/ReportTable.vue'
-import ChartTitle from './charts/ChartTitle.vue'
+import BarChart from './charts/BarChart.vue' // 柱状图
+import LineChart from './charts/LineChart.vue' // 折线图
+import PieChart from './charts/PieChart.vue' // 饼图
+import AreaChart from './charts/AreaChart.vue' // 面积图
+import MetricCard from './charts/MetricCard.vue' // 指标卡
+import GaugeChart from './charts/GaugeChart.vue' // 仪表盘
+import FunnelChart from './charts/FunnelChart.vue' // 漏斗图
+import ScatterChart from './charts/ScatterChart.vue' // 散点图
+import RadarChart from './charts/RadarChart.vue' // 雷达图
+import MapChart from './charts/MapChart.vue' // 地图
+import ReportTable from './charts/ReportTable.vue' // 报表
+import ChartTitle from './charts/ChartTitle.vue' // 标题
 
-// 组件映射表
 const componentMap = {
   Bar: BarChart,
   Line: LineChart,
@@ -35,43 +33,50 @@ const componentMap = {
   ChartTitle: ChartTitle
 }
 
-// Props 定义
-const props = defineProps({
-  rawData: {
-    type: Object,
-    default: () => null
+export default {
+  name: 'lwBiChartItem',
+  components: {
+    BarChart,
+    LineChart,
+    PieChart,
+    AreaChart,
+    MetricCard,
+    GaugeChart,
+    FunnelChart,
+    ScatterChart,
+    RadarChart,
+    MapChart,
+    ReportTable,
+    ChartTitle
   },
-  height: {
-    type: String,
-    default: '300px'
+  provide() {
+    return { echarts }
   },
-  isBi: {
-    type: Boolean,
-    default: true
-  }
-})
-
-// 确保 echarts 实例只被创建一次
-const echartsInstance = (() => {
-  if (!echarts._vue_echarts_instance) {
-    echarts._vue_echarts_instance = echarts
+  props: {
+    rawData: {
+      type: Object,
+      default: null
+    },
+    height: {
+      type: String,
+      default: '300px'
+    },
+    // 是否是BI数据结构 默认是true , false为普通EChart数据结构
+    isBi: {
+      type: Boolean,
+      default: true
+    }
+  },
+  computed: {
+    isShow() {
+      return echarts && this.rawData && ((this.rawData?.setting && this.rawData?.dataSet) || this.rawData?.option)
+    },
+    chartType() {
+      return this.rawData?.type || 'Bar'
+    },
+    chartComponent() {
+      return componentMap[this.chartType] || BarChart
+    }
   }
-  return echarts._vue_echarts_instance
-})()
-
-// 提供 echarts 实例给子组件
-provide('echarts', echartsInstance)
-
-// 计算属性
-const isShow = computed(() => {
-  return props.rawData && ((props.rawData?.setting && props.rawData?.dataSet) || props.rawData?.option)
-})
-
-const chartType = computed(() => {
-  return props.rawData?.type || 'Bar'
-})
-
-const chartComponent = computed(() => {
-  return componentMap[chartType.value] || BarChart
-})
+}
 </script>