<!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. centos笔记-安装特定版本的mysql

    centos6的yum默认安装的mysql是5.1版, 如果要安装5.6.16 版,有三个办法 1.yum方式, 这个方式的好处是通过yum安装卸载都很方便,坏处是版本无法详细制定,比如官方版本yum ...

  2. bash的pushd和popd

    1 pushd和popd是bash shell的builtin命令 2 pushd和popd维护了一个目录栈 pushd xxx就是将xxx放入目录栈顶. 目录栈顶就是当前的目录. 但是cd的话,会不 ...

  3. hive impala C++ Java垃圾回收 Garbage Collection GC

    hive impala impala  推荐每个节点内存  2^7~2^8GB Impala与Hive的比较 - 文章 - 伯乐在线 http://blog.jobbole.com/43233/ &l ...

  4. 在Java中如何正确地终止一个线程

    1.使用Thread.stop()? 极力不推荐此方式,此函数不安全且已废弃,具体可参考Java API文档 2.设置终止标识,例如: import static java.lang.System.o ...

  5. 教你如何配置Ubuntu用于高效、高质量的发送邮件

    本文首发在: http://mengxi.me/how-to-setup-ubuntu-sendmail-to-deliver-email-fast-and-reliable/ 在网站上线后,经常会遇 ...

  6. HDU 3714/UVA1476 Error Curves

    Error Curves Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Tota ...

  7. POJ3660 Cow Contest —— Floyd 传递闭包

    题目链接:http://poj.org/problem?id=3660 Cow Contest Time Limit: 1000MS   Memory Limit: 65536K Total Subm ...

  8. codeforces 441C. Valera and Tubes 解题报告

    题目链接:http://codeforces.com/problemset/problem/441/C 题目意思:将n * m 的矩阵分成 k 堆.每堆是由一些坐标点(x, y)组成的.每堆里面至少由 ...

  9. hadoop-3.0.0-alpha4启动

    全部启动或者全部停止(注意:第一次启动需要先格式,以后就不需要格式了,不能多次格式化) 1.启动 [root@master sbin]# pwd /usr/hadoop/hadoop-3.0.0-al ...

  10. UVA-11462 (计数排序)

    题意: 2e6个数,按从小到大的顺序输出; 思路: 计数排序; AC代码: #include <bits/stdc++.h> /* #include <vector> #inc ...