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 ...
随机推荐
- 牛客国庆训练 H.千万别用树套树
链接https://ac.nowcoder.com/acm/contest/1108/H 国庆队内训练的题,当时还完全没思路,就没补.现在会树状数组了,倒是能想一想,不过网上题解好多用线段树传数组的? ...
- VS Code Remote，在服务器上开发程序，开启全新开发模式
一直使用Idea开发java 程序,头疼的是太太太占用内存了,笔记本电脑经常卡爆,在服务器开发的话又太麻烦,VS Code Remote的带来,解决了这一烦恼.下面来实战一下. VS Code Rem ...
- Mysql - 高可用方案之MMM(二)
一.概述 上一篇博客中(https://www.cnblogs.com/ddzj01/p/11535796.html)介绍了如何搭建MMM架构,本文将通过实验介绍MMM架构的优缺点. 二.优点 1. ...
- mysql创建用户后无法进入
说明 在mysql中添加用户: #mysql -u root -p >use mysql: >update user set password="" where use ...
- 使用“npm init”初始化项目
使用npm init初始化项目 为什么要使用npm init初始化项目 在node开发中使用npm init会生成一个pakeage.json文件,这个文件主要是用来记录这个项目的详细信息的,它会将我 ...
- centos7在线yum安装mysql时官方镜像下载过慢的解决方案
帮客户调试数据库,搭建一测试环境,centos7最小化安装后,在线安装mysql. 步骤: 1. wget -i http://dev.mysql.com/get/mysql57-community- ...
- redis cluster集群动态伸缩--删除主从节点
目标:从集群中剔除一组主从(5007,5008) 经过上一节增加5007,5008主从服务节点后,目前集群的情况是这样的: b3363a81c3c59d57143cd3323481259c044e66 ...
- 32(1).层次聚类---AGNES
层次聚类hierarchical clustering 试图在不同层次上对数据集进行划分,从而形成树形的聚类结构. 一. AGNES AGglomerative NESting:AGNES是一种常用的 ...
- 第二篇：C++画圆
安装GUI开发工具easyX #include <graphics.h>#include <Windows.h> int main(void) { initgraph(640, ...
- numpy函数查询手册
写了个程序,对Numpy的绝大部分函数及其说明进行了中文翻译. 原网址:https://docs.scipy.org/doc/numpy/reference/routines.html#routine ...