echarts vue中国地图封装

最新推荐文章于 2025-02-16 22:44:38 发布

原创最新推荐文章于 2025-02-16 22:44:38 发布 · 774 阅读

1 ·

CC 4.0 BY-SA版权

vue成长之路专栏收录该内容

28 篇文章

订阅专栏

本文介绍了一种使用ECharts和Vue实现中国地图数据可视化的封装方法，通过实例展示了如何配置地图样式、数据绑定及响应式更新。该封装允许用户轻松地在Vue项目中集成中国地图，并实时展示和更新数据。

效果

在这里插入图片描述

echarts vue中国地图封装

<template>
  <div class="echarts">
    <div :style="{height:'400px',width:'100%'}" ref="myEchart"></div>
  </div>
</template>
<script>
import echarts from 'echarts'
//   import '../../node_modules/echarts/map/js/world.js'
import '../../node_modules/echarts/map/js/china.js' // 引入中国地图数据
export default {
  name: 'echarts',
  props: ['userJson'],
  data () {
    return {
      chart: null
    }
  },
  // 实时监听父组件传过来的值，进而执行drawBar方法，重绘柱状图
  watch: {
    userJson: {
      handler (value) {
        this.chinaConfigure(value)
      },
      deep: true
    }
  },
  mounted () {
    this.chinaConfigure()
  },
  beforeDestroy () {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    chinaConfigure () {
      console.log(this.userJson)
      let myChart = echarts.init(this.$refs.myEchart) // 这里是为了获得容器所在位置
      window.onresize = myChart.resize
      myChart.setOption({ // 进行相关配置
        backgroundColor: '#ffffff',
        tooltip: {}, // 鼠标移到图里面的浮动提示框
        visualMap: {
          min: 0,
          max: 14,
          left: 'right',
          top: 'bottom',
          text: ['14', '0'],
          inRange: {
            color: ['#FAFAFA', '#8CAAF7']
          },
          show: true
        },
        geo: { // 这个是重点配置区
          map: 'china', // 表示中国地图
          roam: true,
          label: {
            normal: {
              show: true, // 是否显示对应地名
              textStyle: {
                color: 'rgba(0,0,0,0.4)'
              }
            }
          },
          itemStyle: {
            normal: {
              borderColor: 'rgba(0, 0, 0, 0.2)'
            },
            emphasis: {
              areaColor: '#A89DFE',
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 0,
              borderWidth: 0,
              shadowColor: null
            }
          }
        },
        series: [{
          type: 'scatter',
          coordinateSystem: 'geo' // 对应上方配置
        },
        {
          name: '用户数', // 浮动框的标题
          type: 'map',
          geoIndex: 0,
          data: this.formatterData(this.userJson)
        }
        ]
      })
    },
    formatterData (province) {
      const Allprovince = ['南海诸岛', '北京', '天津', '上海', '重庆', '河北', '河南', '云南', '辽宁', '黑龙江', '湖南', '安徽', '山东', '新疆', '江苏', '浙江', '江西', '湖北', '广西', '甘肃', '山西', '内蒙古', '陕西', '吉林', '福建', '贵州', '广东', '青海', '西藏', '四川', '宁夏', '海南', '台湾', '香港', '澳门']
      const newProvince = []
      Allprovince.forEach((item, index) => {
        newProvince.push({ value: 0, name: item })
        province.forEach(itemProvince => {
          if (itemProvince.name === item) {
            newProvince[index] = { value: itemProvince.value, name: item }
          }
        })
      })
      return newProvince
    }
  }
}
</script>

使用

<template>
      <div>
        <china-map :user-json="objectData" ></china-map>
      </div>
</template>
<script>
import ChinaMap from '@/components/chinaMap'

export default {
  components: {
    ChinaMap 
  },
   data ()  {
	   return {
	       objectData: [{value: 2, name: '上海'}, {value：3， name: '北京'}]
     }
</script>