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

@@ -8,7 +8,6 @@
 <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({
@@ -27,33 +26,6 @@ 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 }],
@@ -61,35 +33,7 @@ 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++) {
@@ -129,10 +73,6 @@ 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]),
@@ -240,8 +180,7 @@ const chartsData = reactive({
     },
     tooltip: {
       trigger: 'item',
-      className: 'custom-tooltip-container', // 自定义父容器类名
-      backgroundColor: 'rgba(0,0,0,0.5)',
+      backgroundColor: 'rgba(18, 55, 85, 0.8);',
       borderColor: '#35d0c0',
       showDelay: 0,
       hideDelay: 0,
@@ -250,7 +189,6 @@ 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 {
@@ -259,7 +197,7 @@ const chartsData = reactive({
         //根据业务自己拓展要显示的内容
         var res = '';
         var name = params.name;
-        res = `<span style='color:#fff;'> ${name}<br/>数据：${val}</span>`;
+        res = "<span style='color:#fff;'>" + name + '</span><br/>数据：' + val;
         return res;
       },
     },
@@ -273,27 +211,15 @@ const chartsData = reactive({
           show: false,
         },
       },
-      roam: false, //是否允许缩放
+      roam: true, //是否允许缩放
       itemStyle: {
         normal: {
-          color: 'rgba(75,255,180,0.5)', //地图背景色
+          color: 'rgba(75,255,180,0.3)', //地图背景色
           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(10,209,231,0.6)', //悬浮背景
+          color: 'rgba(75,255,180,0.5)', //悬浮背景
           borderWidth: 2,
         },
       },