Vue ecahrts 湖南地图渲染以及下钻地图展示

最新推荐文章于 2024-05-28 09:17:06 发布

随喜师兄

最新推荐文章于 2024-05-28 09:17:06 发布

阅读量603

点赞数 2

文章标签： vue.js echarts javascript

本文链接：https://blog.csdn.net/suixishix/article/details/131190691

版权

该文介绍如何在Vue.js应用中集成Echarts，展示湖南地图并实现下钻功能。首先通过npm安装Echarts，然后在main.js中引入并挂载到Vue实例。接着，准备湖南各市的数据，包括adcode和name。在模板中创建地图容器，并在方法中初始化地图图表。文章还提供了显示下钻地级市地图的方法，处理地图点击事件以实现下钻效果。最后，提供了完整的Vue组件代码示例。

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

1.环境准备

npm install echarts --save

在main.js 引入
import * as echarts from 'echarts';
Vue.prototype.$echarts = echarts;

2.准备需要使用到的数据

DataV.GeoAtlas地理小工具系列

选择出湖南地图看到右侧卡片其他类型点击下载

tip：如果只需要展示湖南省地图，下载湖南省地图就行如果需要有下钻地图的操作

需要下载每个地级市的json文件

all_hunan.json 文件在网上比较难找我直接复制在下面。

[
  {
    "adcode": "430100",
    "name": "长沙市"
  }, {
  "adcode": "430200",
  "name": "株洲市"
}, {
  "adcode": "430300",
  "name": "湘潭市"
}, {
  "adcode": "430400",
  "name": "衡阳市"
}, {
  "adcode": "430500",
  "name": "邵阳市"
}, {
  "adcode": "430600",
  "name": "岳阳市"
}, {
  "adcode": "430700",
  "name": "常德市"
}, {
  "adcode": "430800",
  "name": "张家界市"
}, {
  "adcode": "430900",
  "name": "益阳市"
}, {
  "adcode": "431000",
  "name": "郴州市"
}, {
  "adcode": "431100",
  "name": "永州市"
}, {
  "adcode": "431200",
  "name": "怀化市"
}, {
  "adcode": "431300",
  "name": "娄底市"
}, {
  "adcode": "433100",
  "name": "湘西土家族苗族自治州"
}]

之后就是下载每个地级市的json，在下载完所有地级市数据后将文件重命名，主要是方便做下钻。

3.显示湖南地图

<template>
  <div className="center-cmp" id="centermap">
    <div className="map" ref="mapChart" style="width:100%;height:100%;"></div>
  </div>
</template>

  methods: {
    initMapChart() {
      const el = this.$refs.mapChart
      const echarts = require('echarts')
      const myChart = echarts.init(el)
      let geoJson = require('@/assets/hunan/430000_full.json')
      echarts.registerMap('geo', geoJson)
      const option = {
        // 这里渲染地图
        geo: {
          map: 'geo', // 上面引入的数据名
          show: true,
          roam: false, // 关闭拖拽
          label: {
            show: true,
            color: '#38eaff',
          },
          itemStyle: {
            areaColor: 'rgba(15,84,116,0.07)', // 地图区域的颜色(没有数据时会按照这个颜色显示)
            borderColor: '#38eaff', // 地图区域的边框
            borderWidth: 1
          },
          emphasis: { // 高亮的显示设置
            label: {
              color: '#feffff',
            },
            itemStyle: {
              areaColor: 'rgba(15,140,217,0.67)',
            }
          },
          select: { // 选中显示设置
            label: {
              color: '#feffff',
            },
            itemStyle: {
              areaColor: 'rgba(15,140,217,0.67)',
            }
          }
        },
      }
      myChart.setOption(option)

      window.addEventListener('resize', function () {
        myChart.resize()
      })
    }
  },
  mounted() {
    this.initMapChart()
  }

4.显示下钻地级市地图

  methods: {
    initChart: function () {
      const echarts = require('echarts')
      const el = this.$refs.mapChart
      const chart = echarts.init(el)
      let alladcode = require('@/assets/hunan/all_hunan.json')
      let chinaGeoJson = require('@/assets/hunan/430000_full.json')
      this.initMapChart(chinaGeoJson, '湖南省', chart, alladcode)
    },
    //获取地图json数据
    getGeoJson(jsonName) {
      return require('@/assets/hunan/' + jsonName)
    },
    initMapChart(geoJson, name, chart, alladcode) {
      const el = this.$refs.mapChart
      const echarts = require('echarts')
      const myChart = echarts.init(el)
      echarts.registerMap('geo', geoJson)

      const option = {
        // 数据映射
        visualMap: {
          show: true,
          type: 'piecewise', // 分段标签
          min: 0, // 最小值
          max: 50, // 最大值，不设置为无限大
          right: 30, // 距离右侧位置
          bottom: 30, // 距离底部位置
          orient: 'vertical', // 组件竖直放置
          align: 'left', // 色块在左
          textGap: 14, // 文字主体之间的距离
          itemSymbol: 'circle', // 右下角映射组件使用圆点形状
          seriesIndex: 0, // 指定取哪个系列的数据(series.data)，若不设置则会影响图上标点颜色设置。
          // 一以下是分段式视觉映射组件的每一段的范围
          // gt：大于、gte：大于等于、lt：小于、lte：小于等于。
          textStyle: {
            color: '#dc2222'//文字颜色
          },
          pieces: [
            {
              gt: 5,
              label: '5个以上',
              color: '#1492FF',//图元颜色
            },
            {
              gte: 2,
              lte: 5,
              label: '2-5个',
              color: '#59AAF5'
            },
            {
              gte: 0,
              lt: 2,
              label: '0-2个',
              color: '#99CBF9'
            }
          ]
          /*
          pieces或者inRange内设置颜色试验时都能生效，个人认为需要传入组件控制颜色时
          再选择用inRange，两个都存在并给予不同的颜色，显示以pieces为主。
          */
        },
        geo: {
          map: 'geo', // 上面引入的数据名
          show: true,
          roam: false, // 关闭拖拽
          label: {
            show: true,
            color: '#38eaff',
            fillOpacity: 0.3,
          },
          itemStyle: {
            areaColor: 'rgba(15,84,116,0.07)', // 地图区域的颜色(没有数据时会按照这个颜色显示)
            borderColor: '#38eaff', // 地图区域的边框
            borderWidth: 1
          },
          emphasis: { // 高亮的显示设置
            label: {
              color: '#feffff',
            },
            itemStyle: {
              areaColor: 'rgba(15,140,217,0.67)',
            }
          },
          select: { // 选中显示设置
            label: {
              color: '#feffff',
            },
            itemStyle: {
              areaColor: 'rgba(15,140,217,0.67)',
            }
          }
        },
        series: [
          // 配置数据的显示
          {
            type: 'map', // 类型map
            geoIndex: 0, // 指定geo属性后，series-map.map 属性，以及 series-map.itemStyle 等样式配置不再起作用，而是采用 geo 中的相应属性。
            data: []
          },
          // 以下配置了图中白色标记圆点的显示
          {
            type: 'scatter', // 类型：散点
            coordinateSystem: 'geo', // 使用地理坐标系
            itemStyle: {
              color: {
                type: 'radial', // 径向渐变，前三个参数分别是圆心 x, y 和半径
                x: 0.5,
                y: 0.5,
                r: 0.5,
                colorStops: [
                  {
                    offset: 0.5,
                    color: '#fff' // 50% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'rgb(0 0 0 / 0%)' // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              },
              borderColor: '#fff', // 边框白色
              borderWidth: 1 // 边框宽度
            },
            symbolSize: 10, // 散点大小
            data: [],
            zlevel: 1
          }
        ]
      }
      myChart.setOption(option)
      myChart.getZr().on('click', params => {
        if (params.target) {
          //画布非空白区
          return;
        } else {
          //画布空白区 返回上一级
          let alladcode = require('@/assets/hunan/all_hunan.json')
          let regionGeoJson = this.getGeoJson(430000 + '_full.json');
          this.initMapChart(regionGeoJson, '湖南省', myChart, alladcode)
        }
      });
      // 解绑click事件
      myChart.off("click");
      //给地图添加监听事件
      myChart.on('click', params => {
        if (alladcode) {
          let clickRegion = alladcode.filter(areaJson => areaJson.name === params.name);
          let clickRegionCode;
          if (clickRegion) {
            clickRegionCode = clickRegion[0].adcode;
          } else {
            clickRegionCode = 430000;
          }
          let regionGeoJson = this.getGeoJson(clickRegionCode + '_full.json');
          this.$emit('setName', params.name)
          this.initMapChart(regionGeoJson, params.name, myChart, clickRegion[0].city)
        }
      })
      window.addEventListener('resize', function () {
        myChart.resize()
      })
    }
  },
  mounted() {
    this.initChart()
  }

完整代码如下

<template>
  <div className="center-cmp" id="centermap">
    <div className="map" ref="mapChart" style="width:100% /* 800/192 */;height:100% /* 498/192 */;"></div>
  </div>
</template>

<script>
export default {
  name: 'CenterCmp',
  components: {},
  data() {
    return {
    }
  },
  methods: {
    initChart: function () {
      const echarts = require('echarts')
      const el = this.$refs.mapChart
      const chart = echarts.init(el)
      let alladcode = require('@/assets/hunan/all_hunan.json')
      let chinaGeoJson = require('@/assets/hunan/430000_full.json')
      this.initMapChart(chinaGeoJson, '湖南省', chart, alladcode)
    },
    //获取地图json数据
    getGeoJson(jsonName) {
      return require('@/assets/hunan/' + jsonName)
    },
    initMapChart(geoJson, name, chart, alladcode) {
      const el = this.$refs.mapChart
      const echarts = require('echarts')
      const myChart = echarts.init(el)
      echarts.registerMap('geo', geoJson)

      const option = {
        // 数据映射
        visualMap: {
          show: true,
          type: 'piecewise', // 分段标签
          min: 0, // 最小值
          max: 50, // 最大值，不设置为无限大
          right: 30, // 距离右侧位置
          bottom: 30, // 距离底部位置
          orient: 'vertical', // 组件竖直放置
          align: 'left', // 色块在左
          textGap: 14, // 文字主体之间的距离
          itemSymbol: 'circle', // 右下角映射组件使用圆点形状
          seriesIndex: 0, // 指定取哪个系列的数据(series.data)，若不设置则会影响图上标点颜色设置。
          // 一以下是分段式视觉映射组件的每一段的范围
          // gt：大于、gte：大于等于、lt：小于、lte：小于等于。
          textStyle: {
            color: '#dc2222'//文字颜色
          },
          pieces: [
            {
              gt: 5,
              label: '5个以上',
              color: '#1492FF',//图元颜色
            },
            {
              gte: 2,
              lte: 5,
              label: '2-5个',
              color: '#59AAF5'
            },
            {
              gte: 0,
              lt: 2,
              label: '0-2个',
              color: '#99CBF9'
            }
          ]
          /*
          pieces或者inRange内设置颜色试验时都能生效，个人认为需要传入组件控制颜色时
          再选择用inRange，两个都存在并给予不同的颜色，显示以pieces为主。
          */
        },
        geo: {
          map: 'geo', // 上面引入的数据名
          show: true,
          roam: false, // 关闭拖拽
          label: {
            show: true,
            color: '#38eaff',
            fillOpacity: 0.3,
          },
          itemStyle: {
            areaColor: 'rgba(15,84,116,0.07)', // 地图区域的颜色(没有数据时会按照这个颜色显示)
            borderColor: '#38eaff', // 地图区域的边框
            borderWidth: 1
          },
          emphasis: { // 高亮的显示设置
            label: {
              color: '#feffff',
            },
            itemStyle: {
              areaColor: 'rgba(15,140,217,0.67)',
            }
          },
          select: { // 选中显示设置
            label: {
              color: '#feffff',
            },
            itemStyle: {
              areaColor: 'rgba(15,140,217,0.67)',
            }
          }
        },
        series: [
          // 配置数据的显示
          {
            type: 'map', // 类型map
            geoIndex: 0, // 指定geo属性后，series-map.map 属性，以及 series-map.itemStyle 等样式配置不再起作用，而是采用 geo 中的相应属性。
            data: []
          },
          // 以下配置了图中白色标记圆点的显示
          {
            type: 'scatter', // 类型：散点
            coordinateSystem: 'geo', // 使用地理坐标系
            itemStyle: {
              color: {
                type: 'radial', // 径向渐变，前三个参数分别是圆心 x, y 和半径
                x: 0.5,
                y: 0.5,
                r: 0.5,
                colorStops: [
                  {
                    offset: 0.5,
                    color: '#fff' // 50% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'rgb(0 0 0 / 0%)' // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              },
              borderColor: '#fff', // 边框白色
              borderWidth: 1 // 边框宽度
            },
            symbolSize: 10, // 散点大小
            data: [],
            zlevel: 1
          }
        ]
      }
      myChart.setOption(option)
      myChart.getZr().on('click', params => {
        if (params.target) {
          //画布非空白区
          return;
        } else {
          //画布空白区 返回上一级
          let alladcode = require('@/assets/hunan/all_hunan.json')
          let regionGeoJson = this.getGeoJson(430000 + '_full.json');
          this.initMapChart(regionGeoJson, '湖南省', myChart, alladcode)
        }
      });
      // 解绑click事件
      myChart.off("click");
      //给地图添加监听事件
      myChart.on('click', params => {
        if (alladcode) {
          let clickRegion = alladcode.filter(areaJson => areaJson.name === params.name);
          let clickRegionCode;
          if (clickRegion) {
            clickRegionCode = clickRegion[0].adcode;
          } else {
            clickRegionCode = 430000;
          }
          let regionGeoJson = this.getGeoJson(clickRegionCode + '_full.json');
          this.$emit('setName', params.name)
          this.initMapChart(regionGeoJson, params.name, myChart, clickRegion[0].city)
        }
      })
      window.addEventListener('resize', function () {
        myChart.resize()
      })
    }
  },
  mounted() {
    this.initChart()
  }
}
</script>

<style lang='less'>
#centermap{
  width: 100%;
  height: 85vh;
  //background: #8f7a7a;
  background: url('@/assets/bg.png');
}
.center-cmp {
  margin: 0px;
  padding: 0px;
  display: flex;
  flex-direction: column;
  .cc-header {
    height: .364583rem /* 70/192 */;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .15625rem /* 30/192 */;
  }

  .cc-details {
    height: .625rem /* 120/192 */;
    display: flex;
    justify-content: center;
    font-size: .166667rem /* 32/192 */;
    align-items: center;

    .card {
      background-color: rgba(4, 49, 128, .6);
      color: #08e5ff;
      height: .364583rem /* 70/192 */;
      width: .364583rem /* 70/192 */;
      font-size: .234375rem /* 45/192 */;
      font-weight: bold;
      line-height: .364583rem /* 70/192 */;
      text-align: center;
      margin: .052083rem /* 10/192 */;
    }
  }

  .cc-main-container {
    position: relative;
    flex: 1;
    display: flex;

    .ccmc-middle {
      width: 50%;
      height: 90%;

      .active-ring-name {
        font-size: .104167rem /* 20/192 */ !important;
      }
    }

    .ccmc-left, .ccmc-right {
      width: 25%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      font-size: .125rem /* 24/192 */;

      span {
        font-size: .208333rem /* 40/192 */;
        font-weight: bold;
      }

      .station-info {
        height: 80px;
        display: flex;
        align-items: center;
      }
    }

    .ccmc-left {
      align-items: flex-end;

      span {
        margin-left: .104167rem /* 20/192 */;
      }
    }

    .ccmc-right {
      align-items: flex-start;

      span {
        margin-right: .104167rem /* 20/192 */;
      }
    }
  }

  .label-tag {
    position: absolute;
    width: 2.604167rem /* 500/192 */;
    height: .15625rem /* 30/192 */;
    bottom: .052083rem /* 10/192 */;
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>