echart绘制直方图+正态分布曲线

金金金水水水

已于 2025-02-18 11:34:56 修改

阅读量5.6k

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript echarts html

于 2023-01-16 11:46:55 首次发布

本文链接：https://blog.youkuaiyun.com/wangjinicheng/article/details/128632805

本文介绍了如何使用Echarts库在HTML页面中绘制直方图，并结合正态分布曲线，展示了从类目轴转换为数值轴以优化显示效果的过程。通过index.html和index.js代码，详细解释了直方图与正态曲线的实现细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

echart绘制直方图+正态分布曲线

效果展示

在这里插入图片描述

echart

index.html代码

<!DOCTYPE html>
<html lang="zh-CN">
  <style>
    * {
     
      margin: 0;
      padding: 0;
    }
    #chart-container {
     
      position: relative;
      height: 100vh;
      overflow: hidden;
    }
    body {
     
      background: #12141e;
      background-size: cover;
      color: #666;
      font-size: 0.1rem;
      font-family: "微软雅黑";
    }
  </style>
  <head>
    <meta charset="utf-8" />
    <title>Basic Line Chart - Apache ECharts Demo</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <div id="chart-container"></div>
    <script src="https://fastly.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
    <script src="https://unpkg.com/mathjs/lib/browser/math.js"></script>
    <script src="./index.js"></script>
  </body>
</html>

index.js代码

var dom = document.getElementById("chart-container");
var myChart = echarts.init(dom, null, {
   
  renderer: "canvas",
  useDirtyRect: false
});
var app = {
   };

//正态分布计算
function func(x, u, a) {
   
  return (
    (1 / Math.sqrt(2 * Math.PI)) *
    a *
    Math.exp((-1 * ((x - u) * (x - u))) / (2 * a * a))
  );
}

var data = [
  "22.08",
  "22.08",
  "22.08",
  "22.08",
  "22.08",
  "22.07",
  "22.07",
  "22.07",
  "22.06",
  "22.06",
  "22.06",

最低0.47元/天解锁文章