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/china'   //引入中国地图

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

初始化Echarts

在 methods 中编写方法

loadChinaLineMap(){
    var myChart=echarts.init(this.$refs.map);
    myChart.setOption(option, true);
}

在 mounted 中调用

  mounted() {
      this.loadChinaLineMap();
  }

完整页面代码
 

 

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