<!-- 引入 ECharts 库 -->
<script src="https://cdn.uv.cc/echarts/echarts.min.js"></script>
<!-- 创建一个用于显示折线图的 div 容器，设置宽度为 600 像素，高度为 400 像素 -->
<div id="lineChart" style="width: 600px;height:400px;"></div>
<script>
const lineOption = {
title: {
text: '多个高斯分布叠加'
},
tooltip: {},
xAxis: {
type: 'value'
},
yAxis: {
type: 'value'
},
series: [
{
name: '高斯分布1',
type: 'line',
data: generateGaussianData(0, 1, -5, 5, 0.1) // 均值0，标准差1
},
{
name: '高斯分布2',
type: 'line',
data: generateGaussianData(2, 0.5, -5, 5, 0.1) // 均值2，标准差0.5
},
{
name: '叠加结果',
type: 'line',
data: generateCombinedGaussian([
{mean: 0, std: 1, weight: 1},
{mean: 2, std: 0.5, weight: 1}
], -5, 5, 0.1)
}
]
};
// 生成单个高斯分布数据
function generateGaussianData(mean, std, start, end, step) {
let data = [];
for (let x = start; x <= end; x += step) {
data.push([x, gaussian(x, mean, std)]);
}
return data;
}
// 生成多个高斯分布叠加数据
function generateCombinedGaussian(distributions, start, end, step) {
let data = [];
for (let x = start; x <= end; x += step) {
let y = 0;
distributions.forEach(dist => {
y += dist.weight * gaussian(x, dist.mean, dist.std);
});
data.push([x, y]);
}
return data;
}
// 高斯函数
function gaussian(x, mean, std) {
return Math.exp(-0.5 * Math.pow((x - mean) / std, 2)) / (std * Math.sqrt(2 * Math.PI));
}
// 初始化 ECharts 实例，并将其绑定到上述 div 容器
var lineChart = echarts.init(document.getElementById('lineChart'));
// 使用 setOption 方法将配置项设置给 ECharts 实例，生成图表
lineChart.setOption(lineOption);
</script>
Echarts 画多个高斯分布叠加图
一次购买，永久免费
去创作
评论
{{item.path.join('.')}}
{{item.item.name}}