地图

src/common/echart/style/theme.ts

@@ -0,0 +1,452 @@
+export const theme = {
+  color: ["#2d8cf0", "#19be6b", "#ff9900", "#E46CBB", "#9A66E4", "#ed3f14"],
+  backgroundColor: "rgba(0,0,0,0)",
+  textStyle: {},
+  title: {
+    textStyle: {
+      color: "#516b91",
+    },
+    subtextStyle: {
+      color: "#93b7e3",
+    },
+  },
+  line: {
+    itemStyle: {
+      normal: {
+        borderWidth: "2",
+      },
+    },
+    lineStyle: {
+      normal: {
+        width: "2",
+      },
+    },
+    symbolSize: "6",
+    symbol: "emptyCircle",
+    smooth: true,
+  },
+  radar: {
+    itemStyle: {
+      normal: {
+        borderWidth: "2",
+      },
+    },
+    lineStyle: {
+      normal: {
+        width: "2",
+      },
+    },
+    symbolSize: "6",
+    symbol: "emptyCircle",
+    smooth: true,
+  },
+  bar: {
+    itemStyle: {
+      normal: {
+        barBorderWidth: 0,
+        barBorderColor: "#ccc",
+      },
+      emphasis: {
+        barBorderWidth: 0,
+        barBorderColor: "#ccc",
+      },
+    },
+  },
+  pie: {
+    itemStyle: {
+      normal: {
+        borderWidth: 0,
+        borderColor: "#ccc",
+      },
+      emphasis: {
+        borderWidth: 0,
+        borderColor: "#ccc",
+      },
+    },
+  },
+  scatter: {
+    itemStyle: {
+      normal: {
+        borderWidth: 0,
+        borderColor: "#ccc",
+      },
+      emphasis: {
+        borderWidth: 0,
+        borderColor: "#ccc",
+      },
+    },
+  },
+  boxplot: {
+    itemStyle: {
+      normal: {
+        borderWidth: 0,
+        borderColor: "#ccc",
+      },
+      emphasis: {
+        borderWidth: 0,
+        borderColor: "#ccc",
+      },
+    },
+  },
+  parallel: {
+    itemStyle: {
+      normal: {
+        borderWidth: 0,
+        borderColor: "#ccc",
+      },
+      emphasis: {
+        borderWidth: 0,
+        borderColor: "#ccc",
+      },
+    },
+  },
+  sankey: {
+    itemStyle: {
+      normal: {
+        borderWidth: 0,
+        borderColor: "#ccc",
+      },
+      emphasis: {
+        borderWidth: 0,
+        borderColor: "#ccc",
+      },
+    },
+  },
+  funnel: {
+    itemStyle: {
+      normal: {
+        borderWidth: 0,
+        borderColor: "#ccc",
+      },
+      emphasis: {
+        borderWidth: 0,
+        borderColor: "#ccc",
+      },
+    },
+  },
+  gauge: {
+    itemStyle: {
+      normal: {
+        borderWidth: 0,
+        borderColor: "#ccc",
+      },
+      emphasis: {
+        borderWidth: 0,
+        borderColor: "#ccc",
+      },
+    },
+  },
+  candlestick: {
+    itemStyle: {
+      normal: {
+        color: "#edafda",
+        color0: "transparent",
+        borderColor: "#d680bc",
+        borderColor0: "#8fd3e8",
+        borderWidth: "2",
+      },
+    },
+  },
+  graph: {
+    itemStyle: {
+      normal: {
+        borderWidth: 0,
+        borderColor: "#ccc",
+      },
+    },
+    lineStyle: {
+      normal: {
+        width: 1,
+        color: "#aaa",
+      },
+    },
+    symbolSize: "6",
+    symbol: "emptyCircle",
+    smooth: true,
+    color: ["#2d8cf0", "#19be6b", "#f5ae4a", "#9189d5", "#56cae2", "#cbb0e3"],
+    label: {
+      normal: {
+        textStyle: {
+          color: "#eee",
+        },
+      },
+    },
+  },
+  map: {
+    itemStyle: {
+      normal: {
+        areaColor: "#f3f3f3",
+        borderColor: "#516b91",
+        borderWidth: 0.5,
+      },
+      emphasis: {
+        areaColor: "rgba(165,231,240,1)",
+        borderColor: "#516b91",
+        borderWidth: 1,
+      },
+    },
+    label: {
+      normal: {
+        textStyle: {
+          color: "#000",
+        },
+      },
+      emphasis: {
+        textStyle: {
+          color: "rgb(81,107,145)",
+        },
+      },
+    },
+  },
+  geo: {
+    itemStyle: {
+      normal: {
+        areaColor: "#f3f3f3",
+        borderColor: "#516b91",
+        borderWidth: 0.5,
+      },
+      emphasis: {
+        areaColor: "rgba(165,231,240,1)",
+        borderColor: "#516b91",
+        borderWidth: 1,
+      },
+    },
+    label: {
+      normal: {
+        textStyle: {
+          color: "#000",
+        },
+      },
+      emphasis: {
+        textStyle: {
+          color: "rgb(81,107,145)",
+        },
+      },
+    },
+  },
+  categoryAxis: {
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: "#cccccc",
+      },
+    },
+    axisTick: {
+      show: false,
+      lineStyle: {
+        color: "#333",
+      },
+    },
+    axisLabel: {
+      show: true,
+      textStyle: {
+        color: "#fff",
+      },
+    },
+    splitLine: {
+      show: false,
+      lineStyle: {
+        color: ["#eeeeee"],
+      },
+    },
+    splitArea: {
+      show: false,
+      areaStyle: {
+        color: ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"],
+      },
+    },
+  },
+  valueAxis: {
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: "#cccccc",
+      },
+    },
+    axisTick: {
+      show: false,
+      lineStyle: {
+        color: "#333",
+      },
+    },
+    axisLabel: {
+      show: true,
+      textStyle: {
+        color: "#fff",
+      },
+    },
+    splitLine: {
+      show: false,
+      lineStyle: {
+        color: ["#eeeeee"],
+      },
+    },
+    splitArea: {
+      show: false,
+      areaStyle: {
+        color: ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"],
+      },
+    },
+  },
+  logAxis: {
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: "#cccccc",
+      },
+    },
+    axisTick: {
+      show: false,
+      lineStyle: {
+        color: "#333",
+      },
+    },
+    axisLabel: {
+      show: true,
+      textStyle: {
+        color: "#999999",
+      },
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: ["#eeeeee"],
+      },
+    },
+    splitArea: {
+      show: false,
+      areaStyle: {
+        color: ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"],
+      },
+    },
+  },
+  timeAxis: {
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: "#cccccc",
+      },
+    },
+    axisTick: {
+      show: false,
+      lineStyle: {
+        color: "#333",
+      },
+    },
+    axisLabel: {
+      show: true,
+      textStyle: {
+        color: "#999999",
+      },
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: ["#eeeeee"],
+      },
+    },
+    splitArea: {
+      show: false,
+      areaStyle: {
+        color: ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"],
+      },
+    },
+  },
+  toolbox: {
+    iconStyle: {
+      normal: {
+        borderColor: "#999",
+      },
+      emphasis: {
+        borderColor: "#666",
+      },
+    },
+  },
+  legend: {
+    textStyle: {
+      color: "#fff",
+    },
+  },
+  tooltip: {
+    axisPointer: {
+      lineStyle: {
+        color: "#ccc",
+        width: 1,
+      },
+      crossStyle: {
+        color: "#ccc",
+        width: 1,
+      },
+    },
+  },
+  timeline: {
+    lineStyle: {
+      color: "#8fd3e8",
+      width: 1,
+    },
+    itemStyle: {
+      normal: {
+        color: "#8fd3e8",
+        borderWidth: 1,
+      },
+      emphasis: {
+        color: "#8fd3e8",
+      },
+    },
+    controlStyle: {
+      normal: {
+        color: "#8fd3e8",
+        borderColor: "#8fd3e8",
+        borderWidth: 0.5,
+      },
+      emphasis: {
+        color: "#8fd3e8",
+        borderColor: "#8fd3e8",
+        borderWidth: 0.5,
+      },
+    },
+    checkpointStyle: {
+      color: "#8fd3e8",
+      borderColor: "rgba(138,124,168,0.37)",
+    },
+    label: {
+      normal: {
+        textStyle: {
+          color: "#8fd3e8",
+        },
+      },
+      emphasis: {
+        textStyle: {
+          color: "#8fd3e8",
+        },
+      },
+    },
+  },
+  visualMap: {
+    color: ["#516b91", "#59c4e6", "#a5e7f0"],
+  },
+  dataZoom: {
+    backgroundColor: "rgba(0,0,0,0)",
+    dataBackgroundColor: "rgba(255,255,255,0.3)",
+    fillerColor: "rgba(167,183,204,0.4)",
+    handleColor: "#a7b7cc",
+    handleSize: "100%",
+    textStyle: {
+      color: "#333",
+    },
+  },
+  markPoint: {
+    label: {
+      normal: {
+        textStyle: {
+          color: "#eee",
+        },
+      },
+      emphasis: {
+        textStyle: {
+          color: "#eee",
+        },
+      },
+    },
+  },
+};

src/components/componentInstall.ts

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

src/components/echartCanvas/index.tsx

@@ -0,0 +1,104 @@
+import {
+  defineComponent,
+  onMounted,
+  ref,
+  watch,
+  onBeforeUnmount,
+  reactive,
+} from "vue";
+
+// import "../../common/echart/map/fujian.js";
+import { theme } from "../../common/echart/style/theme.ts"; // 引入默认主题
+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: () => ({}),
+  },
+} as const;
+
+export default defineComponent({
+  name: "Echarts",
+  props: PropsType,
+  setup(props, { expose }) {
+    const chartRef = ref<HTMLElement>();
+    const charts = {
+      chart: null,
+    };
+
+    /**
+     * 初始化echart
+     * @param data 数据项
+     * @param clearCaching 是否清除缓存
+     */
+    const initChart = (data?: any, clearCaching = false) => {
+      if (data || props.options) {
+        charts.chart.setOption(data || props.options, clearCaching);
+      }
+    };
+
+    // 生命周期
+    onMounted(() => {
+      // 定义实例
+      echarts.registerTheme("myTheme", theme); // 覆盖默认主题
+      charts.chart = echarts.init(chartRef.value, "myTheme");
+      initChart();
+    });
+    onBeforeUnmount(() => {
+      charts.chart.dispose();
+      charts.chart = null;
+    });
+
+    // 监听改变
+    watch(
+      () => props.options,
+      (val) => {
+        val && initChart(val);
+      },
+      {
+        deep: true,
+      }
+    );
+
+    // 对外暴露接口
+    expose({
+      chartRef,
+      initChart,
+    });
+
+    return () => {
+      const { id, className, height, width } = props;
+      return (
+        <div
+          ref={chartRef}
+          id={id as string}
+          class={className as string}
+          style={{
+            height: height as string,
+            width: width as string,
+          }}
+        />
+      );
+    };
+  },
+});

src/main.ts

@@ -6,10 +6,13 @@ import router from "./router";
 import "./assets/scss/common.scss";
 import "./assets/main.scss";
 // import "./assets/scss/_variables.scss";
-import './assets/scss/style.scss';
+import "./assets/scss/style.scss";
+import PublicComponent from "@/components/componentInstall";
+
 // @ts-ignore
 import DataVVue3 from "@kjgl77/datav-vue3";
 const app = createApp(App);
+app.use(PublicComponent);
 app.use(router);
 app.use(pinia);
 app.use(DataVVue3);

src/views/overviewLargeScreen/components/centerLeft2/chart/draw.tsx

@@ -1,19 +1,31 @@
-import { defineComponent, watch, shallowReactive, nextTick, ref, onUnmounted } from 'vue';
+import {
+  defineComponent,
+  watch,
+  shallowReactive,
+  nextTick,
+  ref,
+  onUnmounted,
+} from "vue";
 
 // 声明类型
 const PropsType = {
   cdata: {
     type: Array,
-    require: true
+    require: true,
-  }
+  },
-} as const
+} as const;
 
 // 定义主体
 export default defineComponent({
   props: PropsType,
   setup(props) {
     // 配置项
-    let options = shallowReactive({showLegendSymbol:null,tooltip:null,geo:null,series:null})
+    let options = shallowReactive({
+      showLegendSymbol: null,
+      tooltip: null,
+      geo: null,
+      series: null,
+    });
     // 设置点的位置(经纬度)
     const geoCoordMap = {
       厦门市: [118.11022, 24.490474, 20],
@@ -25,36 +37,36 @@ export default defineComponent({
       三明市: [117.435001, 26.465444, 20],
       南平市: [118.178459, 27.535627, 20],
       宁德市: [119.527082, 27.15924, 20],
-    }
+    };
     const seriesData = [
       {
-        name: '厦门市',
+        name: "厦门市",
       },
       {
-        name: '福州市',
+        name: "福州市",
       },
       {
-        name: '泉州市',
+        name: "泉州市",
       },
       {
-        name: '漳州市',
+        name: "漳州市",
       },
       {
-        name: '龙岩市',
+        name: "龙岩市",
       },
       {
-        name: '莆田市',
+        name: "莆田市",
       },
       {
-        name: '三明市',
+        name: "三明市",
       },
       {
-        name: '南平市',
+        name: "南平市",
       },
       {
-        name: '宁德市',
+        name: "宁德市",
       },
-    ]
+    ];
     const convertData = function (data) {
       const scatterData = [];
       for (let i = 0; i < data.length; i++) {
@@ -67,7 +79,7 @@ export default defineComponent({
         }
       }
       return scatterData;
-    }
+    };
     // 监听
     watch(
       () => props.cdata,
@@ -75,12 +87,12 @@ export default defineComponent({
         options = {
           showLegendSymbol: true,
           tooltip: {
-            trigger: 'item',
+            trigger: "item",
             textStyle: {
               fontSize: 14,
               lineHeight: 22,
             },
-            position: point => {
+            position: (point) => {
               // 固定在顶部
               return [point[0] + 50, point[1] - 20];
             },
@@ -91,127 +103,127 @@ export default defineComponent({
               }
             */
           },
-          // 如果需要根据不同的数据展示深浅不一的颜色，则把这里打开
+
-          // visualMap: {
-          //   min: 0,
-          //   max: 10,
-          //   show: false,
-          //   seriesIndex: 0,
-          //   // 颜色
-          //   inRange: {
-          //     color: ['rgba(41,166,206, .5)', 'rgba(69,117,245, .9)'],
-          //   },
-          // },
           // 底部背景
-          geo: [{
+          geo: [
+            {
               show: true,
               aspectScale: 0.85, //长宽比
               zoom: 1.16,
-            top: '10%',
+              top: "10%",
-            left: '17%',
+              left: "17%",
-            map: '福建',
+              map: "福建",
               roam: false,
               itemStyle: {
                 normal: {
-                borderColor: '#7ad5ff7f',
+                  borderColor: "#7ad5ff7f",
                   shadowOffsetY: 5,
                   shadowBlur: 15,
-                areaColor: 'rgba(5,21,35,0.1)'
+                  areaColor: "rgba(5,21,35,0.1)",
-              }
+                },
-            }
+              },
-          }],
+            },
+          ],
           series: [
             {
-              name: '相关指数',
+              name: "相关指数",
-              type: 'map',
+              type: "map",
               aspectScale: 0.85, //长宽比
               zoom: 1.16, //缩放
-              mapType: '福建', // 自定义扩展图表类型
+              mapType: "福建", // 自定义扩展图表类型
-              top: '9%',
+              top: "9%",
-              left: '16%',
+              left: "16%",
               itemStyle: {
                 normal: {
                   // 背景渐变色
                   areaColor: {
-                    type: 'linear-gradient',
+                    type: "linear-gradient",
                     x: 0,
                     y: 300,
                     x2: 0,
                     y2: 0,
-                    colorStops: [{
+                    colorStops: [
+                      {
                         offset: 0,
-                      color: 'RGBA(19,96,187,1)' // 0% 处的颜色
+                        color: "RGBA(19,96,187,1)", // 0% 处的颜色
-                    }, {
-                      offset: 1,
-                      color: 'RGBA(7,193,223,1)' // 50% 处的颜色
-                    }],
-                    global: true // 缺省为 false
                       },
-                  borderColor: '#4ECEE6',
+                      {
+                        offset: 1,
+                        color: "RGBA(7,193,223,1)", // 50% 处的颜色
+                      },
+                    ],
+                    global: true, // 缺省为 false
+                  },
+                  borderColor: "#4ECEE6",
                   borderWidth: 1,
                 },
                 emphasis: {
-                  areaColor: '#4f7fff',
+                  areaColor: "#4f7fff",
-                  borderColor: 'rgba(0,242,252,.6)',
+                  borderColor: "rgba(0,242,252,.6)",
                   borderWidth: 2,
                   shadowBlur: 10,
-                  shadowColor: '#00f2fc',
+                  shadowColor: "#00f2fc",
                 },
               },
               label: {
-                formatter: params => `${params.name}`,
+                formatter: (params) => `${params.name}`,
                 show: true,
-                position: 'insideRight',
+                position: "insideRight",
                 textStyle: {
                   fontSize: 14,
-                  color: '#efefef',
+                  color: "#efefef",
                 },
                 emphasis: {
                   textStyle: {
-                    color: '#fff',
+                    color: "#fff",
                   },
                 },
               },
               data: val,
             },
             {
-              type: 'effectScatter',
+              type: "effectScatter",
-              coordinateSystem: 'geo',
+              coordinateSystem: "geo",
               symbolSize: 7,
-              effectType: 'ripple',
+              effectType: "ripple",
               legendHoverLink: false,
-              showEffectOn: 'render',
+              showEffectOn: "render",
               rippleEffect: {
                 period: 4,
                 scale: 2.5,
-                brushType: 'stroke',
+                brushType: "stroke",
               },
               zlevel: 1,
               itemStyle: {
                 normal: {
-                  color: '#99FBFE',
+                  color: "#99FBFE",
                   shadowBlur: 5,
-                  shadowColor: '#fff',
+                  shadowColor: "#fff",
                 },
               },
               data: convertData(seriesData),
             },
           ],
-        }
+        };
       },
       {
         immediate: true,
-        deep: true
+        deep: true,
       }
-    )
+    );
     return () => {
-      const height = "360px"
+      const height = "360px";
-      const width = "330px"
+      const width = "330px";
 
-      return <div>
+      return (
-        <echart options={options} height={height} width={width} />
+        <div>
+          <echart
+            options={options}
+            height={height}
+            width={width}
+          />
         </div>
-    }
+      );
-  }
+    };
-})
+  },
-
+});

src/views/overviewLargeScreen/components/centerLeft2/chart/index.tsx

@@ -1,58 +1,60 @@
-import { defineComponent, reactive } from 'vue'
+import { defineComponent, reactive } from "vue";
-import Draw from './draw'
+import Draw from "./draw";
 
 export default defineComponent({
   components: {
-    Draw
+    Draw,
   },
   setup() {
     const cdata = reactive([
       {
         // 名字需要与 “common/map/fujian.js” 地图数据文件里面定义的一一对应，不能是 “福州” 或者 “闽” 之类的缩写
-        name: '福州市',
+        name: "福州市",
         value: 10,
         elseData: {
           // 这里放置地图 tooltip 里想显示的数据
-        }
+        },
       },
       {
-        name: '厦门市',
+        name: "厦门市",
         value: 9,
       },
       {
-        name: '漳州市',
+        name: "漳州市",
         value: 8,
       },
       {
-        name: '泉州市',
+        name: "泉州市",
         value: 7,
       },
       {
-        name: '三明市',
+        name: "三明市",
         value: 6,
       },
       {
-        name: '莆田市',
+        name: "莆田市",
         value: 5,
       },
       {
-        name: '南平市',
+        name: "南平市",
         value: 4,
       },
       {
-        name: '龙岩市',
+        name: "龙岩市",
         value: 3,
       },
       {
-        name: '宁德市',
+        name: "宁德市",
         value: 2,
-      }
+      },
-    ])
+    ]);
 
     return () => {
-      return <div>
+      return (
+        <div>
           <Draw cdata={cdata} />
         </div>
-    }
+      );
-  }
+    };
-})
+  },
+});

src/views/overviewLargeScreen/components/centerLeft2/index.vue

@@ -6,19 +6,89 @@
           <i class="iconfont icon-layer-group" />
         </span>
         <div class="d-flex">
-          <span class="fs-xl text mx-2" style="font-size: 12px">地图数据</span>
+          <span
+            class="fs-xl text mx-2"
+            style="font-size: 12px"
+          >
+            地图数据
+          </span>
           <dv-decoration-1 class="dv-dec-1" />
         </div>
       </div>
       <div class="d-flex jc-center">
-        <chart />
+        <div
+          ref="chartRef"
+          style="width: 300px; height: 400px"
+        ></div>
+        <!-- <echart
+            options={options}
+            height={height}
+            width={width}
+          /> -->
+        <!-- <chart /> -->
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-  import Chart from "./chart/index";
+  import * as echarts from "echarts";
+  // import Chart from "./chart/index";
+  import axios from "axios";
+
+  const chartRef = ref(null);
+
+  onMounted(async () => {
+    const chart = echarts.init(chartRef.value);
+
+    // 载入湖南省地图 GeoJSON
+    const mapJson = await axios.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/430000_full.json"
+    );
+    echarts.registerMap("hunan", mapJson.data);
+
+    const option = {
+      title: {
+        text: "",
+        left: "center",
+      },
+      tooltip: {
+        trigger: "item",
+        formatter: "{b}",
+      },
+      visualMap: {
+        min: 0,
+        max: 100,
+        left: "left",
+        top: "bottom",
+        text: ["高", "低"],
+        calculable: true,
+      },
+      series: [
+        {
+          name: "湖南省",
+          type: "map",
+          map: "hunan",
+          roam: true, // 支持缩放和平移
+          label: {
+            show: true,
+          },
+          data: [
+            // 示例数据（你可以从后端获取或自己定义）
+            { name: "长沙市", value: 88 },
+            { name: "株洲市", value: 66 },
+            { name: "湘潭市", value: 77 },
+            { name: "岳阳市", value: 44 },
+          ],
+        },
+      ],
+    };
+
+    chart.setOption(option);
+
+    // 窗口大小变化时自适应
+    window.addEventListener("resize", () => chart.resize());
+  });
 </script>
 
 <style lang="scss" scoped>

src/views/overviewLargeScreen/index.vue

@@ -69,7 +69,7 @@
               </div>
               <div>
                 <dv-border-box-12>
-                  <!-- <CenterLeft2 /> -->
+                  <CenterLeft2 />
                 </dv-border-box-12>
               </div>
               <!-- 中间 -->
@@ -117,7 +117,7 @@
   import CenterRight1 from "./components/centerRight1/index.vue";
   import Center from "./components/center/index.vue";
   // 未修改的组件
-  // import CenterLeft2 from "./components/centerLeft2/index.vue";
+  import CenterLeft2 from "./components/centerLeft2/index.vue";