echarts的正太分布图
时间: 2023-09-20 10:14:20 浏览: 70
你可以使用 ECharts 来绘制正态分布图。首先,你需要准备一些数据来表示正态分布的曲线。以下是一个示例代码,演示如何使用 ECharts 绘制正态分布图:
```javascript
// 引入 ECharts
import echarts from 'echarts';
// 创建图表容器
const chartContainer = document.getElementById('chart-container');
const chart = echarts.init(chartContainer);
// 生成正态分布的数据
const data = [];
for (let i = -3; i <= 3; i += 0.1) {
const x = i;
const y = Math.exp(-0.5 * Math.pow(x, 2)) / Math.sqrt(2 * Math.PI);
data.push([x, y]);
}
// 配置图表选项
const option = {
title: {
text: '正态分布图'
},
xAxis: {},
yAxis: {},
series: [{
type: 'line',
smooth: true,
symbol: 'none',
areaStyle: {},
data: data
}]
};
// 渲染图表
chart.setOption(option);
```
以上代码首先引入了 ECharts 库,并创
相关问题
echarts正态分布图
要绘制echarts正态分布图,可以使用echarts中的柱状图(bar)和折线图(line)来实现。
首先,我们需要生成正态分布的数据,可以使用JS中的统计类库,例如mathjs。下面是一个生成1000个随机数的正态分布数据的示例代码:
```
var math = require('mathjs');
var data = math.random([1000], 'normal', 0, 1);
```
然后,在echarts中,我们可以使用柱状图来展示数据的分布情况。柱状图的高度表示数据的频率,柱状图宽度表示数据的区间。以下是一个绘制柱状图的示例代码:
```
var xAxisData = [];
var yAxisData = [];
var interval = 0.1;
var bins = math.range(-3, 3, interval).toArray();
for (var i = 0; i < bins.length - 1; i++) {
var count = 0;
for (var j = 0; j < data.length; j++) {
if (data[j] >= bins[i] && data[j] < bins[i + 1]) {
count++;
}
}
xAxisData.push((bins[i] + bins[i + 1]) / 2);
yAxisData.push(count);
}
var option = {
xAxis: {
type: 'value'
},
yAxis: {
type: 'value'
},
series: [{
type: 'bar',
data: yAxisData,
barWidth: interval * 50,
itemStyle: {
color: '#7cb5ec'
}
}]
};
var chart = echarts.init(document.getElementById('chart'));
chart.setOption(option);
```
接下来,我们可以使用折线图来展示正态分布的曲线。由于正态分布曲线是连续的,所以我们需要用折线图来模拟曲线。以下是一个绘制折线图的示例代码:
```
var curveData = [];
for (var i = -3; i < 3; i += interval) {
curveData.push(math.norm.pdf(i, 0, 1));
}
option.series.push({
type: 'line',
data: curveData,
itemStyle: {
color: '#434348'
},
lineStyle: {
color: '#434348'
}
});
chart.setOption(option);
```
最终的效果如下图所示:
![正态分布图](https://i.imgur.com/YD3v9B6.png)
echarts 正态分布曲线
要在 echarts 中绘制正态分布曲线,可以使用 echarts-stat 库。以下是一个简单的例子:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts 正态分布曲线</title>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script>
var data = [];
for (var i = -3; i <= 3; i += 0.1) {
data.push([i, echarts.number.round(echarts.stat.normalDistribution(i), 2)]);
}
var option = {
title: {
text: '正态分布曲线'
},
tooltip: {},
xAxis: {
name: 'x',
type: 'value',
splitLine: {
lineStyle: {
type: 'dashed'
}
}
},
yAxis: {
name: 'y',
type: 'value',
splitLine: {
lineStyle: {
type: 'dashed'
}
}
},
series: [{
type: 'line',
smooth: true,
data: data
}]
};
var chart = echarts.init(document.getElementById('main'));
chart.setOption(option);
</script>
</body>
</html>
```
这个例子使用 echarts-stat 库计算正态分布,然后通过 echarts 库绘制图表。其中,data 数组存储了正态分布曲线上的点,option 对象定义了图表的配置,包括标题、坐标轴、数据系列等。最后通过 echarts.init() 方法初始化图表,并通过 setOption() 方法设置配置项。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)