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> ...
随机推荐
- Python实现AVL树
参考: https://www.cnblogs.com/linxiyue/p/3659448.html?utm_source=tuicool&utm_medium=referral class ...
- 设置背景图片的方式（优秀）--把图片放在一个div里面
优点: 此种情况可以保证图片充满整个windows,即使有扩展显示器也可以 <div id="formbackground" style="position:abs ...
- gulp 搭建静态服务器
步骤: 安装依赖:npm i browser-sync --save-dev 导入browser-sync,通过create创建 设置Sass和Js任务,将其压缩重命名并引入页面,任务结束时reloa ...
- go基础_控制语句
if控制语句 说明:(1)if后面的条件语句不用加括号 (2)if后面可以跟一个简单的初始化语句,并以分号分割,初始化语句中的变量的作用域是整个if语句块 (3)if语句的条件语句需要尽量简单 (4) ...
- Ubuntu 16.04执行 sudo apt-get update非常慢解决方案
ubuntu在执行更新apt包索引 sudo apt-get update 可能遇到更新非常慢或者部分包都忽略或错误 我们应该进入到系统设置>软件与更新 选择其他站点 选择最佳服务器 然后点击关 ...
- tomcat服务器启动执行的两个方法
第一 SetApplicationContext(需要继承ApplicationContextAware)重写 第二 ContextInitialize(需要继承servleContet)重写,(co ...
- 一周搞定模拟电路_P5_基本放电电路记录
1.原始基本放大电路 2.改变Rb,Rb由200kΩ变为100kΩ 3 4
- JavaScript 事件 继承链 元素和结点
继承链: HTMLElement->Element->Node->EventTarget->Object document和body:document代表整个文档,body是指 ...
- 洛谷 P1981 表达式求值（模拟）
嗯... 题目链接:https://www.luogu.org/problem/P1981 这道题其实是数组模拟栈.首先处理乘法:注意从后往前处理,处理后归零.然后把数都加起来即可. AC代码: #i ...
- Python识别验证码，基于Tesseract实现图片文字识别
一.简介 Tesseract是一个开源的文本识别[OCR]引擎,可通过Apache 2.0许可获得.它可以直接使用,或者使用API从图像中提取打印的文本,支持多种语言.该软件包包含一个ORC引擎[li ...