<!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. 【健康生活】Google、百度之间的选择

    没有什么技术性的分析,仅仅是个人吐槽而已. 一般人遇到问题就会说一句"百度一下",说实话,百度在中国推广的真的非常不错,可谓是家喻户晓,搜索个八卦新闻,小文章,小电影什么的的确非常 ...

  2. Java核心技术之基本数据类型

    这篇文章.我们讨论一些java的最主要的东西.这些东西我们一般刚刚学java的时候就学过,可是不一定真正明确. 正好,我在做一个读取内存的值,涉及到bit位的值的读取和写.那就能够讨论一个java的基 ...

  3. 文件宝局域网传输/播放功能Windows10系统经验贴（感谢文件宝用户@卡卡罗特 和@24K 純情）

    本文由文件宝用户@卡卡罗特 和@24K 純情 两位用户提供,感谢二位. 先分享一个软件开发者的博客,http://www.cnblogs.com/flychen/也许里面的说明就能解决你的问题. 以下 ...

  4. numpy计算

    import numpy as np import cv2 from PIL import Image #lenna.jpg # Create a black image #img=np.zeros( ...

  5. MIPS 指令集将在近期开源，RISC-V 阵营慌吗？

    消息称,MIPS 指令集即将开源. eetimes 17 日报导,Wave Computing 公司表示,在明年第一季度发布最新 MIPS 指令集体系和 MIPS 最新内核 R6 的时候将开源 MIP ...

  6. virtualbox创建centos7虚拟机

    安装Virtualbox 下载安装: 直接到官网上下载,https://www.virtualbox.org/wiki/Downloads 然后一键傻瓜式的安装即可. 设置默认虚拟电脑位置: 管理=& ...

  7. repo 工具下载 以及 android代码下载【转】

    本文转载自:http://www.enjoydiy.com/608.html 我们可以从https://www.codeaurora.org/网站下载android源码. 具体方法如下: 下载repo ...

  8. html5--6-6 CSS选择器3

    html5--6-6 CSS选择器3 实例 学习要点 掌握常用的CSS选择器 了解不太常用的CSS选择器 什么是选择器 当我们定义一条样式时候,这条样式会作用于网页当中的某些元素,所谓选择器就是样式作 ...

  9. C++数组作为函数参数的几个问题（转）

    本文需要解决C++中关于数组的2个问题:1. 数组作为函数参数,传值还是传址?2. 函数参数中的数组元素个数能否确定? 先看下面的代码. #include <iostream> using ...

  10. 书写优雅的shell脚本(插曲) - kill

    shell之kill.killall.xkill.pkill 2013-01-08 22:03:28|  分类: Linux|举报|字号订阅 1 kill kill的应用是和ps 或pgrep 命令结 ...