echarts做飞线图
先上图，要不感觉没有说服力：
飞线图应该是大屏中很常见的一种了，通常你可以很轻易的用datav做一个飞线图，而且datav做的大屏逼格真的很高，本身也是开源免费的项目，开箱即用，上手简单……行了回归正题，我们使用echarts自己配置一个飞线图。当然echarts配置起来也不复杂，只要查看下面对应几个属性的配置就ok了
- geo
- serise 里的effectScatter
- serise 里的lines
三个配置，geo画地图，effectScatter在地图上画散点图，lines画线集，熟悉echarts配置项的看到这里基本就不用看了，自己看下配置文档马上就能撸一个出来，接下来我们按部就班把上面那个例子撸出来。
1、基础环境准备
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>飞线图</title>
<script src="https://cdn.bootcss.com/echarts/4.4.0-rc.1/echarts-en.js"></script>
<style>
html{
height: 100%;
}
body{
height: 100%;
margin: 0;
padding: 0;
background-color:#2F4056;
}
</style>
</head>
<body>
<div id="chart-box" style="width:100%; height:100%;"></div>
<script type="text/javascript">
const chart = echarts.init(document.getElementById('chart-box')); const xhr = new XMLHttpRequest();
xhr.open('get','https://geo.datav.aliyun.com/areas/bound/530000_full.json',true)
xhr.send(null)
xhr.onreadystatechange = () => {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
const data = JSON.parse(xhr.responseText); } else {
alert(xhr.status);
}
}
</script>
</body>
这里为了简便处理，直接引用cdn上的echarts和datav官方的地图json文件，当然地图json文件也可以从http://geojson.io/#map=12/30.2275/120.1777获得；
好了，上面代码已经初始化了chart容器，然后请求获取了云南省地图json数据
2、画地图
echarts.registerMap('yns', data);
const option ={
title: {
text: '云南省',
},
geo: {
map: 'yns',
zlevel: 10,
show:true,
layoutCenter: ['50%', '50%'],
roam: false,
layoutSize: "90%",
zoom: 1,
label: {
normal: {
show: true,
textStyle:{
fontSize:12,
color: '#43D0D6'
}
}
},
itemStyle: {
normal: {
color: '#062031',
borderWidth: 1.1,
borderColor: '#43D0D6'
}
},
emphasis: {
areaColor: '#FFB800',
label:{
show:false
}
}
}
}
chart.setOption(option);
好了，这个geo配置已经能画出一个完整的云南地图了，这里因为要在地图上画线集和散点，所画地图要用geo而不是serise的map
3、配置散点和线集，具体的配置项的含义请参考echarts官网，下面附上完整代码，此代码直接复制粘在html，在有网络的环境下打开就能运行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>飞线图</title>
<script src="https://cdn.bootcss.com/echarts/4.4.0-rc.1/echarts-en.js"></script>
<style>
html{
height: 100%;
}
body{
height: 100%;
margin: 0;
padding: 0;
background-color:#2F4056;
}
</style>
</head>
<body>
<div id="chart-box" style="width:100%; height:100%;"></div>
<script type="text/javascript">
const chart = echarts.init(document.getElementById('chart-box')); const xhr = new XMLHttpRequest();
xhr.open('get','https://geo.datav.aliyun.com/areas/bound/530000_full.json',true)
xhr.send(null)
xhr.onreadystatechange = () => {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
const data = JSON.parse(xhr.responseText);
console.log(Object.prototype.toString(data))
const coord = data.features.map(val => {
return {
name:val.properties.name,
value:val.properties.center
}
})
const lines_coord = [];
coord.forEach((v,index)=> {
index > 0 && lines_coord.push({
coords:[v.value,coord[0].value]
})
})
//地市取简称
data.features.forEach(v => {
v.properties.name = v.properties.name.indexOf('版纳')>-1 ?v.properties.name.substr(0,4) : v.properties.name.substr(0,2);
})
echarts.registerMap('yns', data);
const option ={
title: {
text: '云南省',
},
geo: {
map: 'yns',
zlevel: 10,
show:true,
layoutCenter: ['50%', '50%'],
roam: false,
layoutSize: "90%",
zoom: 1,
label: {
normal: {
show: true,
textStyle:{
fontSize:12,
color: '#43D0D6'
}
}
},
itemStyle: {
normal: {
color: '#062031',
borderWidth: 1.1,
borderColor: '#43D0D6'
}
},
emphasis: {
areaColor: '#FFB800',
label:{
show:false
}
}
},
series: [
{
type:'effectScatter',
coordinateSystem: 'geo',
zlevel: 15,
symbolSize:8,
rippleEffect: {
period: 4, brushType: 'stroke', scale: 4
},
itemStyle:{
color:'#FFB800',
opacity:1
},
data:coord.slice(1)
},
{
type:'effectScatter',
coordinateSystem: 'geo',
zlevel: 15,
symbolSize:12,
rippleEffect: {
period: 6, brushType: 'stroke', scale: 8
},
itemStyle:{
color:'#FF5722',
opacity:1
},
data:coord.slice(0,1)
},
{
type:'lines',
coordinateSystem:'geo',
zlevel: 15, effect: {
show: true, period: 5, trailLength: 0, symbol: 'arrow', color:'#01AAED',symbolSize: 8,
},
lineStyle: {
normal: {width: 1.2, opacity: 0.6, curveness: 0.2, color: '#FFB800'}
},
data:lines_coord
} ]
}
chart.setOption(option);
chart.on('click', function (params) {
console.log(params);
});
} else {
alert(xhr.status);
}
}
</script>
</body>
echarts做飞线图的更多相关文章
- 使用ECharts画K线图
需引入echarts.js插件,开发环境建议选择源代码版本,该版本包含了常见的警告和错误提示.下载地址 http://echarts.baidu.com/download.html 下面是代码,注释很 ...
- echarts画k线图
var charset = echarts.init(document.getElementById("k_line")) $.get(k_line.url_A).done(fun ...
- 【React】react项目引入echarts插件 K线图
参考npm文档:https://www.npmjs.com/package/echarts-for-react 由于npm上已经有针对react项目出的echarts插件,所以在这里直接安装 第一步: ...
- echarts绘制k线图为什么写candlestick类型就报错
错误提示:echarts-en.common.js:11713 Uncaught Error: Component series.candlestick not exists. Load it fir ...
- 一起来玩echarts系列（一）------箱线图的分析与绘制
一.箱线图 Box-plot 箱线图一般被用作显示数据分散情况.具体是计算一组数据的中位数.25%分位数.75%分位数.上边界.下边界,来将数据从大到小排列,直观展示数据整体的分布情况. 大部分正常数 ...
- echarts - 特殊需求实现代码汇总之【线图】篇
时间过得好快,刚刚还是7月底,一转眼自己调整(浪费)了大半个月的时间.. 接下来要先总结一下自己之前的知识点,然后清掉自己的待办任务,重新轻装上阵! 继7月24的echarts-柱图配置汇总后,ech ...
- Echarts数据可视化series-line线图，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
- 基于Echarts的股票K线图展示
发布时间:2018-10-31 技术:javascript+html5+canvas 概述 基于echarts的股票K线图展示,只需引用单个插件,通过简单配置,导入数据,即可实现炫酷复杂的K线 ...
- 百度 echarts K线图使用
看个效果图先 首先在需要插入图例的HTML中嵌入 <div id="main" style="height:400px"></div> ...
随机推荐
- 如何预测股票分析--先知（Prophet）
在上一篇中,我们探讨了自动ARIMA,但是好像表现的还是不够完善,接下来看看先知的力量! 先知(Prophet) 有许多时间序列技术可以用在股票预测数据集上,但是大多数技术在拟合模型之前需要大量的数据 ...
- 手把手教你做一个python+matplotlib的炫酷的数据可视化动图
1.效果图 2.注意: 上述资料是虚拟的,为了学习制作动图,构建的. 仅供学习, 不是真实数据,请别误传. 当自己需要对真实数据进行可视化时,可进行适当修改. 3.代码: #第1步:导出模块,固定 i ...
- C语言 exit
C语言 exit 在main函数中调用exit和return结果是一样的,但在子函数中调用return只是代表子函数终止了,在子函数中调用exit,那么程序终止. 案例 #include <st ...
- P2023 [AHOI2009]维护序列 区间加乘模板
题意: 有长为N的数列,不妨设为a1,a2,…,aN .有如下三种操作形式:N<=1e5(1)把数列中的一段数全部乘一个值;(2)把数列中的一段数全部加一个值;(3)询问数列中的一段数的和,由于 ...
- 【Python】爬虫原理
前言 简单来说互联网是由一个个站点和网络设备组成的大网,我们通过浏览器访问站点,站点把HTML.JS.CSS代码返回给浏览器,这些代码经过浏览器解析.渲染,将丰富多彩的网页呈现我们眼前: 一.爬虫是什 ...
- PHP array_chunk() 妙用
定义和用法 array_chunk()函数把一个数组分割为新的数组块. array_chunk(array,size,preserve_keys); 参数 描述 array 必需.规定要使用的数组. ...
- SpringMVC：ssm整合练习一
西部开源-秦疆老师:MyBatis,Spring,SpringMVC 整合练习一 , 秦老师交流Q群号: 664386224 未授权禁止转载!编辑不易 , 转发请注明出处!防君子不防小人,共勉! ss ...
- P&R 5
Floorplan: 要做好floorplan需要掌握哪些知识跟技能? 通常,遇到floorplan问题,大致的debug步骤跟方法有哪些? 如何衡量floorplan的QA? 芯片的整体架构模块划分 ...
- itest(爱测试) 4.3.0 发布，开源BUG 跟踪管理 & 敏捷测试管理软件
itest 简介:查看简介 test 开源敏捷测试管理,testOps 践行者.可按测试包分配测试用例执行,也可建测试迭代(含任务,测试包,BUG)来组织测试工作,也有测试环境管理,还有很常用的测试度 ...
- Missing artifact com.alibaba:dubbo:jar:2.8.4 dubbo编译打包
由于maven中心仓库中没有dubbo2.8.4,所以需要到github中下载源码包自己编译. 1.下载dubbo,地址:https://github.com/dangdangdotcom/dubbo ...