关键词：
0.引入echarts组件，和中国地图js
import eCharts from \'echarts\' import \'echarts/map/js/china.js\'// 引入中国地图
1. 设置地图容器
<div id="ID_L2H1Map" style="width: 600px;height:400px;"></div>
2.调用echarts绘制地图
createEchart_2L1H1G (data)
data = [
"name": "北京", "dataCount": [0, 1, 0, 0, 0, 0, 1], "id": "247" ,
"name": "天津",
"dataCount": [0, 0, 0, 0, 0, 0, 0],
"id": "248"
, "name": "河北", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "249" ,
"name": "山西",
"dataCount": [0, 0, 0, 0, 0, 0, 0],
"id": "250"
, "name": "内蒙古", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "251" ,
"name": "辽宁",
"dataCount": [0, 0, 0, 0, 0, 0, 0],
"id": "252"
, "name": "吉林", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "253" ,
"name": "黑龙江",
"dataCount": [0, 0, 0, 0, 0, 0, 0],
"id": "254"
, "name": "上海", "dataCount": [0, 1, 0, 0, 0, 0, 0], "id": "255" ,
"name": "江苏",
"dataCount": [0, 0, 0, 0, 0, 0, 0],
"id": "256"
, "name": "浙江", "dataCount": [0, 1, 0, 0, 0, 0, 0], "id": "257" ,
"name": "安徽",
"dataCount": [0, 0, 0, 0, 0, 0, 0],
"id": "258"
, "name": "福建", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "259" ,
"name": "江西",
"dataCount": [0, 0, 0, 0, 0, 0, 0],
"id": "260"
, "name": "山东", "dataCount": [14235, 820, 0, 35, 0, 0, 4], "id": "261" ,
"name": "河南",
"dataCount": [0, 0, 0, 0, 0, 0, 0],
"id": "262"
, "name": "湖北", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "263" ,
"name": "湖南",
"dataCount": [0, 0, 0, 0, 0, 0, 0],
"id": "264"
, "name": "广东", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "265" ,
"name": "广西",
"dataCount": [0, 0, 0, 0, 0, 0, 0],
"id": "266"
, "name": "海南", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "267" ,
"name": "重庆",
"dataCount": [0, 0, 0, 0, 0, 0, 0],
"id": "268"
, "name": "四川", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "269" ,
"name": "贵州",
"dataCount": [0, 0, 0, 0, 0, 0, 0],
"id": "270"
, "name": "云南", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "271" ,
"name": "西藏",
"dataCount": [0, 0, 0, 0, 0, 0, 0],
"id": "272"
, "name": "陕西", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "273" ,
"name": "甘肃",
"dataCount": [0, 0, 0, 0, 0, 0, 0],
"id": "274"
, "name": "青海", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "275" ,
"name": "宁夏",
"dataCount": [0, 0, 0, 0, 0, 0, 0],
"id": "276"
, "name": "新疆", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "277" ,
"name": "台湾",
"dataCount": [0, 0, 0, 0, 0, 0, 0],
"id": "278"
, "name": "香港", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "279" ,
"name": "澳门",
"dataCount": [0, 0, 0, 0, 0, 0, 0],
"id": "280"
]
var 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]
for (let i=0;i<data.length;i++)
var da = chinaGeoCoordMap[data[i].name];
chinaGeoCoordMap[data[i].name]=[...da,...data[i].dataCount];
var chinaDatas = [
[
name: \'北京\',
value: 2
], [
name: \'黑龙江\',
value: 1
], [
name: \'内蒙古\',
value: 1
], [
name: \'吉林\',
value: 1
], [
name: \'辽宁\',
value: 1
], [
name: \'河北\',
value: 1
], [
name: \'天津\',
value: 1
], [
name: \'山西\',
value: 1
], [
name: \'陕西\',
value: 1
], [
name: \'甘肃\',
value: 1
], [
name: \'宁夏\',
value: 1
], [
name: \'青海\',
value: 1
], [
name: \'新疆\',
value: 1
], [
name: \'西藏\',
value: 1
], [
name: \'四川\',
value: 1
], [
name: \'重庆\',
value: 1
], [
name: \'山东\',
value: 1
], [
name: \'河南\',
value: 1
], [
name: \'江苏\',
value: 1
], [
name: \'安徽\',
value: 1
], [
name: \'湖北\',
value: 1
], [
name: \'浙江\',
value: 1
], [
name: \'福建\',
value: 1
], [
name: \'江西\',
value: 1
], [
name: \'湖南\',
value: 1
], [
name: \'贵州\',
value: 1
], [
name: \'广东\',
value: 1
], [
name: \'广西\',
value: 1
], [
name: \'云南\',
value: 1
], [
name: \'海南\',
value: 1
], [
name: \'上海\',
value: 1
], [
name: \'台湾\',
value: 1
], [
name: \'澳门\',
value: 1
], [
name: \'香港\',
value: 1
]
]
var convertData = function (data)
var res = [];
for (var i = 0; i < data.length; i++)
var dataItem = data[i];
var fromCoord = [chinaGeoCoordMap[dataItem[0].name][0], chinaGeoCoordMap[dataItem[0].name][1]];
var toCoord = [117.1582, 36.8701];
console.log(dataItem, fromCoord)
if (fromCoord && toCoord)
res.push([
coord: fromCoord,
value: dataItem[0].value
,
coord: toCoord,
]);
return res;
;
let seriesA = []
seriesA.push(
type: \'lines\',
zlevel: 1,
effect:
show: true,
period: 4, //箭头指向速度，值越小速度越快
trailLength: 0.3, //特效尾迹长度[0,1]值越大，尾迹越长重
symbol: \'pin\', //箭头图标
symbolSize: 8, //图标大小
color: \'#fff\'
,
lineStyle:
normal:
color: \'#15f43f\',
width: 1,//尾迹线条宽度
opacity: .9, //尾迹线条透明度
curveness: .3 //尾迹线条曲直度
,
data: convertData(chinaDatas)
,
type: \'effectScatter\',
coordinateSystem: \'geo\',
zlevel: 2,
rippleEffect: // 涟漪特效
period: 4, // 动画时间，值越小速度越快
brushType: \'fill\', // 波纹绘制方式 stroke, fill
scale: 6, // 波纹圆环最大限制，值越大波纹越大
color: \'#a2ffa8\' // 涟漪的颜色，默认为散点的颜色。
,
label:
normal:
show: true,
color: \'#283c64\',
position: \'top\', // 显示位置
offset: [0, 0], // 偏移设置
formatter: function (params) // 圆环显示文字
return params.data.name
,
fontSize: 13
,
emphasis:
show: false
,
symbol: \'circle\',
symbolSize: function (val)
return 1 + val[2] * 5 // 圆环大小
,
itemStyle:
show: false,
color: \'#3ff4a9\',
opacity: 1
,
data: chinaDatas.map(function (dataItem)
return
name: dataItem[0].name,
value: chinaGeoCoordMap[dataItem[0].name],
itemStyle:
color: \'#3ff4a9\'
)
,
//被攻击点
type: \'scatter\',
coordinateSystem: \'geo\',
zlevel: 2,
label:
normal:
show: false,
position: \'right\',
//offset:[5, 0],
color: \'#0f0\',
formatter: \'b\',
textStyle:
color: "#0f0"
,
emphasis:
show: true,
color: "#f60"
,
symbol: \'pin\',
symbolSize: 0,
data: [
name: \'山东\',
value: chinaGeoCoordMap[\'山东\'].concat([10]),
],
);
let aChart = eCharts.init(document.getElementById(\'ID_L2H1Map\'))
let aOption =
tooltip:
show: true,
trigger: \'item\',
backgroundColor: \'#2e65fd\',
borderColor: \'#FFFFCC\',
showDelay: 0,
hideDelay: 0,
enterable: true,
transitionDuration: 0,
extraCssText: \'z-index:100\',
formatter: function (params, ticket, callback)
console.log(params)
// 根据业务自己拓展要显示的内容
var res = \'\'
var name = params.name
var value1 = params.value[params.seriesIndex + 3] || 0
var value2 = params.value[params.seriesIndex + 4] || 0
var value3 = params.value[params.seriesIndex + 5] || 0
var value4 = params.value[params.seriesIndex + 6] || 0
var value5 = params.value[params.seriesIndex + 7] || 0
var value6 = params.value[params.seriesIndex + 8] || 0
var value7 = params.value[params.seriesIndex + 9] || 0
res = "<span style=\'color:#fff\'>" + name + \'</span>\' +
\'<br/>\' +
\'<i class="icon icon-xuesheng"></i> 学生：\' + value1+
\'<br/>\' +
\'<i class="icon icon-laoshi_huaban"></i> 老师：\'+value2+
\'<br/>\' +
\'<i class="icon icon-baoanxiehui"></i> 青企协：\'+value3+
\'<br/>\' +
\'<i class="icon icon-rencaizhengce"></i> 青年企业家：\'+value4+
\'<br/>\' +
\'<i class="icon icon-investmentinstitutions"></i> 十强产业：\'+value5+
\'<br/>\' +
\'<i class="icon icon-caozuoyaoqingjiabin"></i> 峰会嘉宾：\'+value6+
\'<br/>\' +
\'<i class="icon icon-rencai"></i> 高端人才：\'+value7
return res
,
backgroundColor: \'rgba(0,0,0,0)\',
geo:
map: \'china\',
zoom: 1.2,
label:
normal:
color: \'#1e2d4c\'
,
emphasis:
show: false
,
roam: false, // 是否允许缩放
itemStyle:
normal:
color: \'#8dbeff\', // 地图背景色
borderColor: \'#5ea8ff\', // 省市边界线00fcff 516a89
borderWidth: 1
,
emphasis:
color: \'#81acff\' // 悬浮背景
,
series: seriesA
aChart.setOption(aOption)
aChart.on(\'click\', this.showWinmap)
,
3.调用地图绘制方法：
// 生命周期 - 挂载完成（可以访问DOM元素）
mounted ()
this.createEchart_2L1H1G(data)
,
4.展示效果
基于vue+ts中引用echarts的中国地图和世界地图密度表(代码片段)
首先先附上官网 http://echarts.baidu.com/option.html#series-line.label以及密度表对应geo配置文档 http://echarts.baidu.com/option.html#geo以下仅是个人在开发中逐步摸索出来的。demo目前没出问题。如果有错误地方请留言指出 （若转载请... 查看详情
基于echarts+百度地图+three.js的数据可视化系统(代码片段)
上周重构项目数据统计部分写了几篇echarts相关的文章，重构的后台前端框架改用Vue，关于Vue中引用Echarts及可能遇到的问题的文章如下所示：VUE中使用Echarts图表VUE父组件异步获取数据，子组件接收的值为空VUE渲染e... 查看详情
vue项目中echarts流向图迁徙图实现
参考技术A1.在额echarts官网找到合适的option配置文件，在vue项目中新建文件夹，然后通过import引进来，2.如果通过npm安装的echarts可以直接从moudule中引入地图json文件如下图3，引入相关文件后就开始创建地图实例效果如下：进阶：... 查看详情
vue中使用vue-echarts引入百度地图实现数据可视化(代码片段)
安装v-chartsnpm安装$npminstallechartsvue-echarts在使用v-chart前必须安装echarts在main.js中进行注册importEChartsfrom'vue-echarts'Vue.component('v-chart',ECharts)在页面进行使用1.页面中使用v-chart<template><v- 查看详情
vue基于百度地图实现热力图(代码片段)
前言今天接到一个需求要实现在百度地图中将高排放车辆以热力图的形式展现在地图中，下面是具体的实现过程：实现效果1.安装baiduMap1.1首先要安装百度mapnpminstallvue-baidu-map--save1.2在main.js文件中引入并全局注册importBaiduMa... 查看详情
使用echarts实现一个可拖拽缩放的立体地图
...做一个立体的中国地图，原先的平面地图使用的是高德与echarts结合，地图用高德，点用echarts，而现在要做立体的地图，并且不需要世界地图的背景，于是我直接放弃了高德直接改全部由echarts来实现。echarts5.1.2vue-echarts6.0.0lodashel... 查看详情
vue中使用echarts实现中国地图(代码片段)
...的是series的数组下标；<template><divclass="echartsMapAllDemo"><!--style的宽高一定要写，不写也不会展示echarts图--><divid="myEcharts"ref="myEcharts"style="width:100vw;height:100vh;border:3pxsolidgold"... 查看详情
vue+echarts实现中国地图多级钻取功能
...有帮助，别忘了点亮star哦说明：本文为Vue2.x+Echarts5.x实现中国地图多级钻取功能（基本版未做过多功能拓展和样式优化便于二次开发）。由于祖国地大物博、地市众多，仅完成了省级行政区及部分地市的钻... 查看详情
vue-vue使用echarts实现中国地图和点击省份进行查看(代码片段)
文章目录1，实现的效果和功能2，安装ECharts3，main.js里面引入echarts4，实现如下5，遇到的问题6，用到的模拟数据1，实现的效果和功能vue使用echarts实现中国地图和点击省份进行查看；下面是效果图&#x... 查看详情
vue+echarts+geojson+makeapie实现地图下钻和数据显示(代码片段)
...实现过程：1、下载json:地址： https://hxkj.vip/demo/echartsMap/或者：EasyMap 下载的有的并非是严格的json文件，选用用 json.cn 进行转换2、vue文件中引入json 查看详情
25继续echarts实现中国地图
...没有颜色，是因为没有引入zrender包，因为echarts画地图是基于zrender实现的<!DOCTYPEhtml><html><header><metacharset="utf-8"><!--引入ECharts文件--><scriptsrc="jquery-1.7.2.min.j 查看详情
vue使用echarts展示地图(代码片段)
Vue使用Echarts展示地图一，获取地图json二，Vue实现展示2.1Vue环境2.2main.js引入Echarts2.3展示一，获取地图json阿里云数据可视化平台获取阿里云DataV地图选择器二，Vue实现展示2.1Vue环境ES6、vue、vuex、vue-router、vue-cli、axi... 查看详情
vue使用echarts展示地图(代码片段)
Vue使用Echarts展示地图一，获取地图json二，Vue实现展示2.1Vue环境2.2main.js引入Echarts2.3展示一，获取地图json阿里云数据可视化平台获取阿里云DataV地图选择器二，Vue实现展示2.1Vue环境ES6、vue、vuex、vue-router、vue-cli、axi... 查看详情
echarts3地图实现数据迁徙，怎么实现画的迁徙的线路颜色不一致
参考技术AECharts开源来自百度商业前端数据可视化团队，基于html5Canvas，是一个纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验... 查看详情
vue封装echarts组件
...技术A1、最近做的项目是后台管理系统，里面含有各种的echarts的图标，一般的图表都是比较好绘制的，稍微比较难的世界地图和中国地图的绘制。在vue中引入echarts，分两种情况引入，一种值npm安装包，另一种是cdn外部引入，但... 查看详情
echarts结合百度地图怎么能实现动态刷新，而不需要刷新整个页面
参考技术AECharts开源来自百度商业前端数据可视化团队，基于html5Canvas，是一个纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验... 查看详情
vue框架下echarts导入地图和调用百度地图接口
vue框架下echarts导入地图和调用百度地图接口的一些帮助和介绍概述：主要是在vue框架下导入地图（全国地图和百度地图），因为自己在团队项目中负责的就是前端的地图功能页面，同时尽量按照原型设计的完成。一. 在vue框架下... 查看详情
在vue中使用echarts
...所周知echarts是非常强大的插件。一开始想在网上找一个基于vue封装好的（懒省事），eg:vue-echarts，但是拉取下来发现，跟项目中使用的类型有点偏差，而且他们的数据大多都是定制好的，我很难在此基础上进行更改（惹不起），... 查看详情