vue安装依赖

npm install echarts -S

main.js中引用

import echarts from 'echarts'
Vue.prototype.$echarts = echarts
import china from 'echarts/map/json/china.json'
echarts.registerMap('china', china)

新建图表展示vue

<template>
  <div id="myChartChina" :style="{width: '100%', height: '500px'}"></div>
</template>

<script>
    export default {
      name: 'real-time-data',
      data: function() {
        return {
          name_title: '涪陵榨菜假货预警',
          subname: '红色为假货出现严重区域，黄色为预警区域，绿色为安全区域',
          nameColor: 'rgb(55, 75, 113)',
          name_fontFamily: '等线',
          subname_fontSize: 15,
          name_fontSize: 18,
          mapName: 'china',
          geoCoordMap: {},
          mapData: [{
            name: '北京',
            value: 177
          },
          {
            name: '天津',
            value: 42
          },
          {
            name: '河北',
            value: 102
          },
          {
            name: '山西',
            value: 81
          },
          {
            name: '内蒙古',
            value: 47
          },
          {
            name: '辽宁',
            value: 67
          },
          {
            name: '吉林',
            value: 82
          },
          {
            name: '黑龙江',
            value: 66
          },
          {
            name: '上海',
            value: 24
          },
          {
            name: '江苏',
            value: 92
          },
          {
            name: '浙江',
            value: 114
          },
          {
            name: '安徽',
            value: 109
          },
          {
            name: '福建',
            value: 116
          },
          {
            name: '江西',
            value: 91
          },
          {
            name: '山东',
            value: 119
          },
          {
            name: '河南',
            value: 137
          },
          {
            name: '湖北',
            value: 116
          },
          {
            name: '湖南',
            value: 114
          },
          {
            name: '重庆',
            value: 91
          },
          {
            name: '四川',
            value: 125
          },
          {
            name: '贵州',
            value: 62
          },
          {
            name: '云南',
            value: 83
          },
          {
            name: '西藏',
            value: 9
          },
          {
            name: '陕西',
            value: 80
          },
          {
            name: '甘肃',
            value: 56
          },
          {
            name: '青海',
            value: 10
          },
          {
            name: '宁夏',
            value: 18
          },
          {
            name: '新疆',
            value: 67
          },
          {
            name: '广东',
            value: 123
          },
          {
            name: '广西',
            value: 59
          },
          {
            name: '海南',
            value: 14
          }
          ]
        }
      },
      mounted() {
        this.getGeoCoordMap()
        this.drawLine()
      },
      methods: {
        getGeoCoordMap() {
          var that = this
          var mapFeatures = this.$echarts.getMap(this.mapName).geoJson.features
          mapFeatures.forEach(function(v) {
            // 地区名称
            var name = v.properties.name
            // 地区经纬度
            that.geoCoordMap[name] = v.properties.cp
          })
        },
        convertData(data) {
          var res = []
          for (var i = 0; i < data.length; i++) {
            var geoCoord = this.geoCoordMap[data[i].name]
            if (geoCoord) {
              res.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value)
              })
            }
          }
          return res
        },
        drawLine() {
          var that = this
          var myChartContainer = document.getElementById('myChartChina')
          var resizeMyChartContainer = function() {
            myChartContainer.style.width = (document.body.offsetWidth / 2) + 'px'
          }
          resizeMyChartContainer()
          var myChartChina = that.$echarts.init(myChartContainer)

          // 绘制图表
          var optionMap = {
            title: {
              text: that.name_title,
              subtext: that.subname,
              x: 'center',
              textStyle: {
                color: that.nameColor,
                fontFamily: that.name_fontFamily,
                fontSize: that.name_fontSize
              },
              subtextStyle: {
                fontSize: that.subname_fontSize,
                fontFamily: that.name_fontFamily
              }
            },
            tooltip: {

            },
            visualMap: {
              show: false,
              min: 0,
              max: 200,
              left: 'left',
              top: 'bottom',
              text: ['高', '低'], // 文本，默认为数值文本
              calculable: true,
              seriesIndex: [1],
              inRange: {
                color: ['#00b7f1'] // 浅蓝
              }
            },
            geo: {
              show: true,
              map: this.mapName,
              label: {
                normal: {
                  show: false
                },
                emphasis: {
                  show: false
                }
              },
              roam: false,
              itemStyle: {
                normal: {
                  areaColor: '#031525',
                  borderColor: '#3B5077'
                },
                emphasis: {
                  areaColor: '#2B91B7'
                }
              }
            },
            series: [{
              name: '普通',
              type: 'scatter',
              coordinateSystem: 'geo',
              data: that.convertData(that.mapData),
              symbolSize: function(val) {
                return val[2] / 10
              },
              label: {
                normal: {
                  formatter: '{b}',
                  position: 'right',
                  show: true
                },
                emphasis: {
                  show: true
                }
              },
              itemStyle: {
                normal: {
                  color: '#00ff00'
                }
              }
            },
            {
              type: 'map',
              map: that.mapName,
              geoIndex: 0,
              aspectScale: 0.75, // 长宽比
              showLegendSymbol: false, // 存在legend时显示
              label: {
                normal: {
                  show: true
                },
                emphasis: {
                  show: false,
                  textStyle: {
                    color: '#fff'
                  }
                }
              },
              roam: false,
              itemStyle: {
                normal: {
                  areaColor: '#031525',
                  borderColor: '#3B5077'
                },
                emphasis: {
                  areaColor: '#2B91B7'
                }
              },
              animation: false,
              data: that.mapData
            },
            {
              name: '假货灾区',
              type: 'effectScatter',
              coordinateSystem: 'geo',
              data: that.convertData(that.mapData.sort(function(a, b) {
                return b.value - a.value
              }).slice(0, 5)),
              symbolSize: function(val) {
                return val[2] / 10
              },
              showEffectOn: 'render',
              rippleEffect: {
                brushType: 'stroke'
              },
              hoverAnimation: true,
              label: {
                normal: {
                  formatter: '{b}',
                  position: 'right',
                  show: true
                }
              },
              itemStyle: {
                normal: {
                  color: 'red',
                  shadowBlur: 10,
                  shadowColor: 'red'
                }
              },
              zlevel: 1
            },
            {
              name: '假货预警',
              type: 'effectScatter',
              coordinateSystem: 'geo',
              data: that.convertData(that.mapData.sort(function(a, b) {
                return b.value - a.value
              }).slice(5, 10)),
              symbolSize: function(val) {
                return val[2] / 20
              },
              showEffectOn: 'render',
              rippleEffect: {
                brushType: 'stroke'
              },
              hoverAnimation: true,
              label: {
                normal: {
                  formatter: '{b}',
                  position: 'right',
                  show: true
                }
              },
              itemStyle: {
                normal: {
                  color: 'yellow',
                  shadowBlur: 10,
                  shadowColor: 'yellow'
                }
              },
              zlevel: 1
            }
            ]
          }

          myChartChina.setOption(optionMap)
          window.onresize = function() {
            resizeMyChartContainer()
            myChartChina.resize()
          }
        }
      }
    }
</script>

<style scoped>

</style>