首页 > 网络编程 > JavaScript > vue+echarts绘制省份地图并添加自定义标注方式

vue+echarts绘制省份地图并添加自定义标注方式

福牛 4月 25, 2023 30 0

echarts绘制省份地图并添加自定义标注

效果图

-1

在main.js中引入地图

  1. import echarts from ‘echarts’
  2. vue.prototype.$echarts = echarts;

省份是动态引入的，在.vue文件中

html部分

  1. <div id=“province_map_box”>
  2.      <div id=province_map”></div>
  3. </div>

css部分

  1. <style lang=“scss” scoped>
  2.      #province_map_box {
  3.      height: 500px;
  4.      position: relative;
  5.      }
  6.      #province_map_box #province_map{
  7.      height: 100%;
  8.      }
  9.      #province_map_box .province_map_logo{
  10.      position: absolute;
  11.      top: 0;
  12.      left: 0;
  13.      width:45px;
  14.      }
  15. </style>
  16. <style lang=“scss”>
  17.      #province_map.tooltip_style{
  18.      line–height:1.7;
  19.      overflow: hidden;
  20.      }
  21.      #province_map.tooltip_left{
  22.      float: left;
  23.      }
  24.      #province_map.tooltip_right{
  25.      float: right;
  26.      }
  27. </style>

script部分

  1. data () {
  2.      return {
  3.      options: {
  4.      geo: {
  5.      map: “city”,
  6.      scaleLimit: {
  7.      min: 1,
  8.      max: 2
  9.      },
  10.      zoom: 1,
  11.      top: 20,
  12.      label: {
  13.      normal: {
  14.      show:false,
  15.      fontSize: “14”,
  16.      color: “rgba(0,0,0,0.7)”
  17.      },
  18.      emphasis: {
  19.      color: ‘#fff’
  20.      }
  21.      },
  22.      itemStyle: {
  23.      normal: {
  24.      borderColor: “rgba(0, 0, 0, 0.2)”,
  25.      areaColor: “#3b9cff”,//设置地图区域背景色
  26.      },
  27.      emphasis: {
  28.      areaColor: “#3b9cff”,
  29.      shadowOffsetX: 0,
  30.      shadowOffsetY: 0
  31.      }
  32.      }
  33.      },
  34.      series: [
  35.      {
  36.      name: ‘省份’,
  37.      type: ‘map’,
  38.      geoIndex: 0,
  39.      map: ‘province’,
  40.      data:[]
  41.      },
  42.      {
  43.      name: ‘企业分布’, //红色标注
  44.      type: ‘custom’,
  45.      coordinateSystem: ‘geo’,
  46.      clickable:true,
  47.      data:[]
  48.      }
  49.      ]
  50.      }
  51.      },
  52.      cityJson: {
  53.          features: []
  54.      }
  55. },
  56. created(){
  57.      this.city = this.$route.query.city
  58. },
  59. mounted() {
  60.      this.$nextTick(()=>{
  61.          this.initEchartMap()
  62.      })
  63. },
  64. methods:{
  65.      //初始化中国地图
  66.      initEchartMap() {
  67.          let mapDiv = document.getElementById(‘japan_map’)
  68.          let myChart = this.$echarts.init(mapDiv)
  69.          let city = this.city
  70.          //动态引入省份json文件
  71.          this.cityJson = require(`echarts/map/json/province/${city}.json`)
  72.          this.$echarts.registerMap(‘city’, this.cityJson, {})
  73.          this.setEchartOption()
  74.          myChart.setOption(this.options)
  75.      //可为自定义图标添加点击事件
  76.          myChart.on(‘click’, {element: ‘aaa’}, (params) => {
  77.          // todo: 当 name 为 ‘aaa’ 的图形元素被点击时，此回调被触发。
  78.          });
  79.      },
  80.      //修改echart配制
  81.      setEchartOption(){
  82.      //红色标注点的坐标
  83.          let markList = [
  84.              { name: ‘五常’, value: [123.523565,52.920114] },
  85.              { name: ‘中治’, value: [126.319954,46.400728] },
  86.              { name: ‘中顺’, value: [133.310927,47.271857] },
  87.              { name: ‘常也’, value: [129.631468,45.65747] },
  88.              { name: ‘可谭’, value: [130.551333,47.321922] },
  89.              { name: ‘顺允’, value: [125.436884,48.460261] },
  90.          ]
  91.          this.options.series[1].data = markList
  92.          if(markList.length>0){
  93.      this.options.series[1].renderItem = function(params,api){
  94.              return {
  95.      type: ‘image’,
  96.      name: ‘aaa’,
  97.      style: {
  98.      image: require(“@/assets/img/icon_mark.png”), //标注点图标
  99.      width: 14,
  100.      height: 18,
  101.      x: api.coord([markList[params.dataIndex].value[0], markList[params.dataIndex].value[1]])[0],
  102.      y: api.coord([markList[params.dataIndex].value[0], markList[params.dataIndex].value[1]])[1]
  103.              }
  104.              }
  105.          }
  106.          }
  107.      }
  108. }

注： echarts v4.2.1版本安装后会有地图json文件

-2

echarts添加地图标点（笔记）

如图：

-3

实例html：

  1. <!DOCTYPE html>
  2. <html style=“height: 100%“>
  3.      <head>
  4.          <meta charset=“utf-8”>
  5.      </head>
  6.      <body style=“height: 100%; margin: 0“>
  7.          <div id=“container” style=“height: 100%“></div>
  8.          <script type=“text/Javascript” src=“https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js”></script>
  9.          <!– <script type=”text/javascript” src=”https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js”></script> –>
  10.          <!– <script type=”text/javascript” src=”https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js”></script> –>
  11.          <!– <script type=”text/javascript” src=”https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js”></script> –>
  12.          <script type=“text/javascript” src=“https://cdn.jsdelivr.net/npm/echarts/map/js/china.js”></script>
  13.          <script type=“text/javascript” src=“E:\incuBATor-echarts-4.8.0\map\js\province\guangxi.js”></script>
  14.          <!– <script type=”text/javascript” src=”https://cdn.jsdelivr.net/npm/echarts/map/js/world.js”></script> –>
  15.          <!– <script type=”text/javascript” src=”https://api.map.baidu.com/api?v=2.0&ak=xfhhaTThl11qYVrqLZii6w8qE5ggnhrY&__ec_v__=20190126″></script>
  16.          <script type=”text/javascript” src=”https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js”></script> –>
  17.          <script type=“text/javascript”>
  18. var dom = document.getElementById(“container”);
  19. var myChart = echarts.init(dom);
  20. var app = {};
  21. option = null;
  22. var geoCoordMap = {
  23.      “南宁医院”:[108.324994,22.810701]
  24. };
  26. var convertData = function (data) {
  27.      var res = [];
  28.      for (var i = 0; i < data.length; i++) {
  29.          var geoCoord = geoCoordMap[data[i].name];
  30.          if (geoCoord) {
  31.              res.push(geoCoord.concat(data[i].value).concat(data[i].name));
  32.          }
  33.      }
  34.      console.log(res);
  35.      return res;
  36. };
  39. option = {
  40.      backgroundColor: ‘#fff’,
  41.      title: {
  42.          text: ‘广西区合作医院分布’,
  43.          subtext: ‘data from 数字广润’,
  44.          sublink: ‘http://gxgrtech.com.cn/’,
  45.          left: ‘center’,
  46.          textStyle: {
  47.              color: ‘#000’
  48.          }
  49.      },
  50.      tooltip: {
  51.          trigger: ‘item’,
  52.          //formatter: “名称:{a}<br />坐标:{c}”
  53.          formatter:function(params){
  54.              console.log(params);
  55.              console.log(params.data[3]);
  56.              var res = ‘名称:’+params.data[3]+‘<br/>’;
  57.              return res;
  58.          }
  60.      },
  61.      legend: {
  62.          orient: ‘vertical’,
  63.          top: ‘bottom’,
  64.          left: ‘right’,
  65.          data:[‘医院’],
  66.          textStyle: {
  67.              color: ‘#fff’
  68.          }
  69.      },
  70.      visualMap: {
  71.          min: 0,
  72.          max: 300,
  73.          splitNumber: 5,
  74.          color: [‘#d94e5d’,‘#eac736’,‘#50a3ba’],
  75.          textStyle: {
  76.              color: ‘#fff’
  77.          },
  78.          dimension:3
  79.      },
  80.      geo: {
  81.          map: ‘广西’,
  82.          label: {
  83.              normal: {
  84.                  show:true,
  85.                  areaColor: ‘#ffefd5’,
  86.                  borderColor: ‘#111’,
  87.                  textStyle:{color:“#c71585”}
  88.              },
  89.              emphasis: {
  90.                  show: false,
  91.                  textStyle:{color:“#fff”}
  92.              }
  93.          },
  94.          itemStyle: {
  95.              normal: {
  96.                  show:false,
  97.                  areaColor: ‘#ffefd5’,
  98.                  borderColor: ‘#009fe8’
  99.              },
  100.              emphasis: {
  101.                  show:false,
  102.                  areaColor: ‘#f47920’
  103.              }
  104.      }
  105.      },
  106.      series: [
  107.          {
  108.              name: ‘医院’,
  109.              type: ‘scatter’,
  110.              coordinateSystem: ‘geo’,
  111.              data: convertData([
  112.                  {name: “南宁医院”, value: 9}
  113.              ]),
  114.              encode: {
  115.                  value: 2
  116.              },
  117.              symbolSize: 12,
  118.              label: {
  119.                  normal: {
  120.                      show: false,//显示市区标签
  121.                      textStyle:{color:“#c71585”}//省份标签字体颜色
  122.                      },
  123.                  emphasis: {//对应的鼠标悬浮效果
  124.                      show: true, //关闭文字 （这东西有问题得关）
  125.                      textStyle:{color:“#800080”}
  126.                  }
  127.              },
  128.              itemStyle: {
  129.                  normal: {
  130.                      borderWidth: .5,//区域边框宽度
  131.                      borderColor: ‘#009fe8’,//区域边框颜色
  132.                      areaColor:“#ffefd5”,//区域颜色
  133.                      },
  134.                  emphasis: {
  135.                      show:true,
  136.                      borderWidth: .5,
  137.                      borderColor: ‘#4b0082’,
  138.                      areaColor:“#f47920”,
  139.                  }
  140.              }
  141.          }
  142.      ]
  143. };
  144. if (option && typeof option === “object”) {
  145.      myChart.setOption(option, true);
  146. }
  147.          </script>
  148.      </body>
  149. </html>

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

标签

相关推荐

发表评论