【vue echartMap】实现中国地图发散图

实现效果:

进行个简单的代码记录:

/**
* @Description:
* @author cxg
* @date 2020/01/08
*/
<template>
  <div class="echart-page">
    <div
      ref="myEchart"
      :style="{ height: screenHeight + 'px', width: screenWidth + 'px' }"
    />
  </div>
</template>

<script>
import echarts from "echarts";
import "echarts/map/js/china.js"; // 引入中国地图数据
import { getAll, getProductBatchBrowseRecords } from "@/api/traceproduct";
import chinaGeoCoordMap from "@/utils/chinaGeoCoordMap";

var chinaDatas = [
  //攻击点
  [
    {
      name: "黑龙江省", //名称
      value: 0, //点的大小
      price: 100, //均价
      num: 2, //数量
    },
  ],
  [
    {
      name: "内蒙古自治区",
      value: 0,
      price: 100,
      num: 2,
    },
  ],
  [
    {
      name: "吉林省",
      value: 0,
      price: 100,
      num: 2,
    },
  ],
  [
    {
      name: "辽宁省",
      value: 0,
      price: 100,
      num: 2,
    },
  ],
  [
    {
      name: "河北省",
      value: 0,
      price: 100,
      num: 2,
    },
  ],
  [
    {
      name: "天津",
      value: 0,
      price: 100,
      num: 2,
    },
  ],
  [
    {
      name: "山西省",
      value: 0,
      price: 100,
      num: 2,
    },
  ],
  [
    {
      name: "陕西省",
      value: 0,
      price: 100,
      num: 2,
    },
  ],
  [
    {
      name: "甘肃",
      value: 0,
      price: 100,
      num: 2,
    },
  ],
  [
    {
      name: "宁夏",
      value: 0,
      price: 100,
      num: 2,
    },
  ],
  [
    {
      name: "青海省",
      value: 0,
      price: 100,
      num: 2,
    },
  ],
  [
    {
      name: "新疆",
      value: 0,
      price: 100,
      num: 2,
    },
  ],
  [
    {
      name: "西藏",
      value: 0,
      price: 100,
      num: 2,
    },
  ],
  [
    {
      name: "四川省",
      value: 0,
      price: 100,
      num: 2,
    },
  ],
  [
    {
      name: "重庆",
      value: 0,
      price: 100,
      num: 2,
    },
  ],
  [
    {
      name: "山东",
      value: 0,
      price: 100,
      num: 2,
    },
  ],
  [
    {
      name: "河南",
      value: 0,
      price: 100,
      num: 2,
    },
  ],
  [
    {
      name: "江苏省",
      value: 0,
      price: 100,
      num: 2,
    },
  ],
  [
    {
      name: "安徽省",
      value: 0,
      price: 100,
      num: 2,
    },
  ],
  [
    {
      name: "湖北",
      value: 0,
      price: 100,
      num: 2,
    },
  ],
  [
    {
      name: "浙江省",
      value: 0,
      price: 100,
      num: 2,
    },
  ],
  [
    {
      name: "福建省",
      value: 0,
      price: 100,
      num: 2,
    },
  ],
  [
    {
      name: "江西省",
      value: 0,
      price: 100,
      num: 2,
    },
  ],
  [
    {
      name: "湖南省",
      value: 0,
      price: 100,
      num: 2,
    },
  ],
  [
    {
      name: "贵州省",
      value: 0,
      price: 100,
      num: 2,
    },
  ],
  [
    {
      name: "广西壮族自治区",
      value: 0,
      price: 100,
      num: 2,
    },
  ],
  [
    {
      name: "海南省",
      value: 0,
      price: 100,
      num: 2,
    },
  ],
  [
    {
      name: "台湾省",
      value: 0,
      price: 100,
      num: 2,
    },
  ],
];
var convertData = function (data, name) {
  var res = [];
  for (var i = 0; i < data.length; i++) {
    var dataItem = data[i];
    // 			console.log('dataItem',dataItem) //第二个数据
    var fromCoord = chinaGeoCoordMap[name]; //中心点(略阳)
    var toCoord = chinaGeoCoordMap[dataItem[0].name];
    if (fromCoord && toCoord) {
      res.push([
        {
          coord: fromCoord,
          value: dataItem[0].value,
        },
        {
          coord: toCoord,
          dataItem: dataItem,
        },
      ]);
    }
  }
  return res;
};
const redName = "新疆";
var planePath =
  "path://M.6,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705";

import { debounce } from "@/utils";
import { userCity, userPageList } from "@/api/user";
export default {
  components: {},
  data() {
    return {
      chart: null,
      salesRecord: [],
      name: "西安市",
      series: [],
      screenHeight: window.innerHeight, // 屏幕高度
      screenWidth: window.innerWidth,
      chinaDatas: [
        [
          {
            name: "黑龙江省", //名称
            value: 0, //点的大小
            price: 100, //均价
            num: 2, //数量
          },
        ],
        [
          {
            name: "台湾省", //名称
            value: 0, //点的大小
            price: 100, //均价
            num: 2, //数量
          },
        ],
        [
          {
            name: "内蒙古自治区",
            value: 0,
            price: 100,
            num: 2,
          },
        ],
        [
          {
            name: "吉林省",
            value: 0,
            price: 100,
            num: 2,
          },
        ],
        [
          {
            name: "辽宁省",
            value: 0,
            price: 100,
            num: 2,
          },
        ],
        [
          {
            name: "河北省",
            value: 0,
            price: 100,
            num: 2,
          },
        ],
        [
          {
            name: "天津",
            value: 0,
            price: 100,
            num: 2,
          },
        ],
        [
          {
            name: "山西省",
            value: 0,
            price: 100,
            num: 2,
          },
        ],
        [
          {
            name: "陕西省",
            value: 0,
            price: 100,
            num: 2,
          },
        ],
        [
          {
            name: "甘肃",
            value: 0,
            price: 100,
            num: 2,
          },
        ],
        [
          {
            name: "宁夏",
            value: 0,
            price: 100,
            num: 2,
          },
        ],
        [
          {
            name: "青海省",
            value: 0,
            price: 100,
            num: 2,
          },
        ],
        [
          {
            name: "新疆",
            value: 0,
            price: 100,
            num: 2,
          },
        ],
        [
          {
            name: "西藏",
            value: 0,
            price: 100,
            num: 2,
          },
        ],
        [
          {
            name: "四川省",
            value: 0,
            price: 100,
            num: 2,
          },
        ],
        [
          {
            name: "重庆",
            value: 0,
            price: 100,
            num: 2,
          },
        ],
        [
          {
            name: "山东",
            value: 0,
            price: 100,
            num: 2,
          },
        ],
        [
          {
            name: "河南",
            value: 0,
            price: 100,
            num: 2,
          },
        ],
        [
          {
            name: "江苏省",
            value: 0,
            price: 100,
            num: 2,
          },
        ],
        [
          {
            name: "安徽省",
            value: 0,
            price: 100,
            num: 2,
          },
        ],
        [
          {
            name: "湖北",
            value: 0,
            price: 100,
            num: 2,
          },
        ],
        [
          {
            name: "浙江省",
            value: 0,
            price: 100,
            num: 2,
          },
        ],
        [
          {
            name: "福建省",
            value: 0,
            price: 100,
            num: 2,
          },
        ],
        [
          {
            name: "江西省",
            value: 0,
            price: 100,
            num: 2,
          },
        ],
        [
          {
            name: "湖南省",
            value: 0,
            price: 100,
            num: 2,
          },
        ],
        [
          {
            name: "贵州省",
            value: 0,
            price: 100,
            num: 2,
          },
        ],
        [
          {
            name: "广西壮族自治区",
            value: 0,
            price: 100,
            num: 2,
          },
        ],
        [
          {
            name: "海南省",
            value: 0,
            price: 100,
            num: 2,
          },
        ],
      ],
    };
  },
  created() {
    if (this.$store.state.user.city.name)
      this.name = this.$store.state.user.city.name;
  },
  destroyed() {
    this.chart = null;
  },

  computed: {},
  mounted() {
    this.$nextTick(() => {
      this.initChart();
      this.Chart();
    });
    this.__resizeHandler = debounce(() => {
      if (this.chart) {
        this.chart.resize();
      }
    }, 100);
    window.addEventListener("resize", this.__resizeHandler);
  },
  methods: {
    Chart() {
      var series = [];
      var names = this.name;
      [[names, this.chinaDatas]].forEach(function (item, i) {
        series.push(
          {
            type: "lines",
            zlevel: 2,
            effect: {
              // 括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
              show: true,
              period: 4, // 箭头指向速度,值越小速度越快
              trailLength: 0.1, // 特效尾迹长度[0,1]值越大,尾迹越长重
              symbol: "circle", // 箭头图标
              symbolSize: 2, // 图标大小
              color: "#fff",
            },

            // symbol: ['none', 'arrow'],
            lineStyle: {
              normal: {
                // shadowBlur: .5,
                // // shadowColor: 'rgba(221, 244, 253, 1)',
                // shadowColor: 'rgba(221, 244, 253, 1)',
                // // shadowOffsetX: -5,
                // shadowOffsetY: 5,

                width: 0.3, // 尾迹线条width宽度
                opacity: 0.5, // 尾迹线条透明度
                curveness: 0.2, // 尾迹线条曲直度
                color: function (params) {
                  // 圆环显示文字
                  // console.log('redName',redName)
                  return "#00eaff"; //线条颜色
                },
              },
              color: "red",
            },
            tooltip: {
              //  show:false,
              trigger: "item",
              backgroundColor: "rgba(8, 18, 42, 0.85)",
              borderColor: "#040616",
              showDelay: 0,
              hideDelay: 0,
              enterable: true,
              transitionDuration: 0,
              extraCssText: "z-index:100",
              //点弹出内容
              formatter: function (params, ticket, callback) {
                // 根据业务自己拓展要显示的内容
                // console.log('params--1',params)
                let res = "";
                const name = params.data.dataItem[0].name;
                const price = params.data.dataItem[0].price;
                const num = params.data.dataItem[0].num;
                // res = "<div style='color:#fff;'><span>略阳→" + name + "</span><br/><span>均价:" + price + "</span><br/><span>数量:" + num + "</span></div>";
                res =
                  "<div style='color:#fff;'><span>" +
                  names +
                  " → " +
                  name +
                  "\n" +
                  "</span>,<span>数量:" +
                  num +
                  "</span></div>";
                const html =
                  '<div class="mapTableContent"><div class="tableTop">' +
                  names +
                  ' → 新疆</div> <div class="tableList"> <div class="item itemTop"> <p>城市</p> <p>数量</p> </div> <div class="item"> <p>新疆-1</p> <p>1</p> </div> <div class="item"> <p>新疆-2</p> <p>2</p> </div> </div> </div>';
                if (name == redName) {
                  return html;
                } else {
                  return res;
                }
              },
            },
            data: convertData(item[1], names),
          },
          {
            type: "effectScatter",
            coordinateSystem: "geo",
            zlevel: 2,
            rippleEffect: {
              // 涟漪特效
              period: 2, // 动画时间,值越小速度越快
              brushType: "fill", // 波纹绘制方式 stroke, fill
              scale: 4, // 波纹圆环最大限制,值越大波纹越大
            },

            // 括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
            // symbol: 'none',
            symbol: "circle",
            symbolSize: function (val) {
              return 2; //圆环大小
            },

            //点的颜色等效果
            itemStyle: {
              normal: {
                show: false,
                // color: '#f00'
                color: function (params) {
                  // 圆环显示文字
                  // console.log('redName',redName)

                  return "#ffa022";
                },
                borderWidth: 0,
                shadowColor: "#b5e8fa", // 发光🉐效果
                shadowBlur: 4,
              },
            },

            //暂无发现效果
            tooltip: {
              //  show:false,
              trigger: "item",
              backgroundColor: "rgba(8, 18, 42, 0.85)",
              borderColor: "#040616",
              showDelay: 0,
              hideDelay: 0,
              enterable: true,
              transitionDuration: 0,
              extraCssText: "z-index:100",
              formatter: function (params, ticket, callback) {
                // 根据业务自己拓展要显示的内容
                // console.log('params--2',params)
                let res = "";
                const name = params.data.dataItem[0].name;
                const price = params.data.dataItem[0].price;
                const num = params.data.dataItem[0].num;
                res =
                  "<div style='color:#fff;padding:10px;'><span>" +
                  this.name +
                  "→" +
                  name +
                  "\n" +
                  "</span><br/><span>数量:" +
                  num +
                  "</span></div>";
                return res;
              },
            },

            //攻击点 (黄点效果)
            data: item[1].map(function (dataItem) {
              // 	console.log('dataItem',dataItem[0]);
              return {
                dataItem: dataItem,
                name: dataItem[0].name,
                value: chinaGeoCoordMap[dataItem[0].name],
              };
            }),
          },
          // 被攻击点 (中心)
          {
            type: "scatter",
            coordinateSystem: "geo",
            zlevel: 999,
            rippleEffect: {
              period: 4,
              brushType: "stroke",
              scale: 4,
            },
            symbol: "circle",
            color: "#FBA128",
            symbolSize: 20,
            data: [
              {
                name: item[0],
                value: chinaGeoCoordMap[item[0]].concat([10]),
              },
            ],
          }
        );
      });
      this.series = series;
      this.initChart();
    },
    initChart() {
      this.setOptionFun();
    },
    setOptionFun() {
      this.chart = echarts.init(this.$el);
      this.chart.setOption({
        tooltip: {
          //  show:false,
          trigger: "item",
          backgroundColor: "#225641",
          borderColor: "#040616",
          showDelay: 0,
          hideDelay: 0,
          enterable: true,
          transitionDuration: 0,
          extraCssText: "z-index:100",
        },
        // backgroundColor: "#001339",
        // backgroundColor: '#001d3d',  背景颜色
        // visualMap: { //图例值控制
        //     min: 0,
        //     max: 1,
        //     calculable: true,
        //     show: false,
        //     color: ['#4fc6ef', '#4fc6ef', '#4fc6ef', '#4fc6ef', '#4fc6ef'],
        //     textStyle: {
        //         color: '#fff'
        //     }
        // },
        geo: {
          map: "china",
          zoom: 0.8, //当前视角的缩放比例
          top: "10%", //距离上边的距离
          label: {
            emphasis: {
              show: false,
            },
          },
          roam: true, // 是否允许缩放以及拖动
          itemStyle: {
            normal: {
              color: "rgba(9, 139, 101, .73)", // 地图背景色
              borderColor: "#6481a0", // 省市边界线00fcff 516a89
              borderWidth: 1,
            },
            emphasis: {
              color: "rgba(37, 43, 61, .5)", // 悬浮背景
            },
            //   normal: {
            //     areaColor: '#132937',
            //     borderColor: '#0692a4'
            // },
            // emphasis: {
            //     areaColor: '#0b1c2d'
            // }
          },
        },
        series: this.series,
      });
    },
  },
};
</script>
<style lang='scss' scoped>
.echart-page {
  height: 95%;
  width: 95%;
}
</style>

chinaGeoCoordMap.js

var chinaGeoCoordMap ={
    //整个地图的坐标点
    黑龙江省: [127.9688, 45.368],
    哈尔滨市: [126.534137, 45.809426],
    齐齐哈尔市: [123.939517, 47.360565],
    牡丹江市: [129.633795, 44.563852],
    佳木斯市: [130.330233, 46.805099],
    大庆市: [125.106936, 46.594625],
    鸡西市: [130.976195, 45.3027],
    双鸭山市: [131.156718, 46.653382],
    伊春市: [128.850994, 47.733126],
    七台河市: [131.013269, 45.778914],
    鹤岗市: [131.013269, 45.778914],
    绥化市: [131.013269, 45.778914],
    黑河市: [127.528588, 50.252563],
    大兴安岭: [124.148903, 50.418373],
    内蒙古自治区: [110.3467, 41.4899],
    呼和浩特市: [111.756087, 40.849513],
    包头市: [109.847115, 40.664024],
    乌海市: [106.80212, 39.665783],
    赤峰市: [118.896097, 42.26361],
    通辽市: [122.251098, 43.659441],
    鄂尔多斯市: [109.788591, 39.614705],
    呼伦贝尔市: [119.771792, 49.218635],
    巴彦淖尔市: [107.39555, 40.748702],
    乌兰察布市: [113.138893, 41.001403],
    兴安盟: [122.043786, 46.089063],
    锡林郭勒盟: [116.054388, 43.939216],
    阿拉善盟: [105.735373, 38.85985],
    吉林省: [125.8154, 44.2584],
    长春市: [125.330606, 43.822579],
    吉林市: [126.557359, 43.845023],
    四平市: [124.357633, 43.172626],
    通化市: [125.94661, 41.734031],
    白城市: [122.846162, 45.6249],
    辽源市: [125.149273, 42.895534],
    松原市: [124.832055, 45.148014],
    白山市: [126.429053, 41.938985],
    延边朝鲜族自治州: [129.475072, 42.92356],
    北京: [116.4551, 40.2539],
    东城区: [116.422972, 39.935935],
    西城区: [116.372514, 39.917682],
    朝阳区: [116.49843, 39.948115],
    丰台区: [116.292035, 39.865038],
    石景山区: [116.233394, 39.912428],
    海淀区: [116.304683, 39.965979],
    顺义区: [116.663152, 40.137014],
    通州区: [116.662281, 39.916855],
    大兴区: [116.347802, 39.733768],
    房山区: [116.148881, 39.755516],
    门头沟区: [116.111512, 39.946068],
    昌平区: [116.237041, 40.227074],
    平谷区: [117.127953, 40.148493],
    密云区: [116.849551, 40.381516],
    怀柔区: [116.638961, 40.322838],
    延庆区: [116.638961, 40.322838],
    辽宁省: [123.1238, 42.1216],
    沈阳市: [123.47282, 41.684476],
    大连市: [121.622778, 38.920076],
    鞍山市: [123.003096, 41.116139],
    抚顺市: [123.965523, 41.886183],
    本溪市: [123.69366, 41.493996],
    丹东市: [124.362125, 40.006187],
    锦州市: [121.132024, 41.10289],
    营口市: [122.242725, 40.673357],
    阜新市: [121.676407, 42.028665],
    辽阳市: [123.241641, 41.275246],
    盘锦市: [122.079216, 41.126526],
    铁岭市: [123.733517, 42.230591],
    朝阳市: [120.456346, 41.580038],
    葫芦岛市: [120.843399, 40.718457],
    河北省: [114.4995, 38.1006],
    石家庄市: [114.520379, 38.048994],
    唐山市: [118.188188, 39.636363],
    秦皇岛市: [119.608759, 39.941875],
    邯郸市: [114.545055, 36.631958],
    邢台市: [114.511459, 37.077837],
    保定市: [115.473185, 38.882011],
    张家口市: [114.891999, 40.773456],
    承德市: [117.972845, 40.957202],
    沧州市: [116.84558, 38.311348],
    廊坊市: [116.689427, 39.54448],
    衡水市: [115.675402, 37.745876],
    天津: [117.4219, 39.4189],
    和平区: [117.221413, 39.123709],
    河东区: [117.263552, 39.133704],
    红桥区: [117.159322, 39.173402],
    河西区: [117.126076, 39.120084],
    南开区: [117.157023, 39.145202],
    河北区: [117.203878, 39.15326],
    东丽区: [117.319418, 39.09166],
    西青区: [117.015558, 39.150742],
    津南区: [117.140826, 39.231013],
    北辰区: [117.140826, 39.231013],
    武清区: [117.04945, 39.391879],
    宝坻区: [117.316598, 39.724304],
    宁河区: [116.982195, 38.953596],
    静海区: [116.982195, 38.953596],
    蓟州区: [117.411127, 40.051287],
    滨海新区: [117.727743, 39.0065],
    山西省: [112.3352, 37.9413],
    太原市: [117.126076, 39.120084],
    大同市: [113.305861, 40.084457],
    长治市: [113.123712, 36.2015],
    阳泉市: [113.588765, 37.863502],
    晋中市: [112.759593, 37.693069],
    朔州市: [112.439374, 39.338673],
    忻州市: [112.73947, 38.421251],
    吕梁市: [111.149874, 37.524728],
    临汾市: [111.149874, 37.524728],
    运城市: [111.01166, 35.032469],
    晋城市: [112.856277, 35.496519],
    陕西省: [109.1162, 34.2004],
    汉中市: [106.168141, 33.33247],
    咸阳市: [108.713696, 34.337145],
    延安市: [109.498879, 36.592271],
    渭南市: [109.513144, 34.504049],
    西安市: [108.953939, 34.347507],
    铜川市: [108.948379, 34.897191],
    宝鸡市: [107.243422, 34.370107],
    榆林市: [109.739318, 38.301983],
    安康市: [109.033879, 32.691729],
    商洛市: [109.033879, 32.691729],
    甘肃: [103.5901, 36.3043],
    兰州市: [103.841674, 36.067935],
    白银市: [104.144447, 36.552914],
    天水市: [105.731996, 34.58765],
    酒泉市: [98.501256, 39.73869],
    张掖市: [100.456409, 38.931841],
    武威市: [102.643406, 37.935972],
    定西市: [104.633566, 35.589417],
    陇南市: [104.965714, 33.377239],
    平凉市: [106.670869, 35.550876],
    庆阳市: [107.649959, 35.716388],
    金昌市: [102.195178, 38.525144],
    宁夏: [106.3586, 38.1775],
    银川市: [106.240221, 38.49314],
    石嘴山市: [106.392897, 38.991254],
    吴忠市: [106.205367, 38.00576],
    中卫市: [105.204143, 37.507761],
    固原市: [106.248575, 36.022319],
    青海省: [101.4038, 36.8207],
    西宁市: [101.783296, 36.625007],
    海东市: [102.415614, 36.481794],
    海北藏族自治州: [100.906855, 36.961817],
    黄南藏族自治州: [102.012651, 35.526039],
    海南藏族自治州: [100.62777, 36.29187],
    果洛藏族自治州: [100.251596, 34.477431],
    玉树藏族自治州: [97.013752, 33.010253],
    海西蒙古族藏族自治州: [97.375149, 37.391236],
    新疆: [87.9236, 43.5883],
    乌鲁木齐市: [87.625588, 43.83222],
    克拉玛依市: [84.897623, 45.585471],
    吐鲁番市: [89.197299, 42.956351],
    哈密市: [93.522362, 42.826038],
    西藏: [91.11, 29.97],
    拉萨市: [91.122691, 29.649694],
    日喀则市: [88.895424, 29.277422],
    昌都市: [97.179634, 31.148909],
    山南市: [91.778104, 29.242775],
    那曲市: [92.057343, 31.48367],
    林芝市: [94.369204, 29.654293],
    四川省: [103.9526, 30.7617],
    成都市: [104.08268, 30.655574],
    乐山市: [103.773115, 29.558694],
    自贡市: [104.78502, 29.345837],
    泸州市: [105.449676, 28.879439],
    绵阳市: [104.687285, 31.473909],
    广元市: [105.850419, 32.442348],
    宜宾市: [104.648828, 28.758767],
    南充市: [106.116354, 30.847007],
    攀枝花市: [101.727269, 26.59036],
    德阳市: [104.406717, 31.133363],
    遂宁市: [105.598849, 30.540839],
    内江市: [105.064591, 29.58664],
    达州市: [107.475742, 31.21406],
    雅安市: [103.050114, 30.017042],
    广安市: [106.640129, 30.463988],
    巴中市: [106.752732, 31.875097],
    眉山市: [103.855992, 30.082777],
    资阳市: [104.634437, 30.136206],
    重庆: [108.384366, 30.439702],
    渝中区: [106.57573, 29.559342],
    江北区: [106.581191, 29.612611],
    南岸区: [106.667033, 29.503652],
    北碚区: [106.397973, 29.812987],
    渝北区: [106.637137, 29.724704],
    巴南区: [106.548025, 29.410564],
    黔江区: [108.785022, 29.54388],
    长寿区: [107.088105, 29.863771],
    万州区: [108.417076, 30.814616],
    涪陵区: [107.400625, 29.716674],
    合川区: [106.287589, 29.981309],
    南川区: [107.087871, 29.173178],
    江津区: [106.264592, 29.302272],
    永川区: [105.928841, 29.362728],
    大足区: [105.728978, 29.714369],
    綦江区: [106.656334, 29.035377],
    璧山区: [106.232397, 29.599166],
    铜梁区: [106.062222, 29.857099],
    潼南区: [105.836855, 30.197301],
    荣昌区: [105.588491, 29.419122],
    开州区: [108.407877, 31.175188],
    梁平区: [107.782369, 30.667617],
    武隆区: [107.768571, 29.34258],
    沙坪坝区: [106.465813, 29.547399],
    大渡口区: [106.48651, 29.490575],
    九龙坡区: [106.51813, 29.509184],
    山东: [117.1582, 36.8701],
    济南市: [117.125824, 36.656322],
    青岛市: [120.390033, 36.072927],
    枣庄市: [117.330539, 34.816231],
    淄博市: [118.06318, 36.820241],
    烟台市: [121.457292, 37.468894],
    潍坊市: [119.168949, 36.71427],
    东营市: [118.681384, 37.439413],
    临沂市: [118.363537, 35.109491],
    聊城市: [115.993888, 36.462991],
    济宁市: [116.591314, 35.420412],
    泰安市: [122.12812, 37.517576],
    威海市: [122.12812, 37.517576],
    日照市: [119.533993, 35.424957],
    滨州市: [117.97855, 37.388885],
    德州市: [116.367278, 37.443829],
    菏泽市: [115.486399, 35.238229],
    河南: [113.4668, 34.6234],
    郑州市: [113.631416, 34.753677],
    洛阳市: [112.460574, 34.624977],
    开封市: [114.314595, 34.803596],
    新乡市: [113.931872, 35.310347],
    安阳市: [114.398353, 36.10524],
    焦作市: [113.250849, 35.2212],
    平顶山市: [113.202404, 33.773731],
    鹤壁市: [114.303591, 35.751656],
    漯河市: [114.023419, 33.588432],
    南阳市: [112.535654, 32.996319],
    许昌市: [113.860197, 34.04263],
    商丘市: [115.661299, 34.420917],
    信阳市: [114.097484, 32.153748],
    周口市: [114.705206, 33.63207],
    三门峡市: [111.20653, 34.779038],
    濮阳市: [115.036743, 35.768296],
    驻马店市: [114.029042, 33.019537],
    江苏省: [118.8062, 31.9208],
    南京市: [118.802997, 32.064407],
    无锡市: [120.319157, 31.501519],
    徐州市: [117.291724, 34.213382],
    常州市: [119.981484, 31.816041],
    苏州市: [120.593562, 31.302824],
    淮安市: [119.119766, 33.557871],
    南通市: [119.230923, 34.604388],
    连云港市: [119.230923, 34.604388],
    盐城市: [120.168691, 33.355342],
    扬州市: [119.418273, 32.401896],
    镇江市: [119.43049, 32.194473],
    泰州市: [119.928421, 32.462381],
    宿迁市: [118.281, 33.967511],
    安徽省: [117.29, 32.0581],
    淮南市: [117.006961, 32.633063],
    蚌埠市: [117.396664, 32.921766],
    合肥市: [117.232866, 31.829278],
    芜湖市: [118.44231, 31.360264],
    马鞍山市: [118.513581, 31.677494],
    淮北市: [116.803961, 33.962376],
    安庆市: [117.064183, 30.530708],
    黄山市: [118.345436, 29.721638],
    阜阳市: [115.821009, 32.89679],
    六安市: [116.525837, 31.743172],
    铜陵市: [117.819631, 30.953463],
    滁州市: [118.340558, 32.261515],
    宿州市: [116.972268, 33.653298],
    宣城市: [118.766112, 30.946849],
    池州市: [115.785041, 33.851362],
    亳州市: [115.785041, 33.851362],
    湖北: [114.3896, 30.6628],
    武汉市: [114.311011, 30.600208],
    宜昌市: [111.293127, 30.698688],
    黄石市: [115.043804, 30.20396],
    鄂州市: [114.901611, 30.398315],
    十堰市: [110.807404, 32.636279],
    襄阳市: [112.127958, 32.016512],
    荆门市: [112.206389, 31.04297],
    荆州市: [112.246094, 30.341092],
    孝感市: [113.922072, 30.931712],
    黄冈市: [114.879639, 30.460106],
    咸宁市: [114.329094, 29.847808],
    随州市: [113.387723, 31.698236],
    浙江省: [119.5313, 29.8773],
    杭州市: [120.213785, 30.253332],
    宁波市: [121.631419, 29.86632],
    温州市: [120.707629, 28.001851],
    绍兴市: [120.585477, 30.03662],
    台州市: [121.428582, 28.663461],
    湖州市: [120.095093, 30.900203],
    嘉兴市: [120.762399, 30.750229],
    金华市: [119.654591, 29.086408],
    衢州市: [118.866597, 28.976304],
    舟山市: [122.213557, 29.991161],
    丽水市: [119.930146, 28.474548],
    福建省: [119.4543, 25.9222],
    福州市: [119.305195, 26.082246],
    厦门市: [118.096435, 24.486197],
    莆田市: [118.683019, 24.880214],
    泉州市: [118.683019, 24.880214],
    漳州市: [117.654154, 24.519719],
    龙岩市: [117.024595, 25.083053],
    三明市: [117.645521, 26.269477],
    南平市: [118.087353, 27.390387],
    宁德市: [119.553935, 26.673533],
    江西省: [116.0046, 28.6633],
    南昌市: [115.864585, 28.689202],
    赣州市: [114.941083, 25.835956],
    九江市: [115.960084, 29.668418],
    上饶市: [117.950613, 28.461388],
    抚州市: [116.364537, 27.955659],
    吉安市: [115.001664, 27.121528],
    景德镇市: [117.184574, 29.2745],
    萍乡市: [113.861499, 27.630185],
    鹰潭市: [117.077873, 28.267569],
    宜春市: [114.426435, 27.8206],
    新余市: [114.925264, 27.824857],
    湖南省: [113.0823, 28.2568],
    长沙市: [112.94547, 28.235654],
    株洲市: [113.139899, 27.836379],
    衡阳市: [112.577299, 26.900348],
    岳阳市: [113.136638, 29.363429],
    邵阳市: [111.474432, 27.246042],
    永州市: [110.487832, 29.125089],
    张家界市: [110.487832, 29.125089],
    湘潭市: [112.362092, 28.560473],
    益阳市: [112.362092, 28.560473],
    常德市: [113.022608, 25.777464],
    郴州市: [113.022608, 25.777464],
    娄底市: [112.000928, 27.704487],
    怀化市: [110.007939, 27.575929],
    贵州省: [106.6992, 26.7682],
    贵阳市: [106.634855, 26.653582],
    遵义市: [106.935151, 27.73298],
    铜仁市: [109.199887, 27.739065],
    安顺市: [105.953266, 26.257957],
    毕节市: [105.29974, 27.290984],
    六盘水市: [104.839853, 26.600643],
    云南省: [102.9199, 25.4663],
    昆明市: [102.838293, 24.88601],
    曲靖市: [103.799561, 25.497712],
    玉溪市: [102.552982, 24.359553],
    昭通市: [103.722935, 27.345367],
    普洱市: [100.973142, 22.831777],
    保山市: [99.178426, 25.140871],
    丽江市: [100.231887, 26.86143],
    临沧市: [100.096593, 23.890732],
    广东省: [113.12244, 23.009505],
    广州市: [113.272004, 23.137729],
    深圳市: [114.063402, 22.549791],
    汕头市: [116.689104, 23.359356],
    佛山市: [113.129659, 23.027493],
    湛江市: [110.366129, 21.278071],
    珠海市: [113.555464, 22.220968],
    韶关市: [113.602374, 24.817192],
    肇庆市: [112.473213, 23.053687],
    江门市: [113.087402, 22.586473],
    茂名市: [110.932116, 21.670408],
    惠州市: [114.424135, 23.116625],
    梅州市: [116.130691, 24.296021],
    阳江市: [111.988487, 21.863534],
    清远市: [113.06189, 23.688494],
    潮州市: [116.631191, 23.664477],
    揭阳市: [116.631191, 23.664477],
    云浮市: [112.050937, 22.91958],
    河源市: [114.707442, 23.74995],
    汕尾市: [115.382699, 22.792062],
    广西壮族自治区: [108.479, 23.1152],
    南宁市: [108.371154, 22.824472],
    桂林市: [110.186774, 25.243007],
    柳州市: [109.434425, 24.332751],
    北海市: [109.126531, 21.488181],
    梧州市: [111.284943, 23.483011],
    贵港市: [109.606666, 23.117714],
    河池市: [108.093803, 24.698649],
    防城港市: [108.36157, 21.693274],
    贺州市: [111.572949, 24.41024],
    玉林市: [110.190178, 22.659564],
    钦州市: [108.661155, 21.987934],
    百色市: [106.623438, 23.90898],
    崇左市: [107.370945, 22.38285],
    来宾市: [109.22803, 23.756811],
    海南省: [110.3893, 19.8516],
    海口市: [110.324951, 20.045408],
    三亚市: [109.51741, 18.260109],
    上海: [121.4648, 31.2891],
    黄浦区: [121.48, 31.23],
    徐汇区: [121.44344, 31.195493],
    长宁区: [121.417443, 31.222338],
    静安区: [121.453213, 31.234036],
    普陀区: [121.4, 31.25],
    虹口区: [121.510705, 31.27034],
    杨浦区: [121.532264, 31.265895],
    闵行区: [121.388535, 31.119102],
    嘉定区: [121.272402, 31.379662],
    松江区: [121.417443, 31.222338],
    青浦区: [121.131701, 31.155701],
    宝山区: [121.494895, 31.410733],
    金山区: [121.348866, 30.74764],
    奉贤区: [121.481097, 30.92426],
    崇明区: [121.131701, 31.155701],
    浦东新区: [121.528187, 31.172236],
    台湾省: [121.050216, 23.664766],
    高雄市: [120.322373, 22.622132],
    台南市: [120.196167, 22.997197],
    台中市: [120.658573, 24.16792],
    新北市: [121.435965, 24.955734],
    桃园市: [121.256485, 25.011169],
    台北市: [121.577288, 25.044695],
    基隆市: [121.757017, 25.1348],
    新竹市: [120.979146, 24.809306],
    嘉义市: [120.463516, 23.487631],
    香港: [114.181526, 22.284222],
    青铜峡市:[106.149842,38.141324],
    // 东区:[],
    // 南区:[],
    // 北区:[],
    // 中西区:[],
    // 湾仔区:[],
    // 观塘区:[],
    // 大埔区:[],
    // 沙田区:[],
    // 西贡区:[],
    // 荃湾区:[],
    // 屯门区:[],
    // 元朗区:[],
    // 葵青区:[],
    // 离岛区:[],
    // 油尖旺区:[],
    // 深水埗区:[],
    // 九龙城区:[],
    // 黄大仙区:[],
    澳门: [113.551014, 22.205742]
    // 路氹城:[],
    // 大堂区:[],
    // 望德堂区:[],
    // 风顺堂区:[],
    // 嘉模堂区:[],
    // 花地玛堂区:[],
    // 圣安多尼堂区:[],
    // 圣方济各堂区:[],
}
export default chinaGeoCoordMap

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
抱歉,我是一个语言模型AI,无法提供完整的代码,但我可以给你一些指导。 首先,你需要安装Vue.jsECharts。然后按照以下步骤进行操作: 1. 创建一个Vue组件,命名为NewZealandMap。 2. 在组件的template中,创建一个div元素,用于显示地图。 3. 在组件的script中,导入ECharts和地图数据。你可以从ECharts的官网下载地图数据,或者使用ECharts提供的在线地图数据。 4. 在组件的mounted生命周期钩子中,创建ECharts实例,并配置地图数据。 5. 将ECharts实例挂载到前面创建的div元素上。 下面是一个VueECharts实现新西兰地图的例子,你可以参考一下: ``` <template> <div id="new-zealand-map" style="width: 100%; height: 600px;"></div> </template> <script> import echarts from 'echarts' import 'echarts/map/js/province/new_zealand' export default { mounted () { const chart = echarts.init(document.getElementById('new-zealand-map')) chart.setOption({ tooltip: { show: true, trigger: 'item' }, visualMap: { min: 0, max: 100, left: 'left', top: 'bottom', text: ['High', 'Low'], calculable: true, inRange: { color: ['#e0ffff', '#006edd'] } }, series: [ { name: 'New Zealand map', type: 'map', mapType: 'New Zealand', roam: true, label: { normal: { show: true }, emphasis: { show: true } }, itemStyle: { normal: { borderColor: '#ccc' }, emphasis: { areaColor: '#ffeb7b' } }, data: [ {name: 'Auckland', value: 50}, {name: 'Wellington', value: 20}, {name: 'Christchurch', value: 30} // add more data here ] } ] }) } } </script> ``` 在这个例子中,我们使用了New Zealand地图数据,并添加了一些数据点到地图上。你可以根据自己的需求修改地图数据和样式。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值