echarts地图绘制的相关信息

人口流动图

• 前提:引入echarts和宁夏地图的js

 $(window).load(function(){$(".loading").fadeOut()})  
$(function () {


    var timeScope =1;
    var mapquanping=false;
    var usemap=0;
    var province;
    index1()
    index2()
    index3()
    index7()

var mapBoxEchart = echarts.init(document.getElementById('map'));

$("#changemap").click(function(){
    mapBoxEchart.clear()
    if(usemap==0){
        province=200;
        usemap=1
    }else{
        usemap=0;
    }
})

   
window.addEventListener("resize", function() {
    mapBoxEchart.resize();
});

function chinamap(){
    
    usemap=1;
    var geoCoordMap = {
        //可以在地图上显示的城市的坐标信息
        '山东':[117.000923, 36.675807],
        '河北':[115.48333,38.03333],
    };
    var HFData = [ // 数据中name的城市名称必须与geoCoordMap中城市名称一致, 不然关联不上，合肥到各地区的线路
        [{name: '山东'}, {name: '宁夏',value: 66}],
        [{name: '山东'}, {name: '山东',value: 66}],
        [{name: '河北'}, {name: '宁夏',value: 66}],
        [{name: '河北'}, {name: '河北',value: 66}]
     
    ];
    var planePath = 'arrow'; // 箭头的svg
    // push进去线路开始-结束地点-经纬度
    var convertData = function(data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
            var dataItem = data[i];
            var fromCoord = geoCoordMap[dataItem[0].name];
            var toCoord = geoCoordMap[dataItem[1].name];
            if (fromCoord && toCoord) {
                res.push([{
                    coord: fromCoord
                }, {
                    coord: toCoord
                }]);
            }
        }
        return res;
    };
    var color = ['#fff', '#FFFFA8', '#46bee9']; //圆圈和字的颜色，线的颜色，箭头颜色
    // 数据
    var series = [];
    // 遍历由合肥到其他城市的线路
    [
        ['宁夏', HFData]
    ].forEach(function(item, i) {
        // 配置
        series.push({
            // 系列名称，用于tooltip的显示
            name: item[0],
            type: 'lines',
            zlevel: 1, // 用于 Canvas 分层，不同zlevel值的图形会放置在不同的 Canvas 中
            // effect出发到目的地 的白色尾巴线条
            // 线特效的配置
            effect: {
                show: true,
                period: 6, // 特效动画的时间，单位为 s
                trailLength: 0.1, // 特效尾迹的长度。取从 0 到 1 的值，数值越大尾迹越长
                color: '#46bee9', // 移动箭头颜色
                symbol: planePath,
                symbolSize: 6 // 特效标记的大小
            },
            // lineStyle出发到目的地 的线条颜色
            lineStyle: {
                normal: {
                    color: color[i],
                    width: 0,
                    curveness: 0.2 //幅度
                }
            },
            data: convertData(item[1]) //开始到结束数据
        }, {
            //出发地信息
            name: item[0],
            type: 'lines',
            zlevel: 2,
            effect: {
                show: true,
                period: 6,
                trailLength: 0,
                symbol: planePath,
                symbolSize: 6
            },
            lineStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#FFFFA8' // 出发
                    }, {
                        offset: 1,
                        color: '#58B3CC ' // 结束 颜色
                    }], false),
                    width: 1.5,
                    opacity: 0.4,
                    curveness: 0.2
                }
            },
            data: convertData(item[1])
        }, {
            // 目的地信息
            name: item[0],
            type: 'effectScatter',
            coordinateSystem: 'geo',
            zlevel: 2,
            rippleEffect: {
                brushType: 'stroke'
            },
            label: {
                normal: {
                    show: true,
                    position: 'right',
                    formatter: '{b}'
                }
            },
            symbolSize: function(val) {
                return val[2] / 8;
            },
            itemStyle: {
                normal: {
                    color: color[i]
                }
            },
            data: item[1].map(function(dataItem) {
                return {
                    name: dataItem[1].name,
                    value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
                };
            })
        });
    });

    // 指定相关的配置项和数据
    var mapBoxOption = {
        geo: {
            map: 'china',
            roam: false, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
            aspectScale: 0.75,
            zoom: 1.20,
            itemStyle: {
                normal: {
                    areaColor: '#0083ce',
                    borderColor: '#0066ba'
                },
                emphasis: {
                    borderWidth: 0,
                    borderColor: '#0066ba',
                    areaColor: "#0494e1",
                    shadowcolor:"red",
                    // shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        },
        series: series
    };
    // 使用制定的配置项和数据显示图表
    mapBoxEchart.setOption(mapBoxOption);
}
 
    function index7(city=""){

        $.ajax({
            url: getRootPath_web() + 'StatisticalController/FlowPopulation/count' ,
            type: "get",
            success: function (data) {
                var geoCoordMap = { //可以在地图上显示的城市的坐标信息
                    "银川":[106.27,38.47],
                    "石嘴山":[106.39,39.04],
                    "吴忠":[106.21,37.99],
                    "中卫":[105.18,37.51],
                    "固原":[106.28,36.01],
                    "省外":[104.98,38.01]

                };
                var collection=data.data;
                function draw(city){

                    var HFData=[]
                    var btncity =$("#btncity").html()
                   if(btncity){
                       city=btncity
                   }
                    console.log(city)
                    if(city){
                        if(city.includes("市")){
                            city= city.substring(0,city.length-1)
                        }
                        for(var i=0;i<collection.length;i++){

                            if(collection[i].zname.name==city||collection[i].name==city){
                                HFData.push([

                                    {name:collection[i].name},
                                    {name:collection[i].zname.name,value:160}
                                ])

                            }

                        }
                    }else{
                        for(var i=0;i<collection.length;i++){
                            HFData.push([
                                {name:collection[i].name},
                                {name:collection[i].zname.name,value:160},
                                // {name:collection[i].name,value:collection[i].value},

                            ])
                        }
                    }

                    HFData.push([
                        {name:"省外"},
                        {name:"省外",value:160},
                        // {name:collection[i].name,value:collection[i].value},

                    ],[
                        {name:"吴忠"},
                        {name:"吴忠",value:160},
                    ],[
                        {name:"中卫"},
                        {name:"中卫",value:160},                     
                    ],[
                        {name:"银川"},
                        {name:"银川",value:160},                      
                    ],[
                        {name:"石嘴山"},
                        {name:"石嘴山",value:160},                     

                    ],[
                        {name:"固原"},
                        {name:"固原",value:160},
                    ])

                    console.log(HFData)
                    var planePath = 'arrow'; // 箭头的svg
                    // push进去线路开始-结束地点-经纬度
                    var convertData = function(data) {
                        var res = [];
                        for (var i = 0; i < data.length; i++) {
                            var dataItem = data[i];
                            var fromCoord = geoCoordMap[dataItem[0].name];
                            var toCoord = geoCoordMap[dataItem[1].name];
                            if (fromCoord && toCoord) {
                                res.push([{
                                    coord: fromCoord
                                }, {
                                    coord: toCoord
                                }]);
                            }
                        }
                        return res;
                    };
                    var color = ['#fff', '#FFFFA8', '#46bee9']; //圆圈和字的颜色，线的颜色，箭头颜色
                    // 数据
                    var series = [];
                    // 遍历由合肥到其他城市的线路
                    [
                        ['银川', HFData]
                    ].forEach(function(item, i) {
                        // 配置
                        series.push({
                            // 系列名称，用于tooltip的显示
                            name: item[0],
                            type: 'lines',
                            zlevel: 1, // 用于 Canvas 分层，不同zlevel值的图形会放置在不同的 Canvas 中
                            // effect出发到目的地 的白色尾巴线条
                            // 线特效的配置
                            effect: {
                                show: true,
                                period: 6, // 特效动画的时间，单位为 s
                                trailLength: 0.5, // 特效尾迹的长度。取从 0 到 1 的值，数值越大尾迹越长
                                color: '#46bee9', // 移动箭头颜色
                                symbol: planePath,
                                symbolSize: 6 // 特效标记的大小
                            },
                            // lineStyle出发到目的地 的线条颜色
                            lineStyle: {
                                normal: {
                                    color: color[i],
                                    width: 0,
                                    curveness: 0.2 //幅度
                                }
                            },
                            data: convertData(item[1]) //开始到结束数据
                        }, {
                            //出发地信息
                            name: item[0],
                            type: 'lines',
                            zlevel: 2,
                            effect: {
                                show: true,
                                period: 6,
                                trailLength: 0,
                                symbol: planePath,
                                symbolSize: 3
                            },
                            lineStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: '#FFFFA8' // 出发
                                    }, {
                                        offset: 1,
                                        color: '#58B3CC ' // 结束 颜色
                                    }], false),
                                    width: 1,
                                    opacity: 0.4,
                                    curveness: 0.2
                                }
                            },
                            data: convertData(item[1])
                        }, {
                            // 目的地信息
                            name: item[0],
                            type: 'effectScatter',
                            coordinateSystem: 'geo',
                            zlevel: 2,
                            rippleEffect: {
                                brushType: 'stroke'
                            },
                            label: {
                                normal: {
                                    show: true,
                                    position: 'right',
                                    formatter: '{b}'
                                }
                            },
                            symbolSize: function(val) {
                                return val[2] / 8;
                            },
                            itemStyle: {
                                normal: {
                                    color: color[i]
                                }
                            },
                            data: item[1].map(function(dataItem) {
                                return {
                                    name: dataItem[1].name,
                                    value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
                                };
                            })
                        });
                    });

                    // 指定相关的配置项和数据
                    var mapBoxOption = {
                        geo: {
                            map: '宁夏',
                            roam: false, 
                            aspectScale: 0.75,
                            zoom: 1.20,
                            label: {
                                normal: {
                                    show: false,
                                    textStyle: {
                                        color: '#00a0c9'
                                    }
                                },
                                emphasis: { // 对应的鼠标悬浮效果
                                    show: false,
                                    textStyle: {
                                        color: "#00a0c9"
                                    },
                                    tooltip:{
                                        trigger:"item",
                                        formatter: function (params) {
                                            console.log(params)
                                        },
                                    },
                                }
                            },
                            itemStyle: {

                                normal: {
                                    areaColor: '#0083ce',
                                    borderColor: '#0066ba'
                                },
                                emphasis: {
                                    borderWidth: 0,
                                    borderColor: '#0066ba',
                                    areaColor: "#0494e1",
                                    // areaColor:"red",
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                },

                            },

                        },
                        series: series,
                    };
                    // 使用制定的配置项和数据显示图表
                    mapBoxEchart.setOption(mapBoxOption);
                }

                draw("")
  
                mapBoxEchart.on("click",function(params){
                    if(usemap==1){
                        // console.log("这是全国地图")
                        province=params.name
                        index11(params.name)
                        return
                    }

                })


            }
        });

    }
    
 
})

利用echarts实现地图数据

<template>
  <div class="app-container">
    <div class="dashboard-wrap">
      <el-row :gutter="24">
        <el-col :span="18" class="list-wrap">
          <div class="list-box">
            <div class="list-top-wrap">
              <div class="list-top-item">
                <div class="list-top-txt">涉及城市数量：</div>
                <div class="list-top-txt">{{ cityList.length }}</div>
              </div>
            </div>
            <el-row :gutter="24">
              <el-col :span="16">
                <div ref="echart" style="height: 490px;" />
              </el-col>
              <el-col :span="8">
                <div class="list-content">
                  <div class="list-content-tit">
                    <div style="margin-left: 24px;">城市名称</div>
                    <div style="padding-right: 4px;">项目数量</div>
                  </div>
                  <div class="list-content-list">
                    <div v-for="(i, idx) in cityList" :key="idx" class="list-content-item">
                      <div class="list-item-left">
                        <img v-if="idx >= 0 && idx < 3" :src="require('@/assets/dashboard/no'+(idx+1)+'.png')" alt="" class="item-icon">
                        <div v-if="idx >= 3" class="item-num">{{ idx+1 }}</div>
                        <text-tooltip class="item-txt" :msg="i.provinceName+i.cityName" :len="10" />
                      </div>
                      <div class="list-item-right">{{ i.value }}</div>
                    </div>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getDashboardTotal, getAreaCompanyList, getCityList } from '@/api/community-manage'
import { registerMap, init as initEcharts } from 'echarts'
import china_geo from './map/json/china.json'
import chinacities from './map/json/gaode-result.min.json'

export default {
  name: 'Dashboard',
  data() {
    return {
      totalInfo: {},
      cityList: [],
      cityMapList: [], // 地图数据
      companyList: []
    }
  },
  computed: {
    ...mapGetters([
      'roles'
    ])
  },
  created() {
    registerMap('china', china_geo)
    this.getList()
  },
  async mounted() {
    await this.getCityList()
    const mapList = []
    this.cityMapList.forEach(i => {
      try {
        mapList.push(center(i.provinceName, i.cityName, i.value))
      } catch (err) {
        console.log(err, typeof err, 'err')
      }
    })

    function center(province, city, num) {
      const filter = chinacities.districts.filter(i => i.name === province)
      if (filter.length === 1) {
        const s = filter[0]
        const districts = filter[0].districts
        let citys = []
        let res = []
        if (['北京市', '天津市', '上海市', '重庆市'].indexOf(province) > -1) {
          citys = filter[0]
          res = citys
          return [res.name, ...res.center, num]
        } else {
          citys = districts
          res = citys.filter(i => i.name === city)[0]
          return [s.name + res.name, ...res.center, num]
        }
      } else if (filter.length < 0) {
        console.error('error province')
      } else {
        console.error('error chinacities')
      }
      return ['', 0, 0, 0]
    }

    const echart = initEcharts(this.$refs.echart)
    echart.setOption({
      backgroundColor: '#fff', // 画布背景颜色
      tooltip: {
        show: true,
        trigger: 'item',
        padding: 0,
        position: 'top',
        borderColor: '#fff',
        formatter: (params) => {
          const { value } = params
          return `<div style="width:180px;height:86px;padding:0 14px;display: flex;flex-direction: column;justify-content: center;position: relative;top:-50%;">
                    <div style="display: flex;flex-direction: row;margin-bottom: 6px;">
                        <div style="font-size: 12px;line-height:16px;font-weight: 400;color: #666666;">城市名称：</div>
                        <div style="width: 100%;white-space: break-spaces;font-size: 12px;line-height:16px;font-weight: 400;color: #FF9900;">${value[0]}</div>
                    </div>
                    <div style="display: flex;flex-direction: row;">
                        <div style="font-size: 12px;flex-shrink:0;line-height:16px;font-weight: 400;color: #666666;">项目数量：</div>
                        <div style="font-size: 12px;line-height:16px;font-weight: 400;color: #FF9900;">${value[3]}</div>
                    </div>
                </div>`
        }
      },
      geo: {
        show: true,
        map: 'china',
        label: {
          normal: {
            show: false
          },
          emphasis: {
            show: false
          }
        },
        itemStyle: {
          color: '#eee'
        },
        emphasis: {
          itemStyle: {
            color: '#eee'
          }
        },
        roam: true, // 可放大
        regions: [
          {
            name: '新疆',
            itemStyle: {
              areaColor: '#F8E2E7',
              color: '#F8E2E7'
            },
            emphasis: {
              itemStyle: {
                color: '#F8E2E7'
              }
            }
          },
          {
            name: '四川',
            itemStyle: {
              areaColor: '#F8E2E7',
              color: '#F8E2E7'
            },
            emphasis: {
              itemStyle: {
                color: '#F8E2E7'
              }
            }
          },
          {
            name: '湖南',
            itemStyle: {
              areaColor: '#F8E2E7',
              color: '#F8E2E7'
            },
            emphasis: {
              itemStyle: {
                color: '#F8E2E7'
              }
            }
          },
        ],
        tooltip: {
          show: false
        }
      },
      dataset: [
        {
          dimensions: ['city', 'lng', 'lat', 'count'],
          source: mapList
        }
      ],
      series: [
        {
          type: 'scatter',
          map: 'china',
          coordinateSystem: 'geo',
          // symbol: 'pin',
          symbol: 'image://data:img/png;base64,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',
          symbolSize: [20, 25],
          // symbolOffset: [0, 1],
          encode: {
            // value: 3
            lng: 'lng',
            lat: 'lat'
          },
          // data: convertData(data),
          datasetIndex: 0,
          label: { // 图标上显示的内容
            formatter: '{@[3]}',
            // position: 'right',
            show: true
          },
          itemStyle: {
            color: 'purple'
          },
          tooltip: {
            show: true
          }
        }
      ]
    })
  },
  methods: {
    getList() {
      this.getDashboardTotal()
      this.getAreaCompanyList()
      this.getCityList()
    },

    // 获取统计数据
    getDashboardTotal() {
      getDashboardTotal().then(({ data }) => {
        this.totalInfo = data
      })
    },

    // 获取区域公司列表
    getAreaCompanyList() {
      getAreaCompanyList().then(({ data }) => {
        this.companyList = data
      })
    },

    // 获取城市列表
    async getCityList() {
      await getCityList().then(({ data }) => {
        this.cityList = data
        this.cityMapList = data
      })
    }
  }
}
</script>