normal曲线绘制

 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script src="./js/echarts.js"></script>
    <script>
        //    app.title = '多 X 轴示例';


//已知x轴上的点：
var leftx,
zero,
maxPos,
my,
rightx;

var xAxisData = [leftx,zero,maxPos,my,rightx]; //var xData = [-0.5, 0, 0.1, 0.4, 0.8];







// var xData = [leftx,zero,-leftx,];





//示例数据 var data1 = [[-0.5,5],[0,30],[0.1,90],[0.6,30],[0.8,5]];
// var data1 = [[-0.5,5],[0,30],[0.3,60]];
// var data2 = [[-0.5,5],[0,50],[0.1,90],[0.4,30],[0.8,5]];



var data1 = [5,50,90,30,5];
var data2 = [[-0.5,5],[0,50],[0.15,90],[0.4,30],[0.8,5]];

// var xData = [-0.5,0,0.15,0.4,0.8];
// var yData = [5,50,90,30,5];
//使用双坐标轴 绘制两遍：上面一个坐标轴使用category类型 下面使用type：value类型 （负的使用绿色 正的使用红色和上面使用category的红色重合）

// 正态分布
function normal(u,d,x){
    var PI = 3.1415926;
    var y = (1/(Math.sqrt(2*PI)*d))*Math.exp(-(x-u)*(x-u)/(2*d*d));
    y = y.toFixed(2);
    return y;
}
//计算方差

var data2= [];
var xData = [-0.5,0,0.15,0.4,0.8];

var u = 0.15, d = 0.16;  //均值 方差
for(var i=0,len=xData.length;i<len;i++){
    var x = xData[i];
     var y = normal(u,d,x);
    // var y = getY(x,u);
    data2.push([x,y]);
}

function getY(x,c){
    var y ;
    if(x-c>0){
      y= 1/(x-c);
    }else if(x==c){
        y = 1/0.0001;
    }else {
        y = -1/(x-c);
    }
    y = y.toFixed(2);
    return y;
}
function getCenterY(x){

}
console.log('data2',data2);


var colors = ['#5793f3', '#d14a61', '#675bba'];
var option = {
    color: colors,
    tooltip: {
        trigger: 'none',
        axisPointer: {
            type: 'cross'
        }
    },
    legend: {
        data:['line2 ']
    },
    // grid: {
    //     top: 70,
    //     bottom: 50
    // },
    xAxis: [
        {
            type: 'value',  //category  坐标轴在上方
            axisTick: {
                alignWithLabel: true
            },
            axisLine: {
                onZero: false,
                lineStyle: {
                    color: colors[1]
                }
            },
            axisPointer: {
                label: {
                    /*formatter: function (params) {
                        return '降水量  ' + params.value
                            + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
                    }*/
                }
            },
              // data: xData
        },

    ],
    yAxis: [
        {
            type: 'value',
            show:false
        }
    ],
      visualMap: {
         // type: 'continuous', // 定义为连续型 viusalMap
         show: false,
        dimension: 0,  //指明维度  [[x1,y1],[x2,y2],...]  0代表x1 x2   1代表y1,y2
        pieces: [{
            lte: 0,
            color: 'green'
        }, {
            gt: 0,
            lte: 1,
            color: 'red'
        }]
    },
    series: [
        {
            name:'line2',
            type:'line',
            smooth: "true",
            // xAxisIndex: 1,
            data: data2,   //[5,30,90,30,5],
            symbol: 'circle',
            symbolSize: 8,
            // color:"blue",
            // lineStyle:{
            //     color:"red",
            //     opacity:0.5
            // },
            itemStyle: {
            normal: {
                borderWidth: 0,
                borderColor:'' ,
                color: ''
            },
            emphasis: {
                label:{
                    show:true,
                },
                borderWidth: 0,
                borderColor:'' ,
                color: ''
            }
        },
             markPoint: {
                data: [
                    {
                     coord:[0.4,30],
                     value: '您的位置',
                     symbol:"rect",
                     symbolSize:[80,25],
                     symbolOffset:[45,-20]
                    }

                ]
            },
        }
    ]
};


  // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
         myChart.setOption(option);

    </script>
</body>
</html>
View Code

 

posted @ 2018-07-12 17:03  freewalker  阅读(305)  评论(0)    收藏  举报