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

效果展示
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","22.06","22.04","22.04","22.04","22.02","22.02","22.02","22.02","22.00","22.00","22.00","22.00","22.00","22.00","21.99","21.99","21.99","21.99","21.99","21.99","21.99","21.99","21.99","21.99","21.98","21.98","21.98","21.98","21.98","21.98","21.98","21.98","21.98","21.98","21.98","21.98","21.98","21.98","21.98","21.97","21.97","21.97","21.97","21.97","21.97","21.97","21.97","21.97","21.97","21.97","21.97","21.97","21.96","21.96","21.96","21.96","21.96","21.96","21.96","21.95","21.95","21.95","21.95","21.95","21.95","21.95","21.95","21.95","21.95","21.94","21.94","21.94","21.94","21.93","21.93","21.93","21.93","21.93"
];
var xMin = 21; //LowLimit
var xMax = 23; //UpLimit
var mean = math.mean(data); //平均值  计算方法来自math.js
var stdev = math.std(data); //方差
var threeSigUp = mean + 3 * stdev;
var threeSigLow = mean - 3 * stdev;
//数据升序排序
const dataSec = data.sort((a, b) => {return a - b;
});
//计算频数
var resNum = {};
for (var m = 0; m < dataSec.length; m++) {var key = parseFloat(dataSec[m]);if (parseFloat(key) === 0) continue;if (resNum[key]) resNum[key] += 1;else resNum[key] = 1;
}
var xArr = []; //横坐标值
var fArr = []; //频数
var yArr = []; //正态值for (var k in resNum) {xArr.push(parseFloat(k));
}
xArr = xArr.sort((a, b) => {return a - b;
});
//console.log(xArr);//计算x值对应的频数
for (var i = 0; i < xArr.length; i++) {var xNy = [xArr[i], resNum[xArr[i]]];fArr.push(xNy);
}//计算x值对应的正态分布值
var distance = xMax - xMin; //为了更好看，设置正态曲线起止位置
for (var j = xMin + distance / 4; j < xMax - distance / 4; j += 0.01) {var xy = [j, func(j, mean, stdev)];yArr.push(xy);
}var option;
option = {//backgroundColor: "#12141e",tooltip: {trigger: "axis",axisPointer: {type: "shadow"}},legend: {orient: "vertical",x: "right",y: "top",top: "5px",data: ["频数", "正态分布"],textStyle: {color: "rgba(255,255,255,1)",fontSize: "12"}},grid: {left: "2%",top: "18px",right: "2%",bottom: "2%",containLabel: true},xAxis: [{type: "value",min: xMin,max: xMax,axisLabel: {textStyle: {color: "rgba(255,255,255,1)",fontSize: 10}},axisLine: {show: true,lineStyle: {color: "rgba(255,255,255,1)"}},splitLine: {show: false}}],yAxis: [{type: "value", //数值轴name: "正态曲线",position: "right",axisTick: { show: true },axisLine: {show: false,lineStyle: {color: "rgba(255,255,255,1)"}},axisLabel: {show: true,textStyle: {color: "rgba(255,255,255,1)",fontSize: 10}},splitLine: {show: false}},{type: "value",name: "频数",position: "left",axisLabel: {//formatter: '{value} %'show: true,textStyle: {color: "rgba(255,255,255,1)",fontSize: "12"}},axisTick: {show: true},axisLine: {show: true,lineStyle: {color: "rgba(0,0,0,.1)",width: 1,type: "solid"}},splitLine: {lineStyle: {color: "rgba(255,255,255,.3)"}}}],series: [{name: "正态分布",type: "line",smooth: true,yAxisIndex: 0,symbol: "circle",symbolSize: 5,showSymbol: false,lineStyle: {normal: {color: "#ceb664",width: 2}},itemStyle: {normal: {color: "#ceb664",borderColor: "rgba(221, 220, 107, .1)",borderWidth: 10}},data: yArr,markLine: {symbol: ["none"],lineStyle: {type: "dotted",color: "yellow"},itemStyle: {normal: {show: true,color: "black"}},label: {show: true,position: "end"},data: [{name: "3σ",xAxis: threeSigLow.toFixed(2),label: {show: true,formatter: "3σ"}},{name: "3σ",xAxis: threeSigUp.toFixed(2),label: {show: true,formatter: "3σ"}}]}},{name: "频数",type: "bar",yAxisIndex: 1,xAxisIndex: 0,barWidth: 8,barGap: 1,symbol: "solid",symbolSize: 5,showSymbol: true,itemStyle: {normal: {color: "#0184d5",opacity: 1,barBorderRadius: 3}},data: fArr,markLine: {symbol: ["none"],lineStyle: {type: "dotted",color: "red"},itemStyle: {normal: {show: true,color: "black"}},label: {show: true,position: "middle"},data: [{name: "LowLimit",xAxis: xMin.toFixed(2),label: {show: true,formatter: "Low"}},{name: "High",xAxis: xMax.toFixed(2),label: {show: true,formatter: "High"}}]}}]
};if (option && typeof option === "object") {myChart.setOption(option);
}window.addEventListener("resize", myChart.resize);

细节

刚开始x轴设置为类目轴，直方图可以显示，但是加入正态曲线展示效果不是很理想，为了能更好显示频数与正态曲线，所以 x轴，y轴都采用了数值轴，其对应的y轴数组fArr与yArr中存放的值为[x,y]。

echart绘制直方图+正态分布曲线相关推荐

EChart绘制风速风向曲线分析图
1.获取ECharts 在 ECharts 的 GitHub 上下载最新的 release 版本,解压出来的文件夹里的 dist 目录里可以找到最新版本的 echarts 库. 2.引入ECharts ...
python画直方图成绩分析-使用Python绘制直方图和正态分布曲线
本文主要介绍两个内容: 如何使用记事本生成包含某一数据集的CSV文件: 如何使用Python绘制给定数据集的直方图和正态分布曲线. 1. 使用记事本创建CSV文件 ① 新建一个文本文件,打开后输入数据 ...
python导入数据画直方图加正态曲线_使用Python绘制直方图和正态分布曲线
原博文 2020-03-20 22:01 − 本文主要介绍两个内容: 如何使用记事本生成包含某一数据集的CSV文件: 如何使用Python绘制给定数据集的直方图和正态分布曲线. 1. 使用记事本创建C ...
python绘制正态分布曲线
场景:已知mean和variance,绘制正态分布曲线. import numpy as np import matplotlib.pyplot as plt import pandas as pd ...
Matplotlib复习（1）——绘制三角函数曲线、正态分布曲线、圆锥曲线、极坐标方程（心形线、玫瑰线、阿基米德螺线）、3D图（球、马鞍面）
文章目录 0 前置 1 基础API--绘制三角函数曲线 2 图例.注释.文本--绘制正态分布曲线 3 轮廓--绘制圆锥曲线 4 绘制极坐标方程(心形线.玫瑰线.阿基米德螺线) 5 3D图(球.马鞍面) ...
matlab绘制正态分布曲线（高斯隶属度函数）
在matlab中提供了gaussmf函数,可以利用该函数进行正态分布曲线的绘制. 正态分布公式: gaussmf的语法: y = gaussmf(x,[sig c]) 其中 sig: 指代正态分布的标 ...
Python数据挖掘：绘制直方图，设置上下限和步长，绘制子图
有任何问题欢迎在评论区提出! 绘制直方图: ''' 来源:天善智能韦玮老师课堂笔记作者:Dust 直方图hist某一段数据出现的频数 ''' import numpy as npy import ...
python画直方图代码-Python使用Plotly绘图工具，绘制直方图
今天我们再来讲解一下Python使用Plotly绘图工具如何绘制直方图使用plotly绘制直方图需要用到graph_objs包中的Histogram函数我们将数据赋值给函数中的x变量,x = da ...
python绘制简单直方图-python plotly绘制直方图实例详解
python plt怎么绘制直方图 # /usr/bin/python# -*- coding: utf-8 -*-import numpy as npfrom matplotlib import p ...

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

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

效果展示

echart

细节

echart绘制直方图+正态分布曲线相关推荐

最新文章

热门文章