EChart绘制风速风向曲线分析图
1、获取ECharts
在 ECharts 的 GitHub 上下载最新的 release 版本，解压出来的文件夹里的 dist 目录里可以找到最新版本的 echarts 库。
2、引入ECharts
像普通的 JavaScript 库一样用 script 标签引入。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="echarts.min.js"></script>
</head>
</html>
3、绘制图表
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>
然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图，下面是完整代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var data = [
[
1483488000000,
6.19,
0.9545
],
[
1483574400000,
6.19,
0.2303
],
[
1483660800000,
3.19,
0
],
[
1483747200000,
6.19,
0
],
[
1483833600000,
6.19,
4
],
[
1483920000000,
11.19,
2
],
[
1484006400000,
17.19,
4.7124
]
];
//数据参数顺序
var dims = {
time: 0,
windSpeed: 1,
R: 2
};
//箭头大小
var arrowSize = 12;
//方向绘制
function renderArrow(param, api) {
var point = api.coord([
api.value(dims.time),
api.value(dims.windSpeed)
]); return {
type: 'path',
shape: {
pathData: 'M31 16l-15-15v9h-26v12h26v9z',
x: -arrowSize / 2,
y: -arrowSize / 2,
width: arrowSize,
height: arrowSize
},
rotation: api.value(dims.R),
position: point,
style: api.style({
stroke: '#555',
lineWidth: 1
})
};
} var option = {
title: {
text: '风速风向数据分析图',
left: 'center'
},
tooltip: {
trigger: 'axis',
formatter: function (params) {
return [
echarts.format.formatTime('yyyy-MM-dd', params[0].value[dims.time])
+ ' ' + echarts.format.formatTime('hh:mm', params[0].value[dims.time]),
'风速：' + params[0].value[dims.windSpeed],
'风向：' + params[0].value[dims.R]
].join('<br>');
}
},
grid: {
top: 40,
bottom: 60
},
xAxis: {
type: 'time'
},
yAxis: [{
name: '风速（节）',
nameLocation: 'middle',
nameGap: 35,
axisLine: {
lineStyle: {
color: '#666'
}
},
splitLine: {
lineStyle: {
color: '#ddd'
}
}
}, {
axisLine: { show: false },
axisTick: { show: false },
axisLabel: { show: false },
splitLine: { show: false }
}],
visualMap: {
type: 'piecewise',
orient: 'horizontal',
left: 'center',
bottom: 10,
pieces: [{
gte: 17,
color: '#D33C3E',
label: '大风（>=17节）'
}, {
gte: 11,
lt: 17,
color: '#f4e9a3',
label: '中风（11 ~ 17 节）'
}, {
lt: 11,
color: '#18BF12',
label: '微风（小于 11 节）'
}],
seriesIndex: 0,
dimension: 1
},
dataZoom: [{
type: 'inside',
xAxisIndex: 0,
minSpan: 5
}],
series: [{
type: 'custom',
renderItem: renderArrow,
encode: {
x: dims.time,
y: dims.windSpeed
},
data: data,
z: 10
}, {
type: 'line',
symbol: 'none',
encode: {
x: dims.time,
y: dims.windSpeed
},
lineStyle: {
normal: {
color: '#aaa',
type: 'dotted'
}
},
data: data,
z: 1
}]
}; myChart.setOption(option); //窗口变化更改Chart大小
window.onresize(function () {
myChart.resize();
});
</script>
</body>
</html>
运行测试图表如下:
EChart绘制风速风向曲线分析图的更多相关文章
- c# 动态绘制直线和曲线
c# 动态绘制直线和曲线 在本案例中利用Graphics对象动态地绘制直线和曲线.程序运行后,选择“直线”单选按钮,然后按下鼠标左键拖动鼠标就可以绘制直线,选择“曲线”单选按钮,然后移动鼠标就可以 ...
- Echart绘制趋势图和柱状图总结
1.legend名字与series名字一样,即可联动,且不可手动去掉联动效果 2.通过legend图例联动,隐藏绘制图线后,对应( yAxisIndex: 1)坐标y轴如果没有同时设置min和max的 ...
- 利用eChart绘制网页图表
首先,最好的教程在这里:eCchart eChart所需JS: echarts.min.js china.js echarts.js 页面代码如下: 一.图表 <!DOCTYPE html> ...
- 玩转zynq7020之风速风向测量实战项目
本文是用米尔zynq7020开发板(Z-turn broad)风速风向测量实战项目. 这次项目是以测量风速风向为目标的产品,由于传统的风杯有很大的缺陷,在零下20度,结冰后不能使用,还有启动风速等等, ...
- UV数据与风速风向数据转换
package com.qr.util; import java.text.DecimalFormat; /** * //TODO UV数据与风速风向数据转换 */ public class UVAn ...
- C# Charts绘制多条曲线
一.创建winform工程 拖拽控件Chart 二.比如要绘制俩条曲线,设置Chart控件的属性Series 三.chart的属性根据自己的业务需求设计,我这里只设置了图标类型 代码: using S ...
- 风速风向 UV 相互转换
这里以c#为例将风的uv分量转成风向风速(别的语言类似) 风向是以y轴正方向为零度顺时针转 UV转风速风向 1 double v ;//v分量 2 double u;//u分量 3 double fx ...
- canvas绘制自定义的曲线，以椭圆为例，通俗易懂，童叟无欺
本篇文章,将讲述如何通过自定义的曲线函数,使用canvas的方式进行曲线的绘制. 为了通俗易懂,将以大家熟悉的椭圆曲线为例,进行椭圆的绘制.至于其他比较复杂的曲线,用户只需通过数学方式建立起曲线函数, ...
- 使用plot_importance绘制特征重要性曲线
代码如下所示: # -*- coding: utf-8 -*- #导入需要的包 import matplotlib.pyplot as plt from sklearn import datasets ...
随机推荐
- idea上传项目到github
1.在上传项目之前需要先在idea中确认两个配置,一个是git的执行位置,电脑上没有安装git的需要提前安装(下载git软件并且安装,非github desktop),安装之后再idea的settin ...
- Linux下利用coredump技术追查进程崩溃原因
原文链接:https://blog.csdn.net/u014585564/article/details/68063269 最近项目中出现了一个问题,服务器端程序会突然崩溃退出,我们采取了cored ...
- 数据结构学习--单链表(python)
概念 链表(linked_list)是物理存储单元上非连续的.非顺序的存储结构,数据元素的逻辑顺序 是通过链表的指针地址实现,每个元素包含两个结点,一个是存储元素的数据域 (内存空间) ,另一个是指向 ...
- mongodb-API
mongodb-API 连接mongo(该操作一般在初始化时就执行) 出现 由于目标计算机积极拒绝,无法连接的错误时 查看是否进行虚拟机的端口转发 将 /etc/ 目录下的mongodb.conf 文 ...
- BOM的补充
1.首先我们要知道BOM是干什么的? BOM和DOM.ES是JavaScript的重要三个组成部分: Bom的核心操作是window:简单来说就是用来操作浏览器的,他是js访问浏览器的接口,它里面封装 ...
- 操作mysql第一次访问速度慢（远程）
最近在使用java操作远程的mysql数据库的时候,第一次请求非常的慢,而且极其容易引起系统的崩溃报错连接超时 下面就这个问题来解决下把 ------------------------------- ...
- Consul初探-从安装到运行
前言 伟大领袖毛主席说过:实践是检验真理的唯一标准!经过上一篇的学习,我基本掌握了 Consul 的基本原理,接下来就是动手实践了:Consul 的部署方式分为两种,分别是二进制包和docker方式, ...
- VisualStudio编译不生成xml、pdb文件的方法
我们为了减少发布/Release时项目的体积,希望在编译时不生成xml注释文档(包括引用的其他类库),和pdb调试文件 用你喜欢的文本编辑器打开项目.csproj文件,找到PropertyGroup节 ...
- JPA的entityManager的find、getReference、persisit、remove方法的使用
场景 JPA入门简介与搭建HelloWorld(附代码下载): https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/103473937 ...
- delphi使用Chilkat 组件和库从SFTP下载文件
官网地址:https://www.example-code.com/delphiDll/default.asp 实例代码:(不包括全局解锁) 密码生成器:https://www.cnblogs.co ...