VUE 中实现echarts江苏气泡图

VUE 中实现echarts江苏气泡图

效果图：

安装Echarts依赖

要在vue中使用Echarts 需要先安装依赖

npm install echarts --save

这是我的Echarts版本(据了解低版本的echarts，默认并没有地图相关数据)

"echarts": "^4.0.4"

引入Echarts 以及 地图数据

import echarts from 'echarts'
import 'echarts/map/js/province/jiangsu'

地图数据在 根目录 node_modules > echarts > map 文件夹下

初始化Echarts

在 methods 中编写方法

  methods: {
            //加载中国飞线地图
            loadChinaLineMap() {
                var echarts = require('echarts');
                var myCharts = echarts.init(document.getElementById('ChinaLineMap'));
                let geoCoordMap = {
                    '苏州市': [120.585728, 31.2974],
                    '南通市': [120.894676, 31.981143],
                    '徐州市': [117.284124, 34.205768],
                    '常州市': [119.974061, 31.811226],
                    '无锡市': [120.31191, 31.491169],
                    '盐城市': [120.163107, 33.347708],
                    '连云港市': [119.221611, 34.596653],
                    '淮安市': [119.113185, 33.551052],
                    '南京市': [118.796682, 32.05957],
                    '镇江市': [119.425836, 32.187849],
                    '宿迁市': [118.275198, 33.963232],
                    '扬州市': [119.412939, 32.394209],
                    '泰州市': [119.922933, 32.455536]
                };.....................................................................................................................................................................................................

在 mounted 中调用

 mounted() {
            this.loadChinaLineMap()
},

完整页面代码

感谢阅读，欢迎订阅！！！更多echarts数据可视化图表请持续关注！！！