最近在研究Echarts的相关案例，毕竟现在大数据比较流行，比较了D3.js、superset等相关的图表插件，还是觉得echarts更简单上手些。

本文是以原生JS为基础，如果使用Vue.js的话，只需把相关配置放到method函数中，或者放在computed属性中，毕竟参数配置都是固定的，换汤不换药，话不多说，先上效果图:

本案例需要引用的JS文件有：echarts.js（echarts官方资源）、china.js（中国地图的配置），相关配置文件已打包至Github，如需使用，clone下载即可。

github地址： https://github.com/Tzlibai/Demo.git

代码如下，代码中有详细注释，这里就不过多赘述

HTML部分：

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>* {margin: 0;padding: 0;}.map {width: 1400px;height: 800px;margin: 0 auto;}</style>
</head>
<body>
<!--    设置地图容器，需要设置宽高样式--><div id="main" class="map"></div>
</body>
<script src="js/jquery.min.js"></script>
<script src="js/echarts.js"></script>
<script src="js/china.js"></script>
</html>

Script部分：

<script>var myChart = echarts.init(document.getElementById('main'));// 数据格式 地图上标点为citys，value为经纬度，symbolSize为标记点的大小// 数据格式 moveLines，fromName为线条出发城市，toName为线条到达城市，coords为数组经纬度，第一个为出发点经纬度，第二个为到达点经纬度var allData = {"citys":[{"name":"延寿","value":[128.331644,45.451897,2],"symbolSize":20,"itemStyle":{"normal":{"color":"#F58158"}}},{"name":"临江","value":[126.918087,41.811979,2],"symbolSize":2,"itemStyle":{"normal":{"color":"#F58158"}}},{"name":"长春","value":[125.323544,43.817072,8],"symbolSize":2,"itemStyle":{"normal":{"color":"#F58158"}}}],"moveLines":[{"fromName":"黑龙江","toName":"珠海","coords":[[126.661669,45.742347],[113.576726,22.270715]]},{"fromName":"黑龙江","toName":"舒兰","coords":[[126.661669,45.742347],[126.965607,44.406106]]},{"fromName":"黑龙江","toName":"胶州","coords":[[126.661669,45.742347],[120.033382,36.26468]]}]};option = {backgroundColor: '#404a59', // 地图背景颜色title: {text: '迁徙图', // 地图标题设置subtext:"123321", // 地图小标题设置sublink:"http://www.baidu.com", //小标题链接target:"blank", //'self' 当前窗口打开，'blank' 新窗口打开padding:5, // 标题内边距 5  [5, 10]  [5,10,5,10]left:"center", // 组件离容器左侧的距离,'left', 'center', 'right','20%'top:"5%", // 组件离容器上侧的距离,'top', 'middle', 'bottom','20%'right:"auto", // 组件离容器右侧的距离,'20%'bottom:"auto", // 组件离容器下侧的距离,'20%'textStyle: {color:"#fff", //文字颜色fontStyle:"normal", // italic斜体  oblique倾斜fontWeight:"normal", // 文字粗细bold   bolder   lighter  100 | 200 | 300 | 400...fontFamily:"sans-serif", // 字体系列fontSize:18, // 字体大小}},legend: { // 右下角图例show: false, // 是否显示orient: 'vertical', // 图例排列方向top: 'bottom', // 位置left: 'right', // 位置data: ['地点', '线路'], // 数据textStyle: { // 文字设置color: '#fff'}},geo: {show:true, // 是否显示map: 'china', // 地图类型。world世界地图，china中国地图// center:[115.97, 29.71], //当前视角的中心点，用经纬度表示label: {normal:{ //普通状态下的标签文本样式。(省份名称)show: false, //是否在普通状态下显示标签。textStyle: { // 文字设置color: '#fff'},},emphasis: { // 是否在高亮状态下显示标签。(省份名称)show: true,textStyle: { // 文字设置color: '#fff'},}},roam: true, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启itemStyle: { // 地图板块区域的多边形 图形样式normal: { // 默认板块信息areaColor: '#222',borderColor: '#404a59'},emphasis: { // 高亮版板块信息areaColor: '#2a333d'}}},series: [{name: '地点',type: 'effectScatter', // 特效散点图coordinateSystem: 'geo', // 'cartesian2d'使用二维的直角坐标系。'geo'使用地理坐标系zlevel: 2, // 所有图形的 zlevel 值。rippleEffect: { //涟漪特效相关配置。brushType: 'stroke', //波纹的绘制方式，可选 'stroke' 和 'fill'。period:4, // 动画的时间。scale:2.5, // 动画中波纹的最大缩放比例。},label: {normal: {show: false,                  //是否显示标签。position: "inside",          //标签的位置。// 绝对的像素值[10, 10]offset: [30, 40],             //是否对文字进行偏移。默认不偏移。例如：[30, 40] 表示文字在横向上偏移 30，纵向上偏移 40。formatter: '{b}: {c}',       //标签内容格式器。模板变量有 {a}、{b}、{c}，分别表示系列名，数据名，数据值。},emphasis: {show: true,position: 'right',formatter: '{b}'}},symbolSize: 2, // 标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。showEffectOn: 'render', // 配置何时显示特效。可选：'render' 绘制完成后显示特效。'emphasis' 高亮（hover）的时候显示特效。itemStyle: { // 图形样式，normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。normal: {color: '#46bee9'}},data: allData.citys}, {name: '线路',type: 'lines',coordinateSystem: 'geo', // 'cartesian2d'使用二维的直角坐标系。'geo'使用地理坐标系zlevel: 2,large: true, // 是否开启大规模散点图的优化，在数据图形特别多的时候（>=5k）可以开启。开启后配合 largeThreshold 在数据量大于指定阈值的时候对绘制进行优化。缺点：优化后不能自定义设置单个数据项的样式。effect: {show: true,constantSpeed: 30, // 点移动的速度symbol: 'pin',  // 图形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'symbolSize: 3, // 标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。trailLength: 0, // 线的宽度},lineStyle: { // 线的颜色、宽度，样式设置normal: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0, color: '#58B3CC'}, {offset: 1, color: '#F58158'}], false),width: 1, // 线的宽度opacity: 0.2, // 线的透明度curveness: 0.1 // 线的完全程度}},data: allData.moveLines}]};myChart.setOption(option);
</script>

如果有任何疑问即可留言反馈，会在第一时间回复反馈，谢谢大家

Echarts大数据可视化物流航向省份流向迁徙动态图，开发全解+完美参数注释相关推荐

大数据可视化物流平台后台HTML5模板免费下载
文件简介: HTML5物流大数据服务平台后台模板,DIV+CSS布局设计,仪表盘.可视化图表模板,解决了echarts版本兼容问题,点击各个模块进入对应的模块详情页. 大数据可视化物流平台后台HTML ...
Hadoop+hive+flask+echarts大数据可视化项目之hive环境搭建与系统数据的分析思路
Hadoop+hive+flask+echarts大数据可视化项目(四) --------------hive环境搭建与系统数据的分析思路---------------- 关注过Hadoop+hive ...
Hadoop+hive+flask+echarts大数据可视化之系统数据收集
Hadoop+hive+flask+echarts大数据可视化项目(一) --------------系统数据收集---------------- 谈到大数据的项目,一般以数据可视化为主体,收集大数据 ...
Hadoop+hive+flask+echarts大数据可视化项目之系统数据整合和hadoop环境搭建
Hadoop+hive+flask+echarts大数据可视化项目(二) --------------系统数据整合和hadoop环境搭建---------------- 关注Hadoop+Hive+F ...
Hadoop+hive+flask+echarts大数据可视化项目之flask结合echarts前后端结合显示hive分析结果
Hadoop+hive+flask+echarts大数据可视化项目(五) ------flask与echarts前后端结合显示hive分析结果------- 关注过Hadoop+hive+flask+ ...
基于Neo4j中医方剂药材知识图谱大数据可视化分析系统的设计与开发
基于Neo4j中医方剂药材知识图谱大数据可视化分析系统的设计与开发设计背景这个系统的开发初衷是笔者希望通过这个系统来学习一下Neo4j的相关技术,包括与python.java的对接.可视化等方面, ...
Echarts数据可视化event图表事件的相关操作，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
Echarts数据可视化action图表行为的相关操作，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
Echarts数据可视化echarts实例的相关操作，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

Echarts大数据可视化物流航向省份流向迁徙动态图，开发全解+完美参数注释