<!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>

normal曲线绘制的更多相关文章

  1. ROC曲线绘制

    ROC 曲线绘制 个人的浅显理解:1.ROC曲线必须是针对连续值输入的,通过选定不同的阈值而得到光滑而且连续的ROC曲线,故通常应用于Saliency算法评价中,因为可以选定0~255中任意的值进行阈 ...

  2. [转帖]MATLAB曲线绘制及颜色类型

    信号源产生的方法 来源:http://www.2cto.com/kf/201401/270494.html  matlab的checkerboard说明,GOOD! 来源:http://www.chi ...

  3. 三维机翼某一断面的压力系数X-Y曲线绘制——使用tecplot的extract功能

    目标:绘制三维物体表面或者某等值面上某一截断线上的压力系数X-Y曲线 Slices不光可以在一个体上切出来一个平面,还可以和一个面相交切出一条曲线,命令是在Slice Details里面的Slice ...

  4. matlab-非线性方程求根函数及函数曲线绘制

    Matlab中提供了很多求解非线性方程(y=f(x))的函数,刚開始使用,真的很困惑.全部.这里依据matlab的help文档对这些函数做一些小小的总结 fsolve函数 用来求解非线性方程组:F(x ...

  5. iOS 使用贝塞尔曲线绘制路径

    使用贝塞尔曲线绘制路径 大多数时候,我们在开发中使用的控件的边框是矩形,或者做一点圆角,是使得矩形的角看起来更加的圆滑. 但是如果我们想要一个不规则的图形怎么办?有人说,叫UI妹子做,不仅省事,还可以 ...

  6. n阶贝塞尔曲线绘制(C/C#)

    原文:n阶贝塞尔曲线绘制(C/C#) 贝塞尔是很经典的东西,轮子应该有很多的.求n阶贝塞尔曲线用到了 德卡斯特里奥算法(De Casteljau's Algorithm) 需要拷贝代码请直接使用本文最 ...

  7. 基于canvas二次贝塞尔曲线绘制鲜花

    canvas中二次贝塞尔曲线参数说明: cp1x:控制点1横坐标 cp1y:控制点1纵坐标 x: 结束点1横坐标 y:结束点1纵坐标 cp2x:控制点2横坐标 cp2y:控制点2纵坐标 z:结束点2横 ...

  8. OpenGL 实践之贝塞尔曲线绘制

    说到贝塞尔曲线,大家肯定都不陌生,网上有很多关于介绍和理解贝塞尔曲线的优秀文章和动态图. 以下两个是比较经典的动图了. 二阶贝塞尔曲线: 三阶贝塞尔曲线: 由于在工作中经常要和贝塞尔曲线打交道,所以简 ...

  9. [机器学习]-分类问题常用评价指标、混淆矩阵及ROC曲线绘制方法

    分类问题 分类问题是人工智能领域中最常见的一类问题之一,掌握合适的评价指标,对模型进行恰当的评价,是至关重要的. 同样地,分割问题是像素级别的分类,除了mAcc.mIoU之外,也可以采用分类问题的一些 ...

随机推荐

  1. http协议的队首阻塞

    1 队首阻塞 就是需要排队,队首的事情没有处理完的时候,后面的人都要等着. 2 http1.0的队首阻塞 对于同一个tcp连接,所有的http1.0请求放入队列中,只有前一个请求的响应收到了,然后才能 ...

  2. JVM的CPU资源占用过高问题的排查

    互联网后端架构 https://mp.weixin.qq.com/s/LiqAy2DikbmZzqogb5XRdA JVM的CPU资源占用过高问题的排查 互联网后端架构  今天 上午线上某应用的一台J ...

  3. 前端遇上Go: 静态资源增量更新的新实践

    前端遇上Go: 静态资源增量更新的新实践https://mp.weixin.qq.com/s/hCqQW1F8FngPPGZAisAWUg 前端遇上Go: 静态资源增量更新的新实践 原创: 洋河 美团 ...

  4. A toolbox to build your own build server

    A toolbox to build your own build server LambdaCD - Build Pipelines as Code https://www.lambda.cd/ A ...

  5. VS1053 datasheet 解读笔记

    pdf  10 pdf 11 ` 左右声道 负载,注意这里的负载指LEFT 到GBUF,RIGHT到GBUF.所以后面会有说明GBUF一定不能连接到GND. pdf 14 pdf 14 从上面的引脚定 ...

  6. 获取Android系统应用信息

    <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...

  7. MySQL安装、安装时未提示输入密码、如何修改密码小结

    http://blog.csdn.net/fr555wlj/article/details/54971412

  8. Silverlight中使用MVVM(1)

    Silverlight中使用MVVM(1)   Silverlight中使用MVVM(1)--基础 Silverlight中使用MVVM(2)—提高 Silverlight中使用MVVM(3)—进阶 ...

  9. hdu 3746 Cyclic Nacklace（next数组求最小循环节）

    题意:给出一串字符串,可以在字符串的开头的结尾添加字符,求添加最少的字符,使这个字符串是循环的(例如:abcab 在结尾添加1个c变为 abcabc 既可). 思路:求出最小循环节,看总长能不能整除. ...

  10. codeforces 690D2 D2. The Wall (medium)(组合数学)

    题目链接: D2. The Wall (medium) time limit per test 2 seconds memory limit per test 256 megabytes input ...