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

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

源码

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("图表请求数据失败!");}})}function showTrend(pointsarr){var symbolSize = 10;var categories = ['1h','2h','3h','4h','5h','6h','7h','8h','9h','10h','11h','12h','13h','14h','15h','16h','17h','18h','19h','20h','21h','22h','23h','24h'];//类别数组（x轴值）  var data = [[0, pointsarr[0].value], [1, pointsarr[1].value], [2, pointsarr[2].value], [3, pointsarr[3].value], [4, pointsarr[4].value], [5, pointsarr[5].value], [6, pointsarr[6].value], [7, pointsarr[7].value], [8, pointsarr[8].value], [9, pointsarr[9].value], [10, pointsarr[10].value]];//y轴数值var myChart = echarts.init(document.getElementById('trendRight'));myChart.setOption({tooltip: {triggerOn: 'none',formatter: function (params) {return 'X: ' + params.data[0].toFixed(2) + '<br>Y: ' + params.data[1].toFixed(2);}},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: {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: {show: true,lineStyle:{color:"#e4e4e4",type:"solid",opacity:"0.75"}}}],lineStyle: {normal: {type: 'solid',color:"#28a5fc",opacity :"0.75"}},series: [{id: 'a',type: 'line',smooth: true,symbolSize: symbolSize,lineStyle:{//折线的颜色normal: {color:"#1ba0fc",width:1,type:'solid',opacity:"0.75"//shadowBlur:80},},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}],grid:{left:20,top:10,bottom:20,right:10,show:true,borderColor:"#e4e4e4",//网格边框线shadowColor:"#e4e4e4",borderWidth:"0.2",containLabel: false} });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));}
}