农产品溯源页面地图调整

new-digital-agriculture-screen/src/views/trace/components/traceMap.vue

@@ -8,6 +8,7 @@
 <script setup>
 import { ref, reactive, onMounted, computed } from 'vue';
 import { useRoute } from 'vue-router';
+import * as echarts from 'echarts';
 import geoJsonData from './china.json'; // 根据实际情况调整路径;
 const route = useRoute();
 const props = defineProps({
@@ -26,6 +27,33 @@ const chinaGeoCoordMap = ref({
   香港: [114.133834, 22.381374],
   四川: [104.063707, 30.658753],
   河北: [114.511072, 38.054693],
+  北京: [116.46, 39.92],
+  浙江: [120.19, 30.26],
+  山东: [117, 36.65],
+  福建: [119.3, 26.08],
+  上海: [121.48, 31.22],
+  重庆: [106.54, 29.59],
+  江西: [115.89, 28.68],
+  山西: [112.53, 37.87],
+  黑龙江: [126.63, 45.75],
+  陕西: [108.95, 34.27],
+  辽宁: [123.38, 41.8],
+  海南: [110.35, 20.02],
+  湖南: [113, 28.21],
+  宁夏: [106.27, 38.47],
+  湖北: [114.31, 30.52],
+  内蒙古: [111.65, 40.82],
+  天津: [117.2, 39.13],
+  贵州: [106.71, 26.57],
+  甘肃: [103.73, 36.03],
+  江苏: [118.78, 32.04],
+  吉林: [125.35, 43.88],
+  河南: [113.65, 34.76],
+  青海: [101.74, 36.56],
+  安徽: [117.27, 31.86],
+  广西: [108.33, 22.84],
+  西藏: [91.11, 29.97],
+  新疆: [87.68, 43.77],
 });
 const chinaDatas = ref([
   [{ name: '云南', value: 382 }],
@@ -33,7 +61,35 @@ const chinaDatas = ref([
   [{ name: '香港', value: 9256 }],
   [{ name: '四川', value: 1256 }],
   [{ name: '河北', value: 382 }],
+  [{ name: '北京', value: 88 }],
+  [{ name: '浙江', value: 87 }],
+  [{ name: '山东', value: 87 }],
+  [{ name: '福建', value: 87 }],
+  [{ name: '上海', value: 87 }],
+  [{ name: '重庆', value: 87 }],
+  [{ name: '江西', value: 86 }],
+  [{ name: '山西', value: 84 }],
+  [{ name: '黑龙江', value: 83 }],
+  [{ name: '陕西', value: 83 }],
+  [{ name: '辽宁', value: 82 }],
+  [{ name: '海南', value: 82 }],
+  [{ name: '湖南', value: 82 }],
+  [{ name: '宁夏', value: 82 }],
+  [{ name: '湖北', value: 81 }],
+  [{ name: '内蒙古', value: 81 }],
+  [{ name: '天津', value: 80 }],
+  [{ name: '贵州', value: 80 }],
+  [{ name: '甘肃', value: 80 }],
+  [{ name: '江苏', value: 80 }],
+  [{ name: '吉林', value: 80 }],
+  [{ name: '河南', value: 79 }],
+  [{ name: '青海', value: 79 }],
+  [{ name: '广西', value: 78 }],
+  [{ name: '安徽', value: 77 }],
+  [{ name: '新疆', value: 76 }],
+  [{ name: '西藏', value: 76 }],
 ]);
+// 设置扩散中心
 const convertData = (data) => {
   var res = [];
   for (var i = 0; i < data.length; i++) {
@@ -73,6 +129,10 @@ const getSeries = () => {
             width: 1, //尾迹线条宽度
             opacity: 1, //尾迹线条透明度
             curveness: 0.3, //尾迹线条曲直度
+            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+              { offset: 0, color: '#0096FF' },
+              { offset: 1, color: '#00FF00' },
+            ]),
           },
         },
         data: convertData(item[1]),
@@ -180,7 +240,8 @@ const chartsData = reactive({
     },
     tooltip: {
       trigger: 'item',
-      backgroundColor: 'rgba(18, 55, 85, 0.8);',
+      className: 'custom-tooltip-container', // 自定义父容器类名
+      backgroundColor: 'rgba(0,0,0,0.5)',
       borderColor: '#35d0c0',
       showDelay: 0,
       hideDelay: 0,
@@ -189,6 +250,7 @@ const chartsData = reactive({
       extraCssText: 'z-index:100',
       formatter: function (params, ticket, callback) {
         let val = 0;
+        let str = `<div class="custom-echarts-tips"></div>`;
         if (typeof params.value == 'number') {
           val = params.value;
         } else {
@@ -197,7 +259,7 @@ const chartsData = reactive({
         //根据业务自己拓展要显示的内容
         var res = '';
         var name = params.name;
-        res = "<span style='color:#fff;'>" + name + '</span><br/>数据：' + val;
+        res = `<span style='color:#fff;'> ${name}<br/>数据：${val}</span>`;
         return res;
       },
     },
@@ -211,15 +273,27 @@ const chartsData = reactive({
           show: false,
         },
       },
-      roam: true, //是否允许缩放
+      roam: false, //是否允许缩放
       itemStyle: {
         normal: {
-          color: 'rgba(75,255,180,0.3)', //地图背景色
+          color: 'rgba(75,255,180,0.5)', //地图背景色
           borderColor: '#4bffb4', //省市边界线00fcff 516a89
           borderWidth: 1,
+          areaColor: {
+            type: 'radial', // 径向渐变
+            x: 0.5,
+            y: 0.5,
+            r: 0.8,
+            colorStops: [
+              { offset: 0, color: 'rgba(17,217,245,0.2)' },
+              { offset: 1, color: 'rgba(10,209,231,0.6)' },
+            ],
+          },
+          shadowColor: '#182f68',
+          shadowOffsetY: 2,
         },
         emphasis: {
-          color: 'rgba(75,255,180,0.5)', //悬浮背景
+          color: 'rgba(10,209,231,0.6)', //悬浮背景
           borderWidth: 2,
         },
       },