vue中Echarts之省市地图（北京市）展示相关数据

1. 下载ECharts 插件

npm i echarts --save

2. 引入省市地图

import echarts from 'echarts'

Vue.prototype.echarts = echarts

import '../node_modules/echarts/map/js/province/beijing.js'  // 引入北京地图数据

3. 模块中布局

<template>

 <div class='container'>

  <div class='mychart' id='mychart'></div>

</div>

</template>

4. 在组件JS中定义方法

<script>
export default {
  data () {
    return {}
  },
  mounted () {
    this.myChart()
  },
  methods: {
    myChart () {
      // 基于准备好的dom，初始化echarts实例
      let mychart = this.echarts.init(document.getElementById('mychart'))
      // 监听屏幕变化自动缩放图表
      window.addEventListener('resize', function () {
        mychart.resize()
      })
      // 绘制图表
      mychart.setOption({
        // 图表主标题
        title: {
          // 文本
          text: '北京',
          // 值: 'top', 'middle', 'bottom' 也可以是具体的值或者百分比
          top: 25, 
          // 值: 'left', 'center', 'right' 同上
          left: 'center',
          // 文本样式
          textStyle: {
            // 字体大小
            fontSize: 25,
            // 字体粗细
            fontWeight: 650,
            // 字体颜色
            color: '#fff'
          }
        },
        // 提示框组件
        tooltip: {
          // 触发类型, 数据项图形触发
          trigger: 'item', 
          // 使用函数模板，传入的数据值 ——> value: number | Array
          formatter: function (val) {
            return val.data.name + '<br>人口数量: ' + val.data.value + '万'
          }
        },
        // 视觉映射组件
        visualMap: {
          // continuous 类型为连续型
          type: 'continuous', 
          show: true, // 是否显示 visualMap-continuous 组件 如果设置为 false，不会显示，但是数据映射的功能还存在
          // 指定 visualMapContinuous 组件的允许的最小/大值 min/max 必须用户指定
          min: 0,  
          // min,max 形成了视觉映射的定义域
          max: 400, 
          // 文本样式
          textStyle: {
            // 字体大小
            fontSize: 15,
            // 字体颜色
            color: '#fff'
          },
          // 拖拽时，是否实时更新
          realtime: false, 
          // 是否显示拖拽用的手柄
          calculable: true, 
          // 定义在选中范围中的视觉元素
          inRange: {
            // 图元的颜色
            color: ['#9fb5ea', '#e6ac53', '#74e2ca', '#85daef', '#9feaa5', '#5475f5'] 
          }
        },
        series: [
          {
              // 类型
            type: 'map', 
            // 系列名称，用于tooltip的显示，legend 的图例筛选 在 setOption 更新数据和配置项时用于指定对应的系列
            map: '北京',
            // 地图类型
            mapType: 'province',
            // 是否开启鼠标缩放和平移漫游 默认不开启 
            // 如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move' 设置成 true 为都开启
            roam: false,
            // 定位 值: 'top', 'middle', 'bottom' 也可以是具体的值或者百分比
            top: 70, 
            // 图形上的文本标签
            label: {
              show: false // 是否显示对应地名
            },
            // 地图区域的多边形 图形样式
            itemStyle: {
                 // 地图区域的颜色 如果设置了visualMap, 这个属性将不起作用
              areaColor: '#7B68EE', 
              // 描边线宽 为 0 时无描边
              borderWidth: 0.5, 
              // 图形的描边颜色 支持的颜色格式同 color
              borderColor: '#000', 
              // 描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'
              borderType: 'solid' 
            },
            // 高亮状态
            emphasis: {
              // 文本标签
              label: {
                // 是否显示标签
                show: true, 
                // 文字的颜色 如果设置为 'auto'，则为视觉映射得到的颜色，如系列色
                color: '#fff'
              },
              // 图形样式
              itemStyle: {
                // 地图区域的颜色
                areaColor: '#FF6347' 
              }
            },
            // 地图系列中的数据内容数组，数组项可以为单个数值
            data: [
              { name: '怀柔区', value: 38.4, lng: 116.63853, lat: 40.322563 },
              { name: '密云区', value: 47.9, lng: 116.849551, lat: 40.382999 },
              { name: '昌平区', value: 196.3, lng: 116.237832, lat: 40.226854 },
              { name: '顺义区', value: 102, lng: 116.663242, lat: 40.1362 },
              { name: '平谷区', value: 42.3, lng: 117.128025, lat: 40.147115 },
              { name: '门头沟区', value: 30.8, lng: 116.108179, lat: 39.94648 },
              { name: '海淀区', value: 369.4, lng: 116.304872, lat: 39.96553 },
              { name: '石景山区', value: 65.2, lng: 116.229612, lat: 39.912017 },
              { name: '西城区', value: 129.8, lng: 116.372397, lat: 39.918561 },
              { name: '东城区', value: 90.5, lng: 116.42272, lat: 39.934579 },
              { name: '朝阳区', value: 395.5, lng: 116.449767, lat: 39.927254 },
              { name: '大兴区', value: 156.2, lng: 116.348053, lat: 39.732833 },
              { name: '房山区', value: 104.6, lng: 116.149892, lat: 39.755039 },
              { name: '丰台区', value: 232.4, lng: 116.293105, lat: 39.865042 }
            ]
          }
        ]
      })
      // 定时显示提示框和高亮效果
      let index = -1
      setInterval(function () {
        // 隐藏提示框
        mychart.dispatchAction({
          type: 'hideTip',
          seriesIndex: 0,
          dataIndex: index
        })
        // 显示提示框
        mychart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: index + 1
        })
        // 取消高亮指定的数据图形
        mychart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: index
        })
        // 高亮指定的数据图形
        mychart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: index + 1
        })
        index++
        if (index > cityArr.length - 1) {
          index = -1
        }
      }, 2000)
    }
  }
}
</script>