根据百度迁徙图改编的飞线图，具体效果见博客

共5个文件

js：3个

json：1个

html：1个

echart

192 浏览量 2023-03-09 18:07:36 上传评论收藏 579KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

飞线图.rar （5个子文件）

FlowTo

echarts.js 2.84MB

china.js 61KB

data.json 53KB

jquery.min.js 82KB

index.html 8KB

<!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, // 线的

评论收藏

内容反馈