echarts 风向图表

注意事项

数据传入之前先按时间顺序做好排序，否则节点之间会按传入的顺序进行连接，与时间轴没办法对应。

1.页面效果

2.jsp代码

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head><meta charset="utf-8"><title>ECharts</title><!-- 引入 echarts.js --><script src="echarts.js"></script><script src="${pageContext.request.contextPath }/plug-in/jquery/jquery-1.9.1.js"></script><link rel="stylesheet" type="text/css"href="observe.css"/>
</head>
<body><!-- 为ECharts准备一个具备大小（宽高）的Dom --><div class="wrapper11"><div class="switch_box box_1"><input type="checkbox" id="istoday" class="switch_1"></div></div><div id="main" style="width: 100%;height:100%;"></div><script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));var flag=1;
$("#istoday").change(function() {
if(flag==1){
loadmap("${pageContext.request.contextPath}/swspObserveController.do?queryToday");
}else{
loadmap("${pageContext.request.contextPath}/swspObserveController.do?queryAllList");
}
flag=(-1)*flag;
console.log(flag);
});$(function(){
loadmap("${pageContext.request.contextPath}/swspObserveController.do?queryAllList");
});function getLocalTime (unixtimestamp){var unixtimestamp = new Date(unixtimestamp);var year = 1900 + unixtimestamp.getYear();var month = "0" + (unixtimestamp.getMonth() + 1);var date = "0" + unixtimestamp.getDate();var hour = "0" + unixtimestamp.getHours();var minute = "0" + unixtimestamp.getMinutes();var second = "0" + unixtimestamp.getSeconds();return year + "-" + month.substring(month.length-2, month.length)  + "-" + date.substring(date.length-2, date.length)+ " " + hour.substring(hour.length-2, hour.length) + ":"+ minute.substring(minute.length-2, minute.length);}
var loadmap=function(url){$.ajax({  type:"get", async : false,/* url:"${pageContext.request.contextPath}/swspObserveController.do?queryAllList",  */url:url,success:function(rawData){console.log(url);var alldata= JSON.parse(rawData);for(var i=0;i<alldata.length;i++){/* var unixTimestamp = new Date(data.publicTime);data.publicTime = unixTimestamp.toLocaleString(); */alldata[i].publicTime=getLocalTime(alldata[i].publicTime);}var directionMap = {};echarts.util.each(['1', '2', '3', '4', '5', '6', '7', '8'],function (name, index) {directionMap[name] = Math.PI / 4 * index;});var data = echarts.util.map(JSON.parse(rawData), function (entry) {return [entry.publicTime, entry.windPower, entry.windDirection,entry.temperature,entry.humidity,entry.precipitation,entry.atmosphericPressure];});var dims = {publicTime: 0,windPower: 1,windDirection: 2,temperature: 3,humidity:4,   //湿度precipitation:5,//降水量atmosphericPressure:6 //气压};var arrowSize = 18;function renderArrow(param, api) {var point = api.coord([api.value(dims.publicTime),api.value(dims.windPower)]);return {type: 'path',shape: {pathData: 'M31 16l-15-15v9h-26v12h26v9z',x: -arrowSize / 2,y: -arrowSize / 2,width: arrowSize,height: arrowSize},rotation: directionMap[api.value(dims.windDirection)],position: point,style: api.style({stroke: '#555',lineWidth: 1})};}option = {title: {text: '实况监测',left: 'center'},tooltip: {trigger: 'axis',formatter: function (params) {return [echarts.format.formatTime('yyyy/MM/dd', getLocalTime(params[0].value[dims.publicTime])) + ' ' + echarts.format.formatTime('hh:mm', params[0].value[dims.publicTime]) ,'风速：' + params[0].value[dims.windPower],'风向：' + params[0].value[dims.windDirection],'温度：' + params[0].value[dims.temperature],'湿度：' + params[0].value[dims.humidity],'降水量：' + params[0].value[dims.precipitation],'气压：' + params[0].value[dims.atmosphericPressure],].join('<br>');}},       legend: {top:40,data:['温度','湿度','风力','风向','气压','降水量']},toolbox: {feature: {saveAsImage: {}}},grid: {top: 160,bottom: 125},xAxis: {type: 'time',maxInterval: 3600 * 1000*24,splitLine: {lineStyle: {color: '#ddd'}}},yAxis: [{name: '风速（节）',nameLocation: 'middle',nameGap: 35,axisLine: {lineStyle: {color: '#666'}},splitLine: {lineStyle: {color: '#ddd'}}}, {name: '温度',nameLocation: 'end',nameGap: 35,axisLine: {lineStyle: {color: '#FF1493'}},splitLine: {show: false}},{name: '湿度',offset:25,nameLocation: 'start',nameGap: 35,axisLine: {lineStyle: {color: '#483D8B'}},splitLine: {show: false}},{name: '降水量',offset:50,nameLocation: 'end',nameGap: 35,axisLine: {lineStyle: {color: '#00BFFF'}},splitLine: {show: false}},{name: '气压',offset:75,nameLocation: 'start',nameGap: 35,axisLine: {lineStyle: {color: '#778899'}},splitLine: {show: false}},{axisLine: {show: false},axisTick: {show: false},axisLabel: {show: false},splitLine: {show: false}}],visualMap: {type: 'piecewise',// show: false,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: 1,dimension: 1},dataZoom: [{type: 'inside',xAxisIndex: 0,minSpan: 5}, {type: 'slider',xAxisIndex: 0,minSpan: 5,height: 20,bottom: 50,handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',handleSize: '120%'}],series: [{name:"气压",type: 'line',yAxisIndex: 4,showSymbol: false,hoverAnimation: false,symbolSize: 10,lineStyle: {normal: {color: '#778899',type: 'solid'}},/*   areaStyle: {normal: {color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0, color: 'rgba(88,160,253,1)'}, {offset: 0.5, color: 'rgba(88,160,253,0.7)'}, {offset: 1, color: 'rgba(88,160,253,0)'}]}}}, lineStyle: {normal: {color: 'rgba(88,160,253,1)'}},itemStyle: {normal: {color: 'rgba(88,160,253,1)'}}, */encode: {x: dims.publicTime,y: dims.atmosphericPressure},data: data,z: 2}, {name:"风向",type: 'custom',           //风向renderItem: renderArrow,encode: {x: dims.publicTime,y: dims.windPower},data: data,z: 10},  {name:"湿度",type: 'line',     //湿度yAxisIndex:2,symbol: 'none',encode: {x: dims.publicTime,y: dims.humidity},lineStyle: {normal: {color: '#483D8B',type: 'solid'}},data: data,z: 1},  {name:"降水量",type: 'line',      //降水量yAxisIndex:3,symbol: 'none',encode: {x: dims.publicTime,y: dims.precipitation},lineStyle: {normal: {color: '#00BFFF',type: 'solid'}},data: data,z: 1},  {name:"温度",type: 'line',     //温度yAxisIndex:1,symbol: 'none',encode: {x: dims.publicTime,y: dims.temperature},lineStyle: {normal: {color: '#FF1493',type: 'solid'}},data: data,z: 1},{ name:"风力",type: 'line', //风力symbol: 'none',encode: {x: dims.publicTime,y: dims.windPower},lineStyle: {normal: {color: '#aaa',type: 'dotted'}},data: data,z: 1}]};myChart.setOption(option);}});}  </script>
</body>
</html>

3.数据

echarts 风向图表相关推荐

JS实现Echarts的图表保存为图片功能
文章目录需求分析开发准备实现思路效果图参考链接需求分析实际项目开发过程中经常会有图表展示功能,同时为了满足用户需要,会附带着图表导出功能,主要形式就是保存为图片.在Echarts中本身就 ...
knockout+echarts实现图表展示
一.需要学习的知识 knockout, require, director, echarts, jquery.简单的入一下门,网上的资料很多,最直接就是进官网校习. 二.效果展示三.require的 ...
ECharts 常用图表一看即会「散点图」「饼图」「地图」「雷达图」「仪表盘」
文接上篇 ECharts 入门知识 ECharts 入门真的很简单 ,本文继续介绍 ECharts 常用图表相关内容. 一.散点图散点图多用于推断不同维度数据之间的相关性,如下图判断身高体重相关性散 ...
在jsp中使用ECharts制作图表
ECharts插件的下载地址http://echarts.baidu.com/download.html 先来看看我们要达到的效果!后面直接上代码,如下图: 下面直接贴上代码我们这里写的都是些死的数 ...
echarts 实现图表缩放功能 dataZoom自带属性实现
echarts 实现图表缩放功能亲测有效,dataZoom自带属性实现图表数据过多展示起来密密麻麻看不到细节,需要实现缩放这确实是实现了缩放,但是需求是标尺进行缩放,我们可以添加如下属性图表数 ...
ECharts动态图表展示
1.首先简要的介绍一下Echarts: ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯javascript的图标库,兼容当前绝大多数浏览器,提供直观,生动,可交互, ...
Apache Echarts常用图表之柱状图
文章目录 Echarts常用图表柱状图 1. 柱状图的实现步骤 2. 柱状图的常见效果最大值\最小值 `markPoint` 平均值 `markLine` 数值显示 `label` 柱宽度 `ba ...
Chart.js与ECharts.js图表组件对比与使用
Chart.js与ECharts.js图表组件对比与使用常用的图表组件 Chart.js与ECharts.js的简要介绍与使用. Chart.js Chart.js官方网址.里面包括文档.例子和G ...
echarts数据传输图表
echarts数据传输图表样式如下: 全部代码打包下载: https://download.csdn.net/download/qq_32442967/11237344 代码: index.html ...

echarts 风向图表

echarts 风向图表相关推荐

最新文章

热门文章