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

源码

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));
    }
}

A year and a half year ago, I published this article to the Codeguru site and got a number of requests about the Kriging algorithm contour map. Unfortunately, my project was changed shortly after that article and later I quit the company so I couldn‘t find time to finish this Contour business. A week ago, I happened to need a contour map again so I decided to solve the Kriging algorithm. I searched the Internet for a commercial library but they all look ugly and hard to use. So, I made up my mind to make my own algorithm. The Kriging algorithm is easy to find, but this algorithm needs a Matrix and solver (LU-Decomposition). Again, I couldn‘t find suitable code for this. I tried to use GSL first but this made my code too big and was slower. Finally, I went back to "Numerical Recipe in C"—yes, that horrible-looking C code—and changed the code there to my taste.If you read this article before, the rendering part hasn‘t been changed much. I added the Kriging algorithm and revised the codes a little bit. Following is the Kriging Algorithm:templatedouble GetDistance(const ForwardIterator start, int i, int j){ return ::sqrt(::pow(((*(start+i)).x - (*(start+j)).x), 2) + ::pow(((*(start+i)).y - (*(start+j)).y), 2));}templatedouble GetDistance(double xpos, double ypos, const ForwardIterator start, int i){ return ::sqrt(::pow(((*(start+i)).x - xpos), 2) + ::pow(((*(start+i)).y - ypos), 2));}templateclass TKriging : public TInterpolater{public: TKriging(const ForwardIterator first, const ForwardIterator last, double dSemivariance) : m_dSemivariance(dSemivariance) { m_nSize = 0; ForwardIterator start = first; while(start != last) { ++m_nSize; ++start; } m_matA.SetDimension(m_nSize, m_nSize); for(int j=0; j<m_nSize; j++) { for(int i=0; i<m_nSize; i++) { if(i == m_nSize-1 || j == m_nSize-1) { m_matA(i, j) = 1; if(i == m_nSize-1 && j == m_nSize-1) m_matA(i, j) = 0; continue; } m
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值