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 ...
随机推荐
- Jmeter 查看结果树之界面功能介绍 [8]
查看结果树显示所有请求响应的树,通过它可以查看任何请求的响应.除了显示响应之外,还可以查看获取响应所花费的时间以及一些响应代码.需要通过"查看结果树"来查看服务器处理请求之后的返回 ...
- Java 添加超链接到Word文档
对特定元素添加超链接后,用户可以通过点击被链接的元素来激活这些链接,通常在被链接的元素下带有下划线或者以不同的颜色显示来进行区分.按照使用对象的不同,链接可以分为文本超链接,图像超链接,E-mail链 ...
- 如何让create-react-app锦上添花，满足实际需求？
目录 前端部分 后端部分 create-react-app 是 React 官方为我们提供的一个单页应用脚手架,基于 webpack 配置了相关功能,babel. 图片处理.热加载.css 模块化.c ...
- PHP 是如何做垃圾回收的
PHP 是如何做垃圾回收的 包含 php 5 与 php7 的变量实现和垃圾回收的对比 变量的实现 PHP 的变量是弱类型的,可以表示整数.浮点数.字符串等类型.PHP 的变量是使用结构体 zval ...
- DotNet Core中使用RabbitMQ
上一篇随笔记录到RabbitMQ的安装,安装完成,我们就开始使用吧. RabbitMQ简介 AMQP,即Advanced Message Queuing Protocol,高级消息队列协议,是应用层协 ...
- C# 程序一个cmd命令窗口执行多条dos命令
1,前几天的项目要用到程序执行dos命令去编译已生成的ice文件,后来去百度了好多都是只能执行一条命令 或者是分别执行几条命令,而我要的是一条dos命令在另一台命令的基础上执行.而不是分别执行. 后来 ...
- Kotlin版Aspect入门篇
介绍: AspectJ是一个面向切面编程的一个框架,它扩展了java语言,并定义了实现AOP的语法.在将.java文件编译为.class文件时默认使用javac编译工具,AspectJ会有一套符合ja ...
- 分布式全局唯一ID生成策略
一.背景 分布式系统中我们会对一些数据量大的业务进行分拆,如:用户表,订单表.因为数据量巨大一张表无法承接,就会对其进行分库分表. 但一旦涉及到分库分表,就会引申出分布式系统中唯一主键ID的生成问题. ...
- 好程序员web前端分享前端学习路线自学如何找到工作
好程序员web前端分享前端学习路线自学如何找到工作,自学能不能学会WEB前端并且找到WEB前端开发岗位的工作取决于自身条件,如果基础好,自律性强那么将会容易很多,还有就是自学最难克服的并不是知识点,而 ...
- 大数据基础--R语言（刘鹏《大数据》课后习题答案）
1.R语言是解释性语言还是编译性语言? 解释性语言 2.简述R语言的基本功能. R语言是一套完整的数据处理.计算和制图软件系统,主要包括以下功能: (1)数据存储和处理功能,丰富的数据读取与存 ...