vue + echarts 实现乡镇地图

vue +echarts 实现乡镇地图

一、导入地图数据（我这里用的是json）

在这里插入代码片
``

<template>
  <div class="content">
      <!-- 地图 -->
        <div id="map" style="width:1000px;height: 700px; position: relative"></div>
  </div>
</template>

<script>
  import echarts from "echarts"
  import tuanfengJson from "./map.json"
  export default {
    components:{

    },
    data() {
      return {
        mapJson: [],
        collapsable: false,
        expandAll: true,
        style: {
          background: '#fff',
          color: '#5e6d82',
        },
      }
    },
    async created() {
      this.mapJson = await tuanfengJson;
      this.mapData = tuanfengJson.features.map(item => {
        return ({
          name: item.properties.name,
          value: 1000,
        })
      })
      this.init() //调用下面的 echarts初始化
    },
    mounted() {
        const  data ={
          town_name:'团风县'
        }
      this.getTowninfo(data)
    },
    methods: {
      init() {
        const  that = this;
        var myChart = echarts.init(document.getElementById('map'));
        echarts.registerMap('cityMap', this.mapJson, {}); //加载自定义边界数据地图
        var option = {
          dataRange: {
            show:false,
            x: 'left',
            y: 'bottom',
            splitList: [
              {start: 1, end: 1, color: '#87cefa'},
              {start: 2, end: 2, color: '#9dd7cd'},
              {start: 3, end: 3, color: '#b3e09f'},
              {start: 4, end: 4, color: '#c8e972'},
              {start: 5, end: 5, color: '#def244'},
              {start: 6, end: 6, color: '#f4fb17'},
              {start: 7, end: 7, color: '#ffee00'},
              {start: 8, end: 8, color: '#ffcc00'},
              {start: 9, end: 9, color: '#ffaa00'},
              {start: 10, end: 10, color: '#ff8900'},
              {start: 11, end: 11, color: '#2AB8FF'},
            ],
          },
          // tooltip: {
          //   trigger: 'item',
          //   formatter: p => {
          //     // console.log(p)
          //     let val = p.value;
          //     if (window.isNaN(val)) {
          //       val = 0;
          //     }
          //     let txtCon =
          //       "<div style='text-align:center'> 地区：" + p.name + '</div>';
          //     this.show = true
          //     return txtCon;
          //   }
          // },
          visualMap: {
            show:false,
            min: 1,
            max: 12,
            text: ['High', 'Low'],
            realtime: false,
            calculable: true,
            inRange: {
              color: ['lightskyblue', 'yellow', 'orangered']
            }
          },
          series: [{
            name: '地图',
            type: 'map',
            mapType: 'cityMap',
            zoom: 1.2,
            aspectScale: 1, //地图长度比
            data: [{
              name: '团风镇',
              value: 1
            },
              {
                name: '淋山河镇',
                value: 2
              },
              {
                name: '方高坪镇',
                value: 3
              },
              {
                name: '回龙山镇',
                value: 4
              },
              {
                name: '马曹庙镇',
                value: 5
              },
              {
                name: '上巴河镇',
                value: 6
              },
              {
                name: '总路咀镇',
                value:7
              },
              {
                name: '但店镇',
                value: 8
              },
              {
                name: '贾庙乡',
                value: 9
              },
              {
                name: '杜皮乡',
                value: 10
              },
            ],
            nameMap: {
              '团风镇': '团风镇',
              '淋山河镇': '淋山河镇',
              '方高坪镇': '方高坪镇',
              '回龙山镇': '回龙山镇',
              '马曹庙镇': '马曹庙镇',
              '上巴河镇': '上巴河镇',
              '总路咀镇': '总路咀镇',
              '但店镇': '但店镇',
              '贾庙乡': '贾庙乡',
              '杜皮乡': '杜皮乡',
            },
            itemStyle: {
              normal: {
                show: true,
                areaColor: '#031525', //地图区域的颜色 也可以颜色渐变如下的 areaColor
                borderColor: '#0CD5DD', //边界线颜色
                borderWidth: '1', //边界线的宽度
              },
              emphasis: { // 鼠标移入时区域的样式
                show:false,
                areaColor: '#2AB8FF',
                borderWidth: 0,
                color: 'green'
              }
            },
            label: {
              show: true,
              normal: {
                show: true,
                textStyle: {
                  color: '#333', //省市区字体颜色
                  fontSize:22
                }
              },
              emphasis: { //对应的鼠标悬浮效果
                show: true,
                textStyle: {
                  color: '#333' //鼠标移入对应的省市区字体颜色
                }
              }
            },
            markPoint: {
              symbol: 'image://' + require('../../assets/five-pointed-star.png'), // 自定义图片路径
              symbolSize: [38, 38], // 图片大小
              label: {
                position: 'top',
                color:'#fff'
              },
              data: [{
                name: '团风镇',
                coord: [114.873448, 30.633345],
                value: ''
              }]
            },
          }]
        }
        myChart.setOption(option);
        myChart.on("mouseover", function (params){
          if(params.data.value != undefined){
            myChart.dispatchAction({
              type: 'downplay'
            });
          }
        });
        //点击地图上区域请求（各地区信息）
        myChart.on('click', function (params) {
          console.log(params)
          var ini_len=option.series[0].data.length;
          option.series[0].data[0].value=1;
          option.series[0].data[1].value=2;
          option.series[0].data[2].value=3;
          option.series[0].data[3].value=4;
          option.series[0].data[4].value=5;
          option.series[0].data[5].value=6;
          option.series[0].data[6].value=7;
          option.series[0].data[7].value=8;
          option.series[0].data[8].value=9;
          option.series[0].data[9].value=10;
            myChart.setOption(option);
          for(var i=0;i<ini_len;i++){
            if(option.series[0].data[i].name==params.name){//如果匹配正确
              //改变颜色
              option.series[0].data[i].value=11;
              myChart.setOption(option);
            }
          }
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
</style>