ECharts渲染地图后获取数据判断生成泡泡图示例

先安装echarts

npm install echarts --save

安装完后 引入 ECharts

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

import echarts from 'echarts'
Vue.prototype.$echarts = echarts
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

 标签注意做好，id没有写正确会报错

<template>
  <div>
    <div id="myChart" :style="{width: '2000px', height: '1000px'}"></div>
  </div>
</template>

再引入中国地图

 import '../../node_modules/echarts/map/js/china.js' // 引入中国地图数据

 热点泡泡图示例代码

export default {
        data() {
            return {}
        },
        mounted() {
            this.drawLine();
        },
        methods: {

            drawLine() {
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById('myChart'));
                // 绘制图表
                myChart.setOption({
                    backgroundColor: "#000000",
                    tooltip: {}, // 鼠标移到图里面的浮动提示框
                    title: {
                        text: "PM2.5",
                        subtext: "",
                        x: "center",
                        textStyle: {
                            color: "#fff"
                        },
                    },
                        dataRange: {
                            show: false,
                            min: 0,
                            max: 1000,
                            text: ['High', 'Low'],
                            realtime: true,
                            calculable: true,
                            color: ['orangered', 'yellow', 'lightskyblue']
                        },
                        geo: { // 这个是重点配置区
                            map: 'china', // 表示中国地图
                            roam: true,
                            label: {
                                normal: {
                                    show: false, // 是否显示对应地名
                                    textStyle: {
                                        color: 'rgba(255,255,255,0.8)'
                                    }
                                }
                            }
                        },
                    itemStyle: {
                        normal: {
                            areaColor: "#F4F5F7",
                            borderColor: "#111"
                        }
                    },
                    series: [
                        {
                            name: "人数",
                            type: "effectScatter",
                            scaling: 1.7,
                            //该系列使用的坐标系
                            coordinateSystem: "geo",
                            symbolSize: function(val) {
                                return val[2] / 10;
                            },
                            data: [
                                { name: "合肥", value: [117.29, 32.0581, 134] },
                                { name: "上海", value: [121.4648, 31.2891, 90] },
                                { name: "北京", value: [116.4551, 40.2539, 210] },
                                { name: "杭州", value: [119.5313, 29.8773, 30] },
                                { name: "乌鲁木齐", value: [87.9236, 43.5883, 230] },
                                { name: "长沙市", value: [113.0823, 28.2568, 21] },
                                { name: "广州", value: [113.5107, 23.2196, 90] },
                                { name: "南京", value: [118.8062, 31.9208, 55] },
                                { name: "成都", value: [103.9526, 30.7617, 33] },
                                { name: "武汉", value: [114.3896, 30.6628, 66] },
                                { name: "中山", value: [113.4229, 22.478, 21] }
                            ],
                                //配置何时显示特效'render' 绘制完成后显示特效。'emphasis' 高亮（hover）的时候显示特效。
                            showEffectOn: "render",
                                //目前只有ripple这一种
                            effectType: "ripple",
                                //涟漪特效相关配置。
                            rippleEffect: {
                                //动画的时间
                                period: 4,
                              //动画中波纹的最大缩放比例
                                scale: 4,
                              //波纹的绘制方式可选 'stroke' 和 'fill'
                                brushType: "stroke"
                            },
                            //Scatter才有这个属性,是否开启鼠标 hover 的提示动画效果
                            hoverAnimation: true
                        }
                    ]
                    });
            }
        }
    }