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

来源：互联网发布：mysql存储过程编辑：程序博客网时间：2024/05/23 20:25
源码
function getValues(){     var type = "TMP";        var apoint = arguments[4] ? arguments[4] : 20;// 设置参数point的默认值为20        var pdata = {            "point" : apoint        };          $.ajax({             type : "post",             async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）             url : "接口" + type,   //请求发送处             data : pdata,             dataType : "json",        //返回数据形式为json             success : 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));    }}
1 0