新增3D图表

src/views/about1/index.vue

@@ -1,216 +1,139 @@
 <template>
-  <div>
-    <canvas width="800" height="800" id="fuzhou1"></canvas>
-  </div>
+  <div class="map" id="mapEchart" style="width: 100%; height: 100vh"></div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
+// 引入工具
+import geoJson from "@/assets/json/福州市v2_full.json"; //该文件路径改成自己项目中的文件路径即可
 import * as echarts from "echarts";
-import "echarts-gl";
-import fuzhou_full from "@/assets/json/福州市v3_full.json";
-import { defineComponent, onMounted } from "vue";
-let option = {
-  geo3D: {
-    map: "fuzhou_full", //注册地图的名字
-    roam: true, //开启鼠标缩放和平移漫游。默认不开启
+import "echarts-gl"; //3D地图插件
+import { onMounted } from "vue";
+
+// 定义echarts方法
+const chartMap = () => {
+  var myChart = echarts.init(document.getElementById("mapEchart"));
+  // 重点：不要遗漏这句代码！！
+  echarts.registerMap("zhejiang", geoJson);
+  // 图表配置项
+  let option = {
     tooltip: {
       show: true,
-      trigger: "axis",
-    },
-    itemStyle: {
-      //整体板块的样式
-      color: "#ff4400", // 背景
-      opacity: 1, //透明度
-      borderWidth: 1, // 边框宽度
-      borderColor: "#fff", // 边框颜色
-    },
-    label: {
-      show: true,
-      textStyle: {
-        color: "#00ff7f", //地图初始化区域字体颜色
-        fontSize: 8,
-        opacity: 1,
-        // backgroundColor: "rgba(0,23,11,1)",
-      },
-
-      formatter: function (params) {
-        return params.name;
-      },
     },
-    //当鼠标放上去  地区区域是否显示名称
-    emphasis: {
-      label: {
-        show: true,
-        textStyle: {
-          color: "#fff",
-          fontSize: 3,
-          // backgroundColor: "rgba(0,23,11,1)",
+    //热力图配置项
+    visualMap: [
+      {
+        type: "continuous",
+        text: ["xxx"],
+        calculable: true,
+        max: 250,
+        inPange: {
+          color: ["#87aa66", "#eba438", "#d94d4c"],
         },
       },
-    },
-    shading: "lambert",
-    //光照阴影
-    light: {
-      //光照阴影
-      main: {
-        color: "#fff", //光照颜色
-        intensity: 1.2, //光照强度
-        //shadowQuality: 'high', //阴影亮度
-        shadow: true, //是否显示阴影
-        alpha: 60,
-        beta: 10,
+    ],
+    //3D地图配置项
+    geo3D: {
+      map: "zhejiang",
+      roam: true,
+      itemStyle: {
+        color: "#007aff",
+        opacity: 0.8,
+        borderWidth: 0.4,
+        borderColor: "#000",
+        // areaColor: '#fff'
       },
-      ambient: {
-        intensity: 0.6,
+      viewControl: {
+        autoRotate: true,
+        autoRotateAfterStill: 3,
+        distance: 120,
+        minAlpha: 5, // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
+        maxAlpha: 90, // 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
+        minBeta: -360, // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ]
+        maxBeta: 360, // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ]
+        animation: true, // 是否开启动画。[ default: true ]
+        animationDurationUpdate: 1000, // 过渡动画的时长。[ default: 1000 ]
+        animationEasingUpdate: "cubicInOut", // 过渡动画的缓动效果。[ default: cubicInOut ]
       },
-    },
-    //用于鼠标控制地图旋转等功能
-    viewControl: {
-      // 用于鼠标的旋转，缩放等视角控制。
-      projection: "perspective", // 投影方式，默认为透视投影'perspective'，也支持设置为正交投影'orthographic'。
-      autoRotate: false, // 是否开启视角绕物体的自动旋转查看。[ default: false ]
-      autoRotateDirection: "cw", // 物体自传的方向。默认是 'cw' 也就是从上往下看是顺时针方向，也可以取 'ccw'，既从上往下看为逆时针方向。
-      autoRotateSpeed: 10, // 物体自传的速度。单位为角度 / 秒，默认为10 ，也就是36秒转一圈。
-      autoRotateAfterStill: 3, // 在鼠标静止操作后恢复自动旋转的时间间隔。在开启 autoRotate 后有效。[ default: 3 ]
-      damping: 0, // 鼠标进行旋转，缩放等操作时的迟滞因子，在大于等于 1 的时候鼠标在停止操作后，视角仍会因为一定的惯性继续运动（旋转和缩放）。[ default: 0.8 ]
-      rotateSensitivity: 10, // 旋转操作的灵敏度，值越大越灵敏。支持使用数组分别设置横向和纵向的旋转灵敏度。默认为1, 设置为0后无法旋转。   rotateSensitivity: [1, 0]——只能横向旋转； rotateSensitivity: [0, 1]——只能纵向旋转。
-      zoomSensitivity: 10, // 缩放操作的灵敏度，值越大越灵敏。默认为1,设置为0后无法缩放。
-      panSensitivity: 10, // 平移操作的灵敏度，值越大越灵敏。默认为1,设置为0后无法平移。支持使用数组分别设置横向和纵向的平移灵敏度
-      panMouseButton: "left", // 平移操作使用的鼠标按键，支持：'left' 鼠标左键（默认）;'middle' 鼠标中键 ;'right' 鼠标右键(注意：如果设置为鼠标右键则会阻止默认的右键菜单。)
-      rotateMouseButton: "left", // 旋转操作使用的鼠标按键，支持：'left' 鼠标左键;'middle' 鼠标中键（默认）;'right' 鼠标右键(注意：如果设置为鼠标右键则会阻止默认的右键菜单。)
-
-      distance: 200, // [ default: 100 ] 默认视角距离主体的距离，对于 grid3D 和 geo3D 等其它组件来说是距离中心原点的距离,对于 globe 来说是距离地球表面的距离。在 projection 为'perspective'的时候有效。
-      minDistance: 40, // [ default: 40 ] 视角通过鼠标控制能拉近到主体的最小距离。在 projection 为'perspective'的时候有效。
-      maxDistance: 400, // [ default: 400 ] 视角通过鼠标控制能拉远到主体的最大距离。在 projection 为'perspective'的时候有效。
-
-      alpha: 40, // 视角绕 x 轴，即上下旋转的角度。配合 beta 可以控制视角的方向。[ default: 40 ]
-      beta: 15, // 视角绕 y 轴，即左右旋转的角度。[ default: 0 ]
-      minAlpha: -720, // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
-      maxAlpha: 720, // 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
-      minBeta: -720, // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ]
-      maxBeta: 720, // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ]
 
-      center: [0, 0, 0], // 视角中心点，旋转也会围绕这个中心点旋转，默认为[0,0,0]。左右 上下 前后
-
-      animation: true, // 是否开启动画。[ default: true ]
-      animationDurationUpdate: 1000, // 过渡动画的时长。[ default: 1000 ]
-      animationEasingUpdate: "cubicInOut", // 过渡动画的缓动效果。[ default: cubicInOut ]
-    },
-    //修改选中区域的样式
-    regions: [
-      {
-        name: "运城市",
-        height: 20, //修改选中区域的三维高度
-        selected: true,
-        select: {
-          areaColor: "red",
-          color: "red",
-        },
-        index: 0,
-      },
-      {
-        name: "大同市",
-        height: 20, //修改选中区域的三维高度
-        selected: true,
-        select: {
-          areaColor: "red",
-          color: "red",
+      emphasis: {
+        disabled: true, //是否可以被选中
+        label: {
+          //移入时的高亮文本
+          show: true,
+          color: "#333", //显示字体颜色变淡
+          fontSize: 18, //显示字体变大
         },
-      },
-    ],
-
-    silent: false,
-    regionHeight: 20, //修改整个地图的三维高度
-  },
-  series: [
-    {
-      zlevel: -10,
-      regionHeight: 2,
-      type: "map3D",
-      map: "fuzhou_full", // 地图类型。echarts-gl 中使用的地图类型同 geo 组件相同
-    },
-  ],
-};
-
-export default defineComponent({
-  // setup() {},
-  onMounted() {
-    let Chart = echarts.init(document.getElementById("fuzhou1") as HTMLElement);
-   
-    echarts.registerMap('fuzhou_full',fuzhou_full as any)
-    Chart.hideLoading();
-    // 图表配置项
-    let option = {
-      geo3D: {
-        map: fuzhou_full,
-        roam: true,
         itemStyle: {
-          color: "#007aff",
-          opacity: 0.8,
-          borderWidth: 0.4,
-          borderColor: "#000",
-          // areaColor: '#fff'
-        },
-        viewControl: {
-          autoRotate: true,
-          autoRotateAfterStill: 3,
-          distance: 120,
-          minAlpha: 5, // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
-          maxAlpha: 90, // 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
-          minBeta: -360, // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ]
-          maxBeta: 360, // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ]
-          animation: true, // 是否开启动画。[ default: true ]
-          animationDurationUpdate: 1000, // 过渡动画的时长。[ default: 1000 ]
-          animationEasingUpdate: "cubicInOut", // 过渡动画的缓动效果。[ default: cubicInOut ]
+          color: "#ff7aff", //显示移入的区块变粉色
         },
-
-        emphasis: {
-          disabled: true, //是否可以被选中
-          label: {
-            //移入时的高亮文本
-            show: true,
-            color: "#333", //显示字体颜色变淡
-            fontSize: 18, //显示字体变大
-          },
-          itemStyle: {
-            color: "#ff7aff", //显示移入的区块变粉色
-          },
-        },
-        label: {
-          show: true,
-          position: "top",
-          color: "#111", //地图初始化区域字体颜色
-          fontSize: 14,
-          lineHeight: 16,
-          // textStyle: {
-          //   color: "#fff", //地图初始化区域字体颜色
-          //   fontSize: 12,
-          //   opacity: 1,
-          //   backgroundColor: "rgba(0,23,11,0)",
-          // },
+      },
+      label: {
+        show: true,
+        position: "top",
+        color: "#111", //地图初始化区域字体颜色
+        fontSize: 14,
+        lineHeight: 16,
+      },
+      shading: "lambert",
+      light: {
+        //光照阴影
+        main: {
+          // color: "#fff", //光照颜色
+          intensity: 1, //光照强度
+          //shadowQuality: 'high', //阴影亮度
+          shadow: true, //是否显示阴影
+          shadowQuality: "medium", //阴影质量 ultra //阴影亮度
+          alpha: 55,
+          beta: 10,
         },
-        shading: "lambert",
-        light: {
-          //光照阴影
-          main: {
-            // color: "#fff", //光照颜色
-            intensity: 1, //光照强度
-            //shadowQuality: 'high', //阴影亮度
-            shadow: true, //是否显示阴影
-            shadowQuality: "medium", //阴影质量 ultra //阴影亮度
-            alpha: 55,
-            beta: 10,
-          },
-          ambient: {
-            intensity: 0.7,
-          },
+        ambient: {
+          intensity: 0.7,
         },
       },
-    };
+    },
+    // series: [
+    //   //3D柱状图配置项
+    //   {
+    //     name: "xxx",
+    //     type: "bar3D",
+    //     show: false,
+    //     coordinateSystem: "geo3D",
+    //     barSize: 3,
+    //     shading: "lambert",
+    //     opacity: 1,
+    //     bevelSize: 0.2,
+    //     label: {
+    //       show: false,
+    //       formatter: "{a}",
+    //     },
+    //     //自定义的data数组 value中数组的含义:[杭州的经度or纬度，要展示的3d柱状图数值大小]
+    //     data: [
+    //       { name: "杭州", value: [120.161693, 30.280059, 643] },
+    //       { name: "温州", value: [120.705869, 28.001095, 98] },
+    //       { name: "湖州", value: [120.094566, 30.899015, 72] },
+    //       { name: "嘉兴", value: [120.762045, 30.750912, 131] },
+    //       { name: "绍兴", value: [120.586673, 30.036519, 116] },
+    //       { name: "丽水", value: [119.929503, 28.472979, 40] },
+    //       { name: "衢州", value: [118.880768, 28.941661, 22] },
+    //       { name: "金华", value: [119.654027, 29.084455, 156] },
+    //       { name: "台州", value: [121.426996, 28.662297, 110] },
+    //       { name: "宁波", value: [121.556686, 29.880177, 163] },
+    //       { name: "舟山", value: [122.214339, 29.991092, 20] },
+    //     ],
+    //   },
+    // ],
+  };
+  myChart.setOption(option);
+  //让可视化地图跟随浏览器大小缩放
+  window.addEventListener("resize", () => {
+    myChart.resize();
+  });
+};
 
-    Chart.setOption(option);
-  },
+onMounted(() => {
+  // 挂载echart
+  chartMap();
 });
 </script>
 
-<style scoped></style>
+<style lang="less" scoped></style>