normal曲線繪製

時間 2019-12-08
標籤 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
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。