vue使用echarts绘制中国地图

最新推荐文章于 2025-06-12 15:28:46 发布

limit、T

最新推荐文章于 2025-06-12 15:28:46 发布

阅读量1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： other 文章标签： vue echarts js

本文链接：https://blog.youkuaiyun.com/qq_42825101/article/details/109358949

other 专栏收录该内容

45 篇文章

订阅专栏

本文介绍如何使用ECharts实现中国地图的可视化展示，并通过添加城市坐标数据增强地图交互体验。文章详细展示了HTML与JS代码配置过程，包括地图样式设置、城市坐标标注及波浪圆圈效果实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML代码：

<!-- 中国地图 -->
<div class="wrapper">
    <div class="map-container" id="chainMap" style="height: 800px"></div>
</div>

js引入代码

import echarts from 'echarts' // echarts支持
import '../../../node_modules/echarts/map/js/china' // 中国地图js

js代码

chainMap(){
      let myChart = echarts.init(document.getElementById('chainMap'));
      let option = {
        tooltip: {
          show: false
        },
        geo: {
          map: 'china',
          roam: false,// 一定要关闭拖拽
          zoom: 1.23,
          center: [105, 36], // 调整地图位置
          label: {
            normal: {
              show: true, //关闭省份名展示
              fontSize: "12",
              color: "rgba(0,0,0,1)"
            },
            emphasis: {
              show: false
            }
          },
          itemStyle: {
            normal: {
              areaColor: "#2707e3",
              borderColor: "#1cdc17",
              borderWidth: 1, //设置外层边框
              shadowBlur: 5,
              shadowOffsetY: 8,
              shadowOffsetX: 0,
              shadowColor: "#133d18"
            },
            emphasis: {
              areaColor: "#bd8f35",
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 5,
              borderWidth: 0,
              shadowColor: "rgba(104,83,22,0.5)"
            }
          }
        }
      };
      myChart.setOption(option);

    },

展示

添加数据

      let dataValue = [
        {name:'乌鲁木齐',value:[87.68, 43.77]},
        {name:'西安',value:[108.95, 34.27]}
      ]
      let data1 = dataValue.splice(0, 1); //截取部分给波浪圆圈

      let option = {
        tooltip: {
          show: false
        },
        geo: {
          map: 'china',
          roam: false,// 一定要关闭拖拽
          zoom: 1.23,
          center: [105, 36], // 调整地图位置
          label: {
            normal: {
              show: true, //关闭省份名展示
              fontSize: "12",
              color: "rgba(0,0,0,1)"
            },
            emphasis: {
              show: false
            }
          },
          itemStyle: {
            normal: {
              areaColor: "#2707e3",
              borderColor: "#1cdc17",
              borderWidth: 1, //设置外层边框
              shadowBlur: 5,
              shadowOffsetY: 8,
              shadowOffsetX: 0,
              shadowColor: "#133d18"
            },
            emphasis: {
              areaColor: "#bd8f35",
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 5,
              borderWidth: 0,
              shadowColor: "rgba(104,83,22,0.5)"
            }
          }
        },
        series: [
          {
            name: "",
            type: "scatter", // 小圆圈
            coordinateSystem: "geo",
            data: dataValue,
            symbol: "circle",
            symbolSize: 8,
            hoverSymbolSize: 10,
            tooltip: {
              formatter(value) {
                return value.data.name;
              },
              show: true
            },
            encode: {
              value: 2
            },
            label: {
              formatter: "{b}",
              position: "right",
              show: false
            },
            itemStyle: {
              color: "#0efacc"
            },
            emphasis: {
              label: {
                show: false
              }
            }
          },
          {
            name: "Top 5",
            type: "effectScatter", // 波浪圆圈
            coordinateSystem: "geo",
            data: data1,
            symbolSize: 15,
            tooltip: {
              formatter(value) {
                return value.data.name;
              },
              show: true
            },
            encode: {
              value: 2
            },
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke",
              color: "#0efacc",
              period: 9,
              scale: 5
            },
            hoverAnimation: true,
            label: {
              formatter: "{b}",
              position: "right",
              show: true
            },
            itemStyle: {
              color: "#0efacc",
              shadowBlur: 2,
              shadowColor: "#333"
            },
            zlevel: 1
          }
        ]
      };

效果