Merge pull request #13 from biancangming/dev

echarts组件增加config传入

example/src/views/echartsView/demo/MapChart/index.vue

@@ -1,11 +1,15 @@
 <template>
   <div style="height: 600px;">
-    <how-map-chart :option="option" v-if="mapVisible" />
+    <how-map-chart :option="option" v-if="mapVisible" :config="{ renderer: 'svg' }" :use="ScatterChart" />
   </div>
 </template>
 <script lang="ts" setup>
 import { EChartsOption } from 'echarts';
+import { ScatterChart } from 'echarts/charts';
 import { HowMapChart, useGeoJsonMap } from 'howuse/echarts';
+import weinanJson from '@/assets/610500_full.json';
+import testGif from './test.gif';
+
 const mapVisible = ref(false) // 控制地图显示时间，等待地图注册成功再显示，防止无意义报错
 const option: EChartsOption = {
   color: ["red"],
@@ -17,51 +21,73 @@ const option: EChartsOption = {
     showDelay: 0,
     transitionDuration: 0.2
   },
-  visualMap: {
-    left: 'right',
-    min: 500000,
-    max: 38000000,
-    inRange: {
-      color: [
-        '#313695',
-        '#4575b4',
-        '#74add1',
-        '#abd9e9',
-        '#e0f3f8',
-        '#ffffbf',
-        '#fee090',
-        '#fdae61',
-        '#f46d43',
-        '#d73027',
-        '#a50026'
-      ]
+  xAxis: {
+    show: false,
+    axisLine: {
+      show: false,
+      lineStyle: {
+        color: 'rgba(121,121,121,0.3)',
+        //color:'red'
+      },
+    },
+    splitLine: {
+      show: false,
+    },
+  },
+  yAxis: {
+    type: 'category',
+    axisTick: {
+      show: false,
+    },
+    axisLine: {
+      show: false,
+      lineStyle: {
+        color: 'rgba(121,121,121,0.3)',
+        //color:'red'
+      },
+    },
+    axisLabel: {
+      show: false,
+    },
+  },
+  geo: {
+    map: 'weinan',
+    aspectScale: 0.98,
+    show: true,
+    roam: false,
+    height: '100%',
+    label: {
+      show: false,
+    },
+    itemStyle: {
+      areaColor: '#b0c7f6',
+      borderColor: '#ffffff',
+      shadowColor: '#1773c3',
+      shadowBlur: 0,
     },
-    text: ['High', 'Low'],
-    calculable: true
   },
   series: [
     {
       name: 'weinan',
-      type: 'map',
-      roam: true,
-      map: 'weinan',
+      type: "scatter",
+      coordinateSystem: 'geo',
+      symbol: `image://${testGif}`,
+      symbolSize: 100,
       label: {
         show: true,
-        color: "#FFF"
+        formatter: function (p) {
+          // @ts-ignore
+          return p.data.name;
+        },
       },
       data: [
-        // 这里需要注意的是，一些提供商的地区命名存在区别，比如 白水县 称作 白水、韩城市 称作 韩城
-        { name: '韩城', value: 4822023 },
-        { name: '白水', value: 38000000 },
-        { name: '澄城', value: 6553255 },
-        { name: '蒲城', value: 2949131 },
-        { name: '合阳', value: 299131 },
-        { name: '大荔', value: 2949131 },
-        { name: '富平', value: 30000000 },
-        { name: '临渭', value: 25000000 },
-        { name: '华州', value: 294913 },
-        { name: '华阴', value: 5500000 },
-        { name: '潼关', value: 1949131 },
+        {
+          name: '白水',
+          label: {
+            show: true,
+          },
+          value: [109.594309, 35.177291],
+        },
       ]
     }
   ]
@@ -74,7 +100,7 @@ const option: EChartsOption = {
  *  datav  http://datav.aliyun.com/portal/school/atlas/area_selector 服务似乎下架了2022/10/11 官网一直提示服务升级中
  *  cnGeoJson geojson.cn 数据
  */
-useGeoJsonMap({ code: "610500", name: "weinan", type: 'custom', data: {} }).then(() => {
+useGeoJsonMap({ type: 'custom', data: weinanJson, name: "weinan" }).then(() => {
   mapVisible.value = true
 }) // name 是必传条件
 </script>