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();}

完整页面代码

<template><div class="min-body"><div class="header"><p class="til">中国飞线地图</p><div class="time-box">{{time}}</div></div><div id="ChinaLineMap"></div></div>
</template><script>import 'echarts/map/js/china'   //引入中国地图//import 'echarts/map/js/province/jiangsu.js';//引入江苏地图//import * as api from '@/api/admin.js';export default {name: "chinaLineMap",data: function () {return {time:''}},created() {this.loadTime()},mounted() {this.loadChinaLineMap()},methods: {//加载时间loadTime(){var that = this//var week = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];setInterval(function () {that.updateTime()}, 1000);that.updateTime()},updateTime(){var that = thisvar cd = new Date();var  time = that.zeroPadding(cd.getHours(), 2) + ':' + that.zeroPadding(cd.getMinutes(), 2) + ':' + that.zeroPadding(cd.getSeconds(), 2);var date = that.zeroPadding(cd.getFullYear(), 4) + '年' + that.zeroPadding(cd.getMonth()+1, 2) + '月' + that.zeroPadding(cd.getDate(), 2) + '日 ';that.time =  date+" "+time},zeroPadding(num, digit) {var zero = '';for(var i = 0; i < digit; i++) {zero += '0';}return (zero + num).slice(-digit);},//加载中国飞线地图loadChinaLineMap() {var newarray = [];var echarts = require('echarts');var myCharts = echarts.init(document.getElementById('ChinaLineMap'));var geoCoordMap = {'黑龙江': [127.9688, 45.368],'内蒙古': [110.3467, 41.4899],"吉林": [125.8154, 44.2584],'北京': [116.4551, 40.2539],"辽宁": [123.1238, 42.1216],"河北": [114.4995, 38.1006],"天津": [117.4219, 39.4189],"山西": [112.3352, 37.9413],"陕西": [109.1162, 34.2004],"甘肃": [103.5901, 36.3043],"宁夏": [106.3586, 38.1775],"青海": [101.4038, 36.8207],"新疆": [87.9236, 43.5883],"西藏": [91.11, 29.97],"四川": [103.9526, 30.7617],"重庆": [108.384366, 30.439702],"山东": [117.1582, 36.8701],"河南": [113.4668, 34.6234],"江苏": [118.8062, 31.9208],"安徽": [117.29, 32.0581],"湖北": [114.3896, 30.6628],"浙江": [119.5313, 29.8773],"福建": [119.4543, 25.9222],"江西": [116.0046, 28.6633],"湖南": [113.0823, 28.2568],"贵州": [106.6992, 26.7682],"云南": [102.9199, 25.4663],"广东": [113.12244, 23.009505],"广西": [108.479, 23.1152],"海南": [110.3893, 19.8516],'上海': [121.4648, 31.2891],'台湾': [124.3430, 25.5630],};var geoCoordColor = [{name:'黑龙江',value: 1},{name:'内蒙古',value: 2},{name:"吉林",value: 3},{name:'北京',value: 4},{name:"辽宁",value: 5},{name:"河北",value: 6},{name:"天津",value: 7},{name:"山西",value: 8},{name:"陕西",value:9},{name:"甘肃",value: 10},{name:"宁夏",value: 11},{name:"青海",value: 12},{name:"新疆",value: 13},{name:"西藏",value: 14},{name:"四川",value: 15},{name:"重庆",value: 16},{name:"山东",value: 17},{name:"河南",value: 18},{name:"江苏",value: 19},{name:"安徽",value: 20},{name:"湖北",value: 21},{name:"浙江",value: 22},{name:"福建",value: 23},{name:"江西",value: 24},{name:"湖南",value: 25},{name:"贵州",value: 26},{name:"云南",value: 27},{name:"广东",value: 28},{name:"广西",value: 29},{name:"海南",value: 30},{name:'上海',value: 31},{name:'台湾',value: 31}];var convertData = function (data) {var res = [];for (var i = 0; i < data.length; i++) {var dataItem = data[i];var fromCoord = geoCoordMap[dataItem[0].name];var toCoord = geoCoordMap[dataItem[1].name];if (fromCoord && toCoord) {res.push({fromName: dataItem[0].name,toName: dataItem[1].name,coords: [fromCoord, toCoord]});}}return res;};//飞线数据var chinaData = [//[{name: '上海'}, {name: '江苏'}],//[{name: '北京'}, {name: '江苏'}],//[{name: '新疆'}, {name: '江苏'}],//[{name: '西藏'}, {name: '江苏'}]];//获取飞线数据var res = [{"name": "安徽","value": 6114},{"name": "浙江","value": 4341},{"name": "上海","value": 3600},{"name": "四川","value": 2980},{"name": "河南","value": 2504},{"name": "山东","value": 1590},{"name": "湖南","value": 1163},{"name": "江西","value": 1108},{"name": "广东","value": 1100},{"name": "重庆","value": 838},{"name": "河北","value": 534},{"name": "北京","value": 473}]res.forEach(function (item) {newarray.push(item.value);var array = [];var o = {};var o1 = {};o.name = item.name;o1.name = '江苏';o.value = item.value;array.push(o);array.push(o1);chinaData.push(array);});var series = [];[['江苏', chinaData]].forEach(function (item) {console.log(item[1]);series.push({name: item[2],type: 'lines',zlevel: 2,effect: {show: true,period: 4, //箭头指向速度，值越小速度越快trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重symbol: 'arrow', //箭头图标symbolSize: 3, //图标大小},lineStyle: {normal: {color: '#FCE931',width: 0.1, //尾迹线条宽度opacity: 0.5, //尾迹线条透明度curveness: .3 //尾迹线条曲直度}},data: convertData(item[1])},{//       name: item[1],type: 'effectScatter',coordinateSystem: 'geo',zlevel:3,rippleEffect: {brushType: 'stroke'},symbolSize: function (val) {console.log(val);//return 3 + val[2] / 10;return 20},itemStyle: {normal: {color: '#FCE931'}},data: item[1].map(function (dataItem) {return {name: dataItem[0].name,value: geoCoordMap[dataItem[0].name].concat(33)};})},{name: '中国',type: 'map',zlevel:0,mapType: 'china',zoom: 1.2,selectedMode: 'single',itemStyle: {normal: {label: {color: "#fff",show: true},borderWidth: .5,borderColor: '#009fe0',areaColor:'#009fe0',},emphasis: {borderWidth: .5,borderColor: '#00f4ff',shadowColor: '#FCE931',shadowBlur: 10,areaColor: '#ffa800'}},data: geoCoordColor.map(function (dataItem) {return {name: dataItem.name,value: geoCoordMap[dataItem.name].concat([dataItem.value])};})})});var option = {background: "none",// tooltip: {//     trigger: 'item',//     formatter: function (params) {//         //console.log(params);//         if (params.componentSubType == "map") {//             if (params.data) {//                 return params.name + ' : ' + params.data.value;//             }//             return params.name + ' : 0';//         }//     }// },// visualMap: {//     //图例值控制//     type: 'piecewise',//     min: 0,//     max: "",//     // pieces: [//     //     {gt: 1, lt: 99},//     //     {gt: 100, lt: 499},//     //     {gt: 500, lt: 999},//     //     {gt: 1000, lt: 9999},//     //     {gt:10000}//     // ],//     realtime: false,//     calculable: false,//     splitNumber: 5,//     show: true,//     textStyle: {//         color: '#fff'//     },//     inRange: {//         //color: ['#105d98', '#185685', '#174279', '#003f69', '#0d3856']//         color: ['#105D98', '#DD5145', '#105D98', '#105D98', '#105D98']//     },//     // formatter: function (value) {//     //     console.log(value);//     //     return covertColor(value); // 范围标签显示内容。//     // }//     formatter: function (value, value2) {////         var num = 0;//         var num2 = 0;//         //console.log(isNaN(value));//         if (value != -Infinity && isNaN(value) == false) {//             num = value;//         }////         if (isNaN(value2) == false) {//             num2 = value2;//         }//         return parseInt(num) + '-' + parseInt(num2) + '人'; // 范围标签显示内容。//     }//// },visualMap: {type:'piecewise',min: 0,max: 33,realtime: false,calculable: true,splitNumber:21,show:false,inRange: {color:['#C40000', '#F03566', '#9B4E9A', '#105D98', '#EB7A20']}},selectedMode: 'multiple',geo: {map: 'china',label: {emphasis: {show: false}},zoom: 1.2,roam: false,itemStyle: {normal: {borderColor: '#3b56b5',borderWidth: 2,areaColor: 'rgba(0,0,0,0)',shadowColor: '#2485af',shadowBlur: 20},emphasis: {areaColor: 'green'}}},series: series};//var max = Math.max.apply(Math, newarray);//option.visualMap.max = max;myCharts.clear();myCharts.setOption(option);}}}
</script><style lang="scss" scoped>#ChinaLineMap{width: 100%;height:calc(100% - 7vh);}.min-body {width: 100%;height: 100%;overflow: hidden;background: #010827;.header {position: relative;height: 6vh;background-color: #cccccc33;background: url("~@/assets/img/top-bg.png") no-repeat;background-size: 100% 100%;user-select: none;.til {width: 100%;font-size: 2.2vw;font-weight: bold;text-align: center;line-height: 6vh;letter-spacing: 0.3vw;color: #fff;margin: 0;}.til:before {content: '';display: inline-block;width: 5vh;height: 5vh;margin-right: 1vw;vertical-align: middle;}.time-box{font-size: 1.3vw;letter-spacing: 0.2vw;color: #00FFFF;font-weight: normal;position: absolute;top: 2.2vh;right: 1vw;z-index: 100;}}}</style>

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

VUE 中实现echarts中国地图人口迁徙相关推荐

vue中展示echarts中国地图
在vue项目中展示中国地图可以使用echarts库,根据配置数据区分不同颜色展示地图等功能. 先看效果一.安装Echarts npm install echarts@4.9.0 --save 我这里 ...
vue中使用echarts中国地图
一效果图二上代码封装的完整的地图组件,里面注释了很多就不解释了 <template><div class="mapContent"><div r ...
在Vue中使用eCharts的地图图表，及生成自定义地图数据（乡镇级）
如何在Vue中使用eCharts的地图图表,及如何生成自定义地图数据(乡镇级) 文章目录一.在Vue使用ECharts地图功能二.生成地图数据 1.安装Bigemap 程序 2.生成需要的各乡镇地 ...
vue中使用echarts实现地图颜色渐变及自定义浮窗内容
在这篇文章里vue中使用echarts自定义浮窗内容及样式_芝士焗红薯的博客-CSDN博客,总结了echarts的一些简单用法.这篇文章,一个是在原来的自定义浮窗内容上实现了地图的颜色渐变,一个是简化 ...
VUE中使用Echarts绘制地图迁移
踩坑说明很久以前写jsp时使用过echarts的china.js插件,不过echarts是2.0的,目前vue项目中使用echarts3.8.5,直接将china.js插件引入,代码复制,运行一看, ...
react中引入echarts中国地图
1.首先写一个容器div去装地图注意设置div的长和高!! <div className="map" style={{width:"500px";hei ...
Angular项目中使用echarts中国地图
首先要在Angular项目中安装echarts的依赖: npm install echarts --save npm install ngx-echarts --save 第二.在创建包含地图的Ang ...
Vue中使用echarts绘制地图，以及只显示南海问题
下载echarts依赖下载依赖我想大家都会:cnpm / npm install echartsyar add echarts typescript项目 npm install @types/ech ...
vue中引用echarts全国地图
<template><div><div ref="mapInfo" style="width:750px; height: 540px&qu ...

VUE 中实现echarts中国地图人口迁徙

安装Echarts依赖

引入Echarts 以及地图数据

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

初始化Echarts

VUE 中实现echarts中国地图人口迁徙相关推荐

最新文章

热门文章

VUE 中实现echarts中国地图 人口迁徙

安装Echarts依赖

引入Echarts 以及 地图数据

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

初始化Echarts

VUE 中实现echarts中国地图 人口迁徙相关推荐

最新文章

热门文章

VUE 中实现echarts中国地图人口迁徙

引入Echarts 以及地图数据

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

VUE 中实现echarts中国地图人口迁徙相关推荐