1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <body>
  8.     <div id="main" style="width: 600px;height:400px;"></div>
  9.     <script src="./js/echarts.js"></script>
  10.     <script>
  11.         //    app.title = '多 X 轴示例';
  12.  
  13. //已知x轴上的点：
  14. var leftx,
  15. zero,
  16. maxPos,
  17. my,
  18. rightx;
  19.  
  20. var xAxisData = [leftx,zero,maxPos,my,rightx]; //var xData = [-0.5, 0, 0.1, 0.4, 0.8];
  21.  
  22. // var xData = [leftx,zero,-leftx,];
  23.  
  24. //示例数据 var data1 = [[-0.5,5],[0,30],[0.1,90],[0.6,30],[0.8,5]];
  25. // var data1 = [[-0.5,5],[0,30],[0.3,60]];
  26. // var data2 = [[-0.5,5],[0,50],[0.1,90],[0.4,30],[0.8,5]];
  27.  
  28. var data1 = [5,50,90,30,5];
  29. var data2 = [[-0.5,5],[0,50],[0.15,90],[0.4,30],[0.8,5]];
  30.  
  31. // var xData = [-0.5,0,0.15,0.4,0.8];
  32. // var yData = [5,50,90,30,5];
  33. //使用双坐标轴 绘制两遍：上面一个坐标轴使用category类型 下面使用type：value类型 （负的使用绿色 正的使用红色和上面使用category的红色重合）
  34.  
  35. // 正态分布
  36. function normal(u,d,x){
  37.     var PI = 3.1415926;
  38.     var y = (1/(Math.sqrt(2*PI)*d))*Math.exp(-(x-u)*(x-u)/(2*d*d));
  39.     y = y.toFixed(2);
  40.     return y;
  41. }
  42. //计算方差
  43.  
  44. var data2= [];
  45. var xData = [-0.5,0,0.15,0.4,0.8];
  46.  
  47. var u = 0.15, d = 0.16;  //均值 方差
  48. for(var i=0,len=xData.length;i<len;i++){
  49.     var x = xData[i];
  50.      var y = normal(u,d,x);
  51.     // var y = getY(x,u);
  52.     data2.push([x,y]);
  53. }
  54.  
  55. function getY(x,c){
  56.     var y ;
  57.     if(x-c>0){
  58.       y= 1/(x-c);
  59.     }else if(x==c){
  60.         y = 1/0.0001;
  61.     }else {
  62.         y = -1/(x-c);
  63.     }
  64.     y = y.toFixed(2);
  65.     return y;
  66. }
  67. function getCenterY(x){
  68.  
  69. }
  70. console.log('data2',data2);
  71.  
  72. var colors = ['#5793f3', '#d14a61', '#675bba'];
  73. var option = {
  74.     color: colors,
  75.     tooltip: {
  76.         trigger: 'none',
  77.         axisPointer: {
  78.             type: 'cross'
  79.         }
  80.     },
  81.     legend: {
  82.         data:['line2 ']
  83.     },
  84.     // grid: {
  85.     //     top: 70,
  86.     //     bottom: 50
  87.     // },
  88.     xAxis: [
  89.         {
  90.             type: 'value',  //category  坐标轴在上方
  91.             axisTick: {
  92.                 alignWithLabel: true
  93.             },
  94.             axisLine: {
  95.                 onZero: false,
  96.                 lineStyle: {
  97.                     color: colors[1]
  98.                 }
  99.             },
  100.             axisPointer: {
  101.                 label: {
  102.                     /*formatter: function (params) {
  103.                         return '降水量  ' + params.value
  104.                             + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
  105.                     }*/
  106.                 }
  107.             },
  108.               // data: xData
  109.         },
  110.  
  111.     ],
  112.     yAxis: [
  113.         {
  114.             type: 'value',
  115.             show:false
  116.         }
  117.     ],
  118.       visualMap: {
  119.          // type: 'continuous', // 定义为连续型 viusalMap
  120.          show: false,
  121.         dimension: 0,  //指明维度  [[x1,y1],[x2,y2],...]  0代表x1 x2   1代表y1,y2
  122.         pieces: [{
  123.             lte: 0,
  124.             color: 'green'
  125.         }, {
  126.             gt: 0,
  127.             lte: 1,
  128.             color: 'red'
  129.         }]
  130.     },
  131.     series: [
  132.         {
  133.             name:'line2',
  134.             type:'line',
  135.             smooth: "true",
  136.             // xAxisIndex: 1,
  137.             data: data2,   //[5,30,90,30,5],
  138.             symbol: 'circle',
  139.             symbolSize: 8,
  140.             // color:"blue",
  141.             // lineStyle:{
  142.             //     color:"red",
  143.             //     opacity:0.5
  144.             // },
  145.             itemStyle: {
  146.             normal: {
  147.                 borderWidth: 0,
  148.                 borderColor:'' ,
  149.                 color: ''
  150.             },
  151.             emphasis: {
  152.                 label:{
  153.                     show:true,
  154.                 },
  155.                 borderWidth: 0,
  156.                 borderColor:'' ,
  157.                 color: ''
  158.             }
  159.         },
  160.              markPoint: {
  161.                 data: [
  162.                     {
  163.                      coord:[0.4,30],
  164.                      value: '您的位置',
  165.                      symbol:"rect",
  166.                      symbolSize:[80,25],
  167.                      symbolOffset:[45,-20]
  168.                     }
  169.  
  170.                 ]
  171.             },
  172.         }
  173.     ]
  174. };
  175.  
  176.   // 基于准备好的dom，初始化echarts实例
  177.         var myChart = echarts.init(document.getElementById('main'));
  178.          myChart.setOption(option);
  179.  
  180.     </script>
  181. </body>
  182. </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. XHTML中button加入超链接以及使插入图片与屏幕一样大

    1.button加入超链接 (1)假设是在本页跳转到新页面.用 <span style="font-size:18px;"><input type="b ...

  2. DRF 之 认证组件

    1.认证的作用? 我们知道,当我们在网站上登陆之后,就会有自己的个人中心,之类的可以对自己的信息进行修改.但是http请求又是无状态的,所以导致我们每次请求都是一个新的请求,服务端每次都需要对请求进行 ...

  3. $.ajax 使用详解

    Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作. $.post.$.get是一些简单的方法,如果要处理复杂的逻辑,还是需要用到jQuery.ajax() ...

  4. react项目中的注意点

    一.ES6 的编译方法 目前主流的浏览器还不支持ES6. 现在一般采用webpack 和 <script type="text/babel">对jsx  语法进行编译, ...

  5. POJ1459 Power Network —— 最大流

    题目链接:https://vjudge.net/problem/POJ-1459 Power Network Time Limit: 2000MS   Memory Limit: 32768K Tot ...

  6. 解决virtualbox安装增强工具失败的问题

    virtualbox有个增强工具,安装之后用户体验是非常爽的.但是有些时候在安装增强工具会遇到一些小问题,无非是没有安装gcc,make之类的编译工具或是需要安装kernel*.而我遇到的问题在做了这 ...

  7. YTU 2452: 麦克劳林用于函数求值

    2452: 麦克劳林用于函数求值 时间限制: 1 Sec  内存限制: 128 MB 提交: 18  解决: 12 题目描述 泰勒公式是一个用函数在某点的信息描述其附近取值的公式.如果函数足够光滑的话 ...

  8. [POI2007] 大都市

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1103 [算法] 树链剖分 时间复杂度 : O(NlogN ^ 2) [代码] #in ...

  9. mac下载模块时报错OSError: [Errno 13] Permission denied: '/Library/Python/2.7/site-packages/chardet'

    原文地址:https://www.cnblogs.com/liangyan-1989/p/8143129.html 安装完pip后,使用pip install selenium报以下错 OSError ...

  10. Code：log4

    ylbtech-Code:log4 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部 0. http://logging.apache.org/log4net/ 0 ...