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

相关文章

Pandas统计每行数据中的空值的方法示例

《Pandas统计每行数据中的空值的方法示例》处理缺失数据(NaN值)是一个非常常见的问题,本文主要介绍了Pandas统计每行数据中的空值的方法示例,具有一定的参考价值,感兴趣的可以了解一下... 目录什么是空值?为什么要统计空值?准备工作创建示例数据统计每行空值数量进一步分析www.chinasem.cn处

如何使用 Python 读取 Excel 数据

《如何使用Python读取Excel数据》:本文主要介绍使用Python读取Excel数据的详细教程,通过pandas和openpyxl,你可以轻松读取Excel文件,并进行各种数据处理操... 目录使用 python 读取 Excel 数据的详细教程1. 安装必要的依赖2. 读取 Excel 文件3. 读

Spring 请求之传递 JSON 数据的操作方法

《Spring请求之传递JSON数据的操作方法》JSON就是一种数据格式,有自己的格式和语法,使用文本表示一个对象或数组的信息,因此JSON本质是字符串,主要负责在不同的语言中数据传递和交换,这... 目录jsON 概念JSON 语法JSON 的语法JSON 的两种结构JSON 字符串和 Java 对象互转

C++如何通过Qt反射机制实现数据类序列化

《C++如何通过Qt反射机制实现数据类序列化》在C++工程中经常需要使用数据类,并对数据类进行存储、打印、调试等操作,所以本文就来聊聊C++如何通过Qt反射机制实现数据类序列化吧... 目录设计预期设计思路代码实现使用方法在 C++ 工程中经常需要使用数据类,并对数据类进行存储、打印、调试等操作。由于数据类

SpringBoot使用GZIP压缩反回数据问题

《SpringBoot使用GZIP压缩反回数据问题》:本文主要介绍SpringBoot使用GZIP压缩反回数据问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录SpringBoot使用GZIP压缩反回数据1、初识gzip2、gzip是什么,可以干什么?3、Spr

SpringBoot集成Milvus实现数据增删改查功能

《SpringBoot集成Milvus实现数据增删改查功能》milvus支持的语言比较多,支持python,Java,Go,node等开发语言,本文主要介绍如何使用Java语言,采用springboo... 目录1、Milvus基本概念2、添加maven依赖3、配置yml文件4、创建MilvusClient

SpringValidation数据校验之约束注解与分组校验方式

《SpringValidation数据校验之约束注解与分组校验方式》本文将深入探讨SpringValidation的核心功能,帮助开发者掌握约束注解的使用技巧和分组校验的高级应用,从而构建更加健壮和可... 目录引言一、Spring Validation基础架构1.1 jsR-380标准与Spring整合1

MySQL 中查询 VARCHAR 类型 JSON 数据的问题记录

《MySQL中查询VARCHAR类型JSON数据的问题记录》在数据库设计中,有时我们会将JSON数据存储在VARCHAR或TEXT类型字段中,本文将详细介绍如何在MySQL中有效查询存储为V... 目录一、问题背景二、mysql jsON 函数2.1 常用 JSON 函数三、查询示例3.1 基本查询3.2

SpringBatch数据写入实现

《SpringBatch数据写入实现》SpringBatch通过ItemWriter接口及其丰富的实现,提供了强大的数据写入能力,本文主要介绍了SpringBatch数据写入实现,具有一定的参考价值,... 目录python引言一、ItemWriter核心概念二、数据库写入实现三、文件写入实现四、多目标写入

使用Python将JSON,XML和YAML数据写入Excel文件

《使用Python将JSON,XML和YAML数据写入Excel文件》JSON、XML和YAML作为主流结构化数据格式,因其层次化表达能力和跨平台兼容性,已成为系统间数据交换的通用载体,本文将介绍如何... 目录如何使用python写入数据到Excel工作表用Python导入jsON数据到Excel工作表用