<!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>飞线图</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>
<script>
var myChart = echarts.init(document.getElementById('main'));
// 数据格式 地图上标点为citys，value为经纬度，symbolSize为标记点的大小
// 数据格式 moveLines，fromName为线条出发城市，toName为线条到达城市，coords为数组经纬度，第一个为出发点经纬度，第二个为到达点经纬度
var allData = {
citys: [
{
name: '0',
value: [113.631164, 34.757774, 2],
symbolSize: 30,
itemStyle: { normal: { color: '#F58158' } },
},
{
name: '1',
value: [113.576726, 22.270715, 2],
symbolSize: 15,
itemStyle: { normal: { color: '#F58158' } },
},
{
name: '2',
value: [126.965607, 44.406106, 8],
symbolSize: 15,
itemStyle: { normal: { color: '#F58158' } },
},
{
name: '3',
value: [91.099074, 29.729805, 8],
symbolSize: 15,
itemStyle: { normal: { color: '#F58158' } },
},
{
name: '4',
value: [87.566793, 43.910932, 8],
symbolSize: 15,
itemStyle: { normal: { color: '#F58158' } },
},
],
moveLines: [
{
fromName: '0',
toName: '1',
coords: [
[113.631164, 34.757774],
[113.576726, 22.270715],
],
},
{
fromName: '0',
toName: '2',
coords: [
[113.631164, 34.757774],
[126.965607, 44.406106],
],
},
{
fromName: '0',
toName: '3',
coords: [
[113.631164, 34.757774],
[91.099074, 29.729805],
],
},
{
fromName: '0',
toName: '4',
coords: [
[113.631164, 34.757774],
[87.566793, 43.910932],
],
},
],
}
option = {
backgroundColor: '#404a59', // 地图背景颜色
title: {
text: '飞线图', // 地图标题设置
subtext:"", // 地图小标题设置
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:5, // 动画中波纹的最大缩放比例。
},
label: {
normal: {
show: false, //是否显示标签。
position: "inside", //标签的位置。// 绝对的像素值[10, 10],// 相对的百分比['50%', '50%'].'top','left','right','bottom','inside','insideLeft','insideRight','insideTop','insideBottom','insideTopLeft','insideBottomLeft','insideTopRight','insideBottomRight'
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: 130, // 点移动的速度
symbol: 'arrow', // 图形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
symbolSize: 15, // 标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。
trailLength: 0, // 线的
飞线图.rar （5个子文件） 
FlowTo js 
echarts.js 2.84MB china.js 61KB data.json 53KB jquery.min.js 82KB
index.html 8KB资源评论
博主逸尘
- 粉丝: 7090
- 资源: 26
最新资源
- 基于启发式算法的边缘计算环境深度神经网络卸载策略优化：综合DNNs应用响应时间、计算能耗及租用成本的权衡研究,边缘计算环境下深度神经网络卸载策略的优化研究：基于启发式算法的端-边-云多重资源管理策略及
- 基于紧束缚模型Matlab计算结果分析：二维SSH模型的投影能带与原胞能带对比研究,基于紧束缚模型的二维SSH模型计算：投影能带与原胞能带分析,基于紧束缚模型，使用matlab计算二维SSH模型，结果
- 4.信号和槽+事件2024-06-15.wmv
- cn.wildfirechat0.88老版本jar包，包括common-0.88.jar，sdk-0.88.jar
- 模拟芯片行业分析合集2023
- 基于模糊逻辑与递推最小二乘的整车质量估计算法：置信度评估与鲁棒性提升的应用层算法模型,基于模糊逻辑与递推最小二乘的整车质量估计算法：提高鲁棒性与估计精度，实车应用场景参考,整车质量估计算法，采用sim
- 动平衡计算工具：许用不平衡度、质量偏心度及不平衡量计算器，造纸机资料详解：残余不平衡量与允许偏重量的计算公式（N.m与g.mm）,动平衡计算器：全面涵盖不平衡度与残余不平衡量计算的实用工具-造纸机资
- autosar相关资料免费分享
- 基于单片机的智能窗帘的设计
- ble自用资源上传，也免费分享
- 零基础入门转录组下游分析-加权基因共表达网络分析教程配套资源
- DeepSeek学术科研应用速成手册
- 基于Comsol粒子操控仿真的多粒子系统操作研究：双胞胎、四胞胎声镊粒子悬浮及操控实验的探讨,基于Comsol粒子操控仿真的多粒子系统操作研究：双胞胎、四胞胎及声镊悬浮技术的实践与应用,Comsol
- Rancher学习视频
- 基于双闭环控制的11电平三相MMC逆变器并网技术：载波移相调制、电容电压均衡与二倍频环流抑制的Simulink仿真研究,基于双闭环控制的模块化多电平换流器逆变器的并网设计与仿真优化：探索二倍频环流抑制
- 小红书平台2023年5月教育行业报告：女性及年轻群体为核心用户的教育市场趋势与营销策略
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
