Echarts3.0加载和订正气象格点数据

2024-03-22 02:59

本文主要是介绍Echarts3.0加载和订正气象格点数据,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

前言

主要是对气象格点数据的主观订正,分为两个方面:运用ajax调用接口数据;echarts3.0展示及修改数据。修改后的保存没有涉及,接口的制作没有。

  1. ajax调用数据
function getValues(){var type = "TMP";//取温度var apoint = arguments[4] ? arguments[4] : 20;// 设置参数point的默认值为20var pdata = {"point" : apoint}; $.ajax({type : "post",async : true,            //异步请求(同步请求将会锁住浏览器,用户其他操作必须等待请求完成才可以执行)url : 接口 + type,   //请求发送处data : pdata,dataType : "json",        //返回数据形式为jsonsuccess : function(result) {//请求成功时执行该函数内容,result即为服务器返回的json对象if (result) {           var pointsarr = result.points;//获取温度格点showTrend(pointsarr);//调用展示函数}},error:function(errorMsg) {//请求失败时执行该函数alert("图表请求数据失败!");}})}

2 . Echarts的设置
(1)折线图X,Y轴的设置

xAxis: [{type: 'category',splitNumber:24,//划分为24个间隔boundaryGap: false,data: categories,},axisLine:{//x轴的横坐标边框线show: false},axisTick:{show: false,},axisLabel:{show:true,textStyle:{fontSize:"8px",color:"black",align:"center"},formatter:function(e){return e;}},splitLine: {//x轴内置表格中“边框”的颜色线条 show: true,lineStyle:{color:"#e4e4e4",type:"solid",opacity:"0.75"}}}],yAxis: [{min: 6,max: 20,type: 'value',splitNumber: 7,axisLine:{show: true,lineStyle:{color:"#e4e4e4"}},axisTick:{show: false,},axisLabel:{show:true,textStyle:{fontSize:"8px",color:"black"}},splitLine: {//y轴内置表格中“边框”的颜色线条 show: true,lineStyle:{color:"#e4e4e4",type:"solid",opacity:"0.75"}}}],

(2)折线图网格的设置

series: [{id: 'a',type: 'line',smooth: true,symbolSize: symbolSize,lineStyle:{//折线的颜色normal: {color:"#1ba0fc",width:1,type:'solid',opacity:"0.75"},},areaStyle: {//颜色渐变normal: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'rgba(40, 182, 252, 0.85)'}, {offset: 1,color: 'rgba(28, 159, 255, 0.2)'}])}},itemStyle:{normal:{color:"#96BBCD",barBorderColor:"#FAFCFD",}},data: data //数据}],

(3)折线图“上下左右”位置的移动

grid:{left:20,top:10,bottom:20,right:10,show:true,borderColor:"#e4e4e4",//网格边框线shadowColor:"#e4e4e4",borderWidth:"0.2",containLabel: false} 

(4)echarts的setOption

myChart.setOption({graphic: echarts.util.map(data, function (item, dataIndex) {return {type: 'circle',position: myChart.convertToPixel('grid', item),shape: {r: symbolSize / 2,//拖拽圆点设置大小},invisible: true,draggable: true,ondrag: echarts.util.curry(onPointDragging, dataIndex),//调用拖拽函数onmousemove: echarts.util.curry(showTooltip, dataIndex),//鼠标移入显示数据onmouseout: echarts.util.curry(hideTooltip, dataIndex),//隐藏z: 100};})});window.addEventListener('resize', function () {myChart.setOption({graphic: echarts.util.map(data, function (item, dataIndex) {return {position: myChart.convertToPixel('grid', item)};})});});function showTooltip(dataIndex) {//显示鼠标移入圆圈点的数值myChart.dispatchAction({type: 'showTip',seriesIndex: 0,dataIndex: dataIndex});}function hideTooltip(dataIndex) {//隐藏myChart.dispatchAction({type: 'hideTip'});}function onPointDragging(dataIndex, dx, dy) {data[dataIndex] = myChart.convertFromPixel('grid', this.position);myChart.setOption({series: [{id: 'a',data: data}]});var dataValues = data;localStorage.setItem("data", JSON.stringify(dataValues));//修改后数据放入缓存}

测试效果图
结果

源码:由于篇幅太长,在同名的另一篇博客

这篇关于Echarts3.0加载和订正气象格点数据的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/834398

相关文章

Python获取中国节假日数据记录入JSON文件

《Python获取中国节假日数据记录入JSON文件》项目系统内置的日历应用为了提升用户体验,特别设置了在调休日期显示“休”的UI图标功能,那么问题是这些调休数据从哪里来呢?我尝试一种更为智能的方法:P... 目录节假日数据获取存入jsON文件节假日数据读取封装完整代码项目系统内置的日历应用为了提升用户体验,

Spring Boot 配置文件之类型、加载顺序与最佳实践记录

《SpringBoot配置文件之类型、加载顺序与最佳实践记录》SpringBoot的配置文件是灵活且强大的工具,通过合理的配置管理,可以让应用开发和部署更加高效,无论是简单的属性配置,还是复杂... 目录Spring Boot 配置文件详解一、Spring Boot 配置文件类型1.1 applicatio

Java利用JSONPath操作JSON数据的技术指南

《Java利用JSONPath操作JSON数据的技术指南》JSONPath是一种强大的工具,用于查询和操作JSON数据,类似于SQL的语法,它为处理复杂的JSON数据结构提供了简单且高效... 目录1、简述2、什么是 jsONPath?3、Java 示例3.1 基本查询3.2 过滤查询3.3 递归搜索3.4

MySQL大表数据的分区与分库分表的实现

《MySQL大表数据的分区与分库分表的实现》数据库的分区和分库分表是两种常用的技术方案,本文主要介绍了MySQL大表数据的分区与分库分表的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有... 目录1. mysql大表数据的分区1.1 什么是分区?1.2 分区的类型1.3 分区的优点1.4 分

Mysql删除几亿条数据表中的部分数据的方法实现

《Mysql删除几亿条数据表中的部分数据的方法实现》在MySQL中删除一个大表中的数据时,需要特别注意操作的性能和对系统的影响,本文主要介绍了Mysql删除几亿条数据表中的部分数据的方法实现,具有一定... 目录1、需求2、方案1. 使用 DELETE 语句分批删除2. 使用 INPLACE ALTER T

Python Dash框架在数据可视化仪表板中的应用与实践记录

《PythonDash框架在数据可视化仪表板中的应用与实践记录》Python的PlotlyDash库提供了一种简便且强大的方式来构建和展示互动式数据仪表板,本篇文章将深入探讨如何使用Dash设计一... 目录python Dash框架在数据可视化仪表板中的应用与实践1. 什么是Plotly Dash?1.1

Redis 中的热点键和数据倾斜示例详解

《Redis中的热点键和数据倾斜示例详解》热点键是指在Redis中被频繁访问的特定键,这些键由于其高访问频率,可能导致Redis服务器的性能问题,尤其是在高并发场景下,本文给大家介绍Redis中的热... 目录Redis 中的热点键和数据倾斜热点键(Hot Key)定义特点应对策略示例数据倾斜(Data S

Python实现将MySQL中所有表的数据都导出为CSV文件并压缩

《Python实现将MySQL中所有表的数据都导出为CSV文件并压缩》这篇文章主要为大家详细介绍了如何使用Python将MySQL数据库中所有表的数据都导出为CSV文件到一个目录,并压缩为zip文件到... python将mysql数据库中所有表的数据都导出为CSV文件到一个目录,并压缩为zip文件到另一个

SpringBoot项目启动报错"找不到或无法加载主类"的解决方法

《SpringBoot项目启动报错找不到或无法加载主类的解决方法》在使用IntelliJIDEA开发基于SpringBoot框架的Java程序时,可能会出现找不到或无法加载主类com.example.... 目录一、问题描述二、排查过程三、解决方案一、问题描述在使用 IntelliJ IDEA 开发基于

SpringBoot整合jasypt实现重要数据加密

《SpringBoot整合jasypt实现重要数据加密》Jasypt是一个专注于简化Java加密操作的开源工具,:本文主要介绍详细介绍了如何使用jasypt实现重要数据加密,感兴趣的小伙伴可... 目录jasypt简介 jasypt的优点SpringBoot使用jasypt创建mapper接口配置文件加密