echarts 地图

最新推荐文章于 2024-08-05 05:00:00 发布

yy_33404590

最新推荐文章于 2024-08-05 05:00:00 发布

阅读量285

点赞数

分类专栏：前端学习文章标签： echarts javascript ecmascript

本文链接：https://blog.csdn.net/qq_33404590/article/details/128842657

版权

前端学习专栏收录该内容

32 篇文章 1 订阅

订阅专栏

该代码示例展示了如何在Vue项目中利用ECharts库和阿里云提供的地区json数据，创建一个展示江苏省各城市地理位置的地图。通过注册地图并设置系列数据，实现了地图上的散点效果，每个城市都有对应的坐标值和视觉表示。

摘要由CSDN通过智能技术生成

http://datav.aliyun.com/portal/school/atlas/area_selector （阿里云，地区json数据获取）

<template>
  <div class="map">
    江苏地图
    <div class="mapbox" id="mapbox"></div>
    <div class="scatter" id="scatter"></div>
  </div>
</template>

<script>
import geoJson from "@/assets/json/jiangsu.json";
import * as echarts from "echarts";
export default {
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  data() {
    return {
      myData: [
        {
          name: "南京市",
          value: [118.767413, 32.041544],
        },
        {
          name: "无锡市",
          value: [120.301663, 31.574729],
        },
        {
          name: "徐州市",
          value: [117.184811, 34.261792],
        },
        {
          name: "常州市",
          value: [119.946973, 31.772752],
        },
        {
          name: "苏州市",
          value: [120.619585, 31.299379],
        },
        {
          name: "南通市",
          value: [120.864608, 32.016212],
        },
        {
          name: "连云港市",
          value: [119.178821, 34.600018],
        },
        {
          name: "淮安市",
          value: [119.021265, 33.597506],
        },
        {
          name: "盐城市",
          value: [120.139998, 33.377631],
        },
        {
          name: "扬州市",
          value: [119.421003, 32.393159],
        },
        {
          name: "镇江市",
          value: [119.452753, 32.204402],
        },
        {
          name: "泰州市",
          value: [119.915176, 32.484882],
        },
        {
          name: "宿迁市",
          value: [118.275162, 33.963008],
        },
      ],
    };
  },
  methods: {
    initChart() {
      var myChart = echarts.init(document.getElementById("mapbox"));
      echarts.registerMap("JS", geoJson);

      let option = {
        geo: {. // ---- 这个属性一定要加！！！！
          map: "JS",
        },
        title: {
          text: "Population Density of Hong Kong （2011）",
          subtext: "Data from Wikipedia",
        },
        series: [
          {
            type: "map",
            map: "JS",
            roam: false,
            data: [
              {
                name: "南京",
                value: 23,
              },
              {
                name: "无锡",
                value: 23,
              },
              {
                name: "徐州市",
                value: 23,
              },
              {
                name: "常州市",
                value: 23,
              },
              {
                name: "苏州市",
                value: 23,
              },
              {
                name: "南通市",
                value: 23,
              },
              {
                name: "淮安市",
                value: 23,
              },
              {
                name: "盐城市",
                value: 23,
              },
              {
                name: "扬州市",
                value: 23,
              },
              {
                name: "镇江市",
                value: 23,
              },
              {
                name: "泰州市",
                value: 23,
              },
              {
                name: "宿迁市",
                value: 23,
              },
            ],
            name: "江苏资源展示",
            label: {
              show: true, // 显示省份标签
              // textStyle: { color: '#fff' } // 省份标签字体颜色
            },
            itemStyle: {
              areaColor: 'pink'
            }
          },
          {
            type: "effectScatter",
            coordinateSystem: "geo",
            zlevel: 1,
            rippleEffect: {
              number: 3, // 波纹的数量。
              period: 5, // 动画的周期，秒数。
              scale: 3, // 动画中波纹的最大缩放比例。
              brushType: "fill", // 波纹的绘制方式，可选 'stroke' 和 'fill'。
            },
            symbolSize: 8,
            data: this.myData,
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
.mapbox {
  height: 500px;
  border: 1px solid red;
}
.scatter {
  height: 200px;
  border: 1px solid red;
}
</style>