<!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. 基础才是重中之重~用好configSections让配置信息更规范

    对于小型项目来说,配置信息可以通过appSettings进行配置,而如果配置信息太多,appSettings显得有些乱,而且在开发人员调用时,也不够友好,节点名称很容易写错,这时,我们有几种解决方案 ...

  2. activemq的安装使用

    近期有项目中用到消息队列,JMS规范中实现最好的开源框架就是activemq.所以选择它(当然这是我老大决定的,像我这样的刚入职场的小菜鸟考虑问题还不太全面)作为消息队列数据传输.公司有有成型的消息队 ...

  3. BootStrap-DualListBox怎样改造成为双树

    BootStrap-DualListBox能够实现将所选择的列表项显示到右边,未选的列表项显示到左边. 但是左右两边的下拉框中都是单级列表.如果要实现将两边都是树(缩进树),选择某个节点时,其子节点也 ...

  4. C++中的const完全解析

    1. const修饰普通变量和指针 const修饰变量,一般有两种写法:const TYPE value;TYPE const value; 这两种写法在本质上是一样的.它的含义是:const修饰的类 ...

  5. 北斗有 35 颗卫星，而 GPS 有 24 颗卫星，为什么二者数量不同？

    作者:知乎用户链接:https://www.zhihu.com/question/21092045/answer/17164418来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注 ...

  6. Do not throw System.Exception, System.SystemException, System.NullReferenceException, or System.IndexOutOfRangeException intentionally from your own source code

    sonarqube的扫描结果提示 https://docs.microsoft.com/en-us/dotnet/csharp/programming-guide/exceptions/creatin ...

  7. UIFont 字体样式 [UIFont fontWithName~];

    设置字体样式代码:[UIFont fontWithName:@"Arial-BoldMT" size:15] 下边一一列举: 一:Font Family: American Typ ...

  8. Palindromic Squares

    链接 分析:求出b进制以后在判是否为回文 /* ID:wanghan PROB:palsquare LANG:C++ */ #include "iostream" #include ...

  9. [51nod 1129] 字符串最大值（kmp）

    传送门 题目大意 求一个字符串的前 缀出现次数乘以长度的最大值. 题解 暴力枚举每一个前缀求出现次数再乘以常数取最大 这样做会T几个点 看了老师的做法是任意前缀出现的次数,它的next也会出现这些次数 ...

  10. angularJS ng-bind用法

    ng-bind 指令绑定控制器函数 函数名() 到 标签里面 ; ng-bind是从$scope -> view的单向绑定ng-modle是$scope <-> view的双向绑定; ...