<!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. Drupal 7模板（主题钩子）的建议

    这一块的内容很多其它的讲的是样例.所以这里请直接稳步官方站点查看吧.链接 https://drupal.org/node/1089656

  2. Android实现RecyclerView的下拉刷新和上拉载入很多其它

    需求 先上效果图, Material Design风格的下拉刷新和上拉载入很多其它. 源代码地址(欢迎star) https://github.com/studychen/SeeNewsV2 假设对于 ...

  3. Bootstrap progress-bar

    1.进度条 在网页中,进度条的效果并不少见,比如一个评分系统,比如加载状态等.就如下图所示的一个评分系统,他就是一个简单的进度条效果: 进度条和其他独立组件一样,开发者可以根据自己的需要,选择对应的版 ...

  4. ul li menu

    第一步:建立一个无序列表我们先建立一个无序列表,来建立菜单的结构.代码是: <ul><li><a href="1">首页</a>&l ...

  5. 简说 call() 、apply() 、bind()

    对于这三个方法,我想一部分人还是比较陌生的. 所以今天来个简单的介绍~ 我们可以将call()和apply()看作是某个对象的方法,通过调用方法的形式来间接调用函数.call()和apply()的第一 ...

  6. Android cookies正确的更新方式

    之前的更新方式 一搜cookies的使用,非常easy搜到非常多文章.主要的几步大致同样.例如以下图: 基本上都要求大家先调用cookieManager.removeAllCookie()或者调用 c ...

  7. bzoj4149: [AMPPZ2014]Global Warming

    头都烂了怎么头疼啊 考虑先做出对于一个位置以它作为唯一最小值的最远区间,这个可以单调栈上二分搞出来 那么对于一个位置这个区间而言,一定是选择这个区间的最大数是作为最终的唯一最大数最优的 为什么呢?我们 ...

  8. iOS在一个label中显示不同颜色的字体

    UILabel *Label = [[UILabel alloc] initWithFrame:CGRectMake(20, 300, 300, 30)]; NSMutableAttributedSt ...

  9. oracle报错ORA-01843: not a valid month

    转自:https://www.cnblogs.com/chonghaojie/p/9994625.html 客户端:select * from sys.nls_session_parameters;服 ...

  10. E20180502-hm

    inject vt. (给…)注射(药物等) ; (给…)注射(液体) ; (给…) 添加; (给…)投入(资金) ; reduce  vt. 减少; 缩小; 使还原; 使变弱;       vi. ...