vue echarts 世界地图,vue实现echarts动态数据

　　这篇文章主要介绍了vue echarts实现中国地图流动效果（步骤详解),本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

　　@vue echarts实现中国地图流动效果

　　#话不多说看效果图

　　操作步骤：

　　执行命令:国家预防机制运行echarts -s并回车

　　看到这样的提示代表安装成功PS：网络不好的情况建议用cnpm淘宝镜像（全局终端执行命令：npm i -g cnpm --registry=https://registry.npm.taobao.org）

　　下载china.js

　　链接：https://pan . Baidu . com/s/1 EOD VH 9 tjnebbfebbrhkyd _ Q提取码：gjz4

　　引入

　　从"电子海图/图书馆/电子海图"导入电子海图；

　　导入@/地图/中国。js’；

　　写一个展示容器绑定裁判员

　　div class=wrapper

　　div class= map-container style= width:100%；高度：100% ref=myEchart /div

　　/div

　　配置选项(有必要的注释都已标记)

　　脚本

　　设e图=require( e图)；

　　导入”电子图表/库/组件/标记线”；

　　已安装(){

　　let data=[

　　{ 姓名: 北京， dataCount: [0，1，0，0，0，1]， id: 247 }，{

　　姓名: 天津，

　　dataCount: [0，0，0，0，0，0，0，

　　id: 248

　　},{ 姓名: 河北， dataCount: [0，0，0，0，0，0]， id: 249 }，{

　　姓名: 山西，

　　dataCount: [0，0，0，0，0，0，0，

　　id: 250

　　},{ 姓名: 内蒙古， dataCount: [0，0，0，0，0，0]， id: 251 }，{

　　姓名: 辽宁，

　　dataCount: [0，0，0，0，0，0，0，

　　id: 252

　　},{ 姓名: 吉林， dataCount: [0，0，0，0，0，0]， id: 253 }，{

　　姓名: 黑龙江，

　　dataCount: [0，0，0，0，0，0，0，

　　id: 254

　　},{ 姓名: 上海， dataCount: [0，1，0，0，0，0]， id: 255 }，{

　　姓名: 江苏，

　　dataCount: [0，0，0，0，0，0，0，

　　id: 256

　　},{ 姓名: 浙江， dataCount: [0，1，0，0，0，0]， id: 257 }，{

　　姓名: 安徽，

　　dataCount: [0，0，0，0，0，0，0，

　　id: 258

　　},{ 姓名: 福建， dataCount: [0，0，0，0，0，0]， id: 259 }，{

　　姓名: 江西，

　　dataCount: [0，0，0，0，0，0，0，

　　id: 260

　　},{ 姓名: 山东， dataCount: [14235，820，0，35，0，0，4]， id: 261 }，{

　　姓名: 河南，

　　dataCount: [0，0，0，0，0，0，0，

　　id: 262

　　},{ 姓名: 湖北， dataCount: [0，0，0，0，0，0]， id: 263 }，{

　　姓名: 湖南，

　　dataCount: [0，0，0，0，0，0，0，

　　id: 264

　　},{ 姓名: 广东， dataCount: [0，0，0，0，0，0]， id: 265 }，{

　　姓名: 广西，

　　dataCount: [0，0，0，0，0，0，0，

　　id: 266

　　},{ 姓名: 海南， dataCount: [0，0，0，0，0，0]， id: 267 }，{

　　姓名: 重庆，

　　dataCount: [0，0，0，0，0，0，0，

　　id: 268

　　},{ 姓名: 四川， dataCount: [0，0，0，0，0，0]， id: 269 }，{

　　姓名: 贵州，

　　dataCount: [0，0，0，0，0，0，0，

　　id: 270

　　},{ 姓名: 云南， dataCount: [0，0，0，0，0，0]， id: 271 }，{

　　姓名: 西藏，

　　dataCount: [0，0，0，0，0，0，0，

　　id: 272

　　},{ 姓名: 陕西， dataCount: [0，0，0，0，0，0]， id: 273 }，{

　　姓名: 甘肃，

　　dataCount: [0，0，0，0，0，0，0，

　　id: 274

　　},{ 姓名: 青海， dataCount: [0，0，0，0，0，0]， id: 275 }，{

　　姓名: 宁夏，

　　dataCount: [0，0，0，0，0，0，0，

　　id: 276

　　},{ 姓名: 新疆， dataCount: [0，0，0，0，0，0]， id: 277 }，{

　　姓名: 台湾，

　　dataCount: [0，0，0，0，0，0，0，

　　id: 278

　　},{ 姓名: 香港， dataCount: [0，0，0，0，0，0]， id: 279 }，{

　　姓名: 澳门，

　　dataCount: [0，0，0，0，0，0，0，

　　id: 280

　　}]

　　let chinaGeoCoordMap={

　　黑龙江: [127.9688, 45.368,1],

　　内蒙古: [110.3467, 41.4899,1],

　　吉林: [125.8154, 44.2584,1],

　　北京: [116.4551, 40.2539,2],

　　辽宁: [123.1238, 42.1216,1],

　　河北: [114.4995, 38.1006,1],

　　天津: [117.4219, 39.4189,1],

　　山西: [112.3352, 37.9413,1],

　　陕西: [109.1162, 34.2004,1],

　　甘肃: [103.5901, 36.3043,1],

　　宁夏: [106.3586, 38.1775,1],

　　青海: [101.4038, 36.8207,1],

　　新疆: [87.9236, 43.5883,1],

　　西藏: [91.11, 29.97,1],

　　四川: [103.9526, 30.7617,1],

　　重庆: [108.384366, 30.439702,1],

　　山东: [117.1582, 36.8701,1],

　　河南: [113.4668, 34.6234,1],

　　江苏: [118.8062, 31.9208,1],

　　安徽: [117.29, 32.0581,1],

　　湖北: [114.3896, 30.6628,1],

　　浙江: [119.5313, 29.8773,1],

　　福建: [119.4543, 25.9222,1],

　　江西: [116.0046, 28.6633,1],

　　湖南: [113.0823, 28.2568,1],

　　贵州: [106.6992, 26.7682,1],

　　云南: [102.9199, 25.4663,1],

　　广东: [113.12244, 23.009505,1],

　　广西: [108.479, 23.1152,1],

　　海南: [110.3893, 19.8516,1],

　　上海: [121.4648, 31.2891,1],

　　台湾: [120.991676054688, 24.7801149726563,1],

　　澳门: [113.33, 22.11,1],

　　香港: [114.15, 22.15,1]

　　}

　　对于(设I=0；伊达。长度；i ){

　　var da=chinaGeoCoordMap[data[i].姓名];

　　chinaGeoCoordMap[data[i].name]=[.达，数据[我].数据计数]；

　　}

　　let chinaDatas=[

　　[{

　　名称： 北京，

　　值：2

　　}], [{

　　名称： 黑龙江，

　　值：1

　　}], [{

　　名称： 内蒙古，

　　值：1

　　}], [{

　　名称： 吉林，

　　值：1

　　}], [{

　　名称： 辽宁，

　　值：1

　　}], [{

　　名称： 河北，

　　值：1

　　}], [{

　　名称： 天津，

　　值：1

　　}], [{

　　名称： 山西，

　　值：1

　　}], [{

　　名称： 陕西，

　　值：1

　　}], [{

　　名称： 甘肃，

　　值：1

　　}], [{

　　名称： 宁夏，

　　值：1

　　}], [{

　　名称： 青海，

　　值：1

　　}], [{

　　名称： 新疆，

　　值：1

　　}], [{

　　名称： 西藏，

　　值：1

　　}], [{

　　名称： 四川，

　　值：1

　　}], [{

　　名称： 重庆，

　　值：1

　　}], [{

　　名称： 山东，

　　值：1

　　}], [{

　　名称： 河南，

　　值：1

　　}], [{

　　名称： 江苏，

　　值：1

　　}], [{

　　名称： 安徽，

　　值：1

　　}], [{

　　名称： 湖北，

　　值：1

　　}], [{

　　名称： 浙江，

　　值：1

　　}], [{

　　名称： 福建，

　　值：1

　　}], [{

　　名称： 江西，

　　值：1

　　}], [{

　　名称： 湖南，

　　值：1

　　}], [{

　　名称： 贵州，

　　值：1

　　}], [{

　　名称： 广东，

　　值：1

　　}], [{

　　名称： 广西，

　　值：1

　　}], [{

　　名称： 云南，

　　值：1

　　}], [{

　　名称： 海南，

　　值：1

　　}], [{

　　名称： 上海，

　　值：1

　　}], [{

　　名称： 台湾，

　　值：1

　　}], [{

　　名称： 澳门，

　　值：1

　　}], [{

　　名称： 香港，

　　值：1

　　}]

　　]

　　let convertData=function (data) {

　　var RES=[]；

　　for(var I=0；我数据长度；i ) {

　　var dataItem=data[I]；

　　var from coord=[China geo coordmap[dataItem[0].name][0]，chinaGeoCoordMap[dataItem[0].name][1]]；

　　var to code=[117.1582，36.8701]；

　　if(从坐标到代码){

　　res.push([{

　　coord: fromCoord，

　　值：数据项[0].价值

　　}, {

　　坐标：要编码，

　　}]);

　　}

　　}

　　返回表示留数

　　};

　　let seriesA=[]

　　seriesA.push(

　　{

　　类型："行",

　　zlevel: 1，

　　效果：{

　　秀：真的，

　　周期：4,//箭头指向速度，值越小速度越快

　　t长度：0.3,//特效尾迹长度[0,1]值越大，尾迹越长重

　　符号： pin ，//箭头图标

　　symbolSize: 8，//图标大小

　　颜色： #2a6fd9

　　},

　　线型：{

　　正常：{

　　颜色： #003262 ,

　　宽度：1,//尾迹线条宽度

　　不透明度：9,//尾迹线条透明度

　　弯曲度：3 //尾迹线条曲直度

　　}

　　},

　　数据：convertData(中国数据)

　　},

　　{

　　类型： effectScatter ，

　　坐标系统："地理",

　　zlevel: 2，

　　rippleEffect: { //涟漪特效

　　周期：2,//动画时间，值越小速度越快

　　brushType: fill ，//波纹绘制方式描边，填充

　　比例尺：6,//波纹圆环最大限制，值越大波纹越大

　　颜色： #003262 //涟漪的颜色，默认为散点的颜色。

　　},

　　标签:{

　　正常：{

　　秀：真的，

　　颜色： #283c64 ，

　　位置："顶部",//显示位置

　　偏移量：[0,0],//偏移设置

　　格式化程序：函数(params) { //圆环显示文字

　　返回params.data.name

　　},

　　字体大小：13

　　},

　　重点：{

　　显示：假

　　}

　　},

　　符号："圆形",

　　symbolSize: function (val) {

　　return 1 val[2] * 5 //圆环大小

　　},

　　项目样式：{

　　颜色： #2a6fd9 ，

　　暗影模糊：4,

　　阴影颜色： #2a6fd9 ，

　　},

　　数据：中国数据。映射(函数(数据项){

　　返回{

　　名称：数据项[0].姓名，

　　值：chinaGeoCoordMap[dataItem[0].姓名],

　　项目样式：{

　　颜色： #2a6fd9 ，

　　暗影模糊：4,

　　阴影颜色： #2a6fd9 ，

　　}

　　}

　　})

　　},

　　//被攻击点

　　{

　　类型："散点图",

　　坐标系统："地理",

　　zlevel: 2，

　　标签:{

　　正常：{

　　秀：假的，

　　位置："右侧",

　　颜色：红色，

　　格式化程序：" {b} "，

　　textStyle: {

　　颜色：红色

　　}

　　},

　　重点：{

　　秀：真的，

　　颜色：红色

　　}

　　},

　　符号： pin ，

　　symbolSize: 0

　　数据：[{

　　名称： 山东，

　　值：chinaGeoCoordMap[山东].concat([10])，

　　}],

　　}

　　);

　　let option={

　　工具提示：{

　　秀：真的，

　　触发器："项目",

　　backgroundColor: #2e65fd ，

　　边框颜色： #FFFFCC ，

　　showDelay: 0，

　　隐藏延迟：0,

　　可输入：真，

　　过渡持续时间：0,

　　extraCssText: z索引：100 ,

　　格式化程序：函数（参数、票证、回调){

　　console.log(参数)

　　//根据业务自己拓展要显示的内容

　　var res=

　　var name=params.name

　　变量值1=参数。值[参数。系列索引3] 0

　　变量值2=参数。值[参数。系列索引4] 0

　　变量值3=参数。值[参数。系列索引5] 0

　　变量值4=参数。值[参数。系列索引6] 0

　　变量值5=参数。值[参数。系列索引7] 0

　　变量值6=参数。值[参数。系列索引8] 0

　　变量值7=参数。值[参数。系列索引9] 0

　　RES= span style= color:# fff name /span

　　br/

　　图标图标-学生/i学生：值一

　　br/

　　I class= icon icon-Lao Shi _ huaban /I老师：值2

　　br/

　　图标图标-保安协会/i青企协：值3

　　br/

　　I class= icon icon-人材政策/I青年企业家：值四

　　br/

　　图标图标-投资机构/i十强产业：值5

　　br/

　　I class= icon icon-caozoyaoqingjiabin /I峰会嘉宾：值6

　　br/

　　i class=icon icon-rencai/i高端人才：值七

　　返回资源

　　}

　　},

　　地区：[

　　//隐藏南海

　　{

　　名称： 南海诸岛，

　　项目样式：{

　　正常：{

　　边框颜色："红色",

　　边框宽度：20,//设置外层边框

　　不透明度：0,//为0 时不绘制该图形

　　},

　　},

　　标签:{

　　show: false，//隐藏文字

　　},

　　},

　　],

　　背景色： rgba(0，0，0，0.1)

　　地理位置：{

　　地图："中国",

　　缩放：1.2,

　　标签:{

　　正常：{

　　颜色： #1e2d4c

　　},

　　重点：{

　　显示：假

　　}

　　},

　　roam: false，//是否允许缩放

　　项目样式：{

　　正常：{

　　//地图便框设置

　　边框颜色： #003262 ,

　　边框宽度：11,//设置外层边框

　　},

　　重点：{

　　areaColor: #003262 ，

　　阴影颜色： #003262 ,

　　},

　　},

　　项目样式：{

　　正常：{

　　颜色： ,//地图背景色

　　borderColor: #5ea8ff ，//省市边界线00fcff 516a89

　　边框宽度：1

　　},

　　重点：{

　　color: #81acff //悬浮背景

　　}

　　}

　　},

　　系列：系列a

　　}

　　}

　　/脚本

　　初始化展示就可以了

　　这个。我的图表=echarts。初始化(这.$参考文献。myechart)；

　　这个。我的图表。设置选项(选项);

　　到此这篇关于vue echarts实现中国地图流动效果的文章就介绍到这了，更多相关vue echarts中国地图内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。