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

ECharts 是一个基于 JavaScript 的开源可视化库，可以很方便地绘制各种统计图表。要在 ECharts 中同时展示直方图和正态分布曲线，你需要通过 `series` 配置项将两者结合在一起。 以下是实现步骤： ### 实现思路 1. **数据准备** - 准备用于生成直方图的数据。 - 根据这些数据计算出其对应的频率，并拟合一条正态分布曲线。 2. **配置直方图** 使用 ECharts 的柱状图 (`bar`) 组件表示直方图。 3. **添加正态分布曲线** 利用 ECharts 的折线图 (`line`) 或平滑线条组件，绘制正态分布函数的图像。 4. **调整样式** 对两个系列的颜色、透明度等属性进行设置，使其更直观清晰。 --- #### 示例代码 ```javascript // 引入 echarts 库 var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); // 数据模拟 (实际应用可根据需求替换) var data = [85, 90, 76, 88, 92, 81, 73, 95, 89, 82]; data.sort(function(a, b) { return a - b; }); // 排序方便后续分组 // 计算频数并生成区间 function calculateHistogram(data, binCount) { var min = Math.min(...data); var max = Math.max(...data); var rangeSize = (max - min + 1) / binCount; let bins = []; for(let i=0;i<binCount;i++) { bins.push(0); } data.forEach(value => { const index = Math.floor((value-min)/rangeSize); if(index < binCount){ bins[index]++; }else{ bins[binCount-1]++; // 最大值归到最后一组 } }); return bins.map((count,index)=>{ return [(min+index*rangeSize),(min+(index+1)*rangeSize), count]; }) } let histData = calculateHistogram(data, 5).map(item=>item.slice(-1)[0]); // 正态分布公式：f(x)=1/(σ√(2π)) * exp(-(x-u)^2/(2σ^2)) function normalDistribution(mean,std,x){ return (1/Math.sqrt(2*Math.PI))/(std)*Math.exp((-Math.pow(x-mean,2)/(2*(std*std)))); } let mean = data.reduce((a,b)=>a+b,data.length)/data.length; // 均值 let variance = data.reduce((acc,val) => acc += Math.pow(val - mean, 2), 0) / data.length; let stdDeviation = Math.sqrt(variance); let curveData=[]; for(let x=Math.min.apply(null,data)-5;x<=Math.max.apply(null,data)+5;x+=0.1){ //-/+5 扩展显示范围 curveData.push([x,normalDistribution(mean,stdDeviation,x)]); }; option = { tooltip: {}, xAxis: { type: 'category', boundaryGap: false, name:'分数' }, yAxis:{ name:'概率密度/频次' }, series: [ { name: '直方图', type: 'bar', barWidth : '50%', itemStyle:{color:'#8ec5fc'}, label:{show:true}, data:histData, },{ name:"正态分布", type:'line',smooth:true,symbol:'none',labelLine:{show:false},areaStyle:{opacity:.3,color:'#ffbc8d'},emphasis:{focus:'series'}, encode:{y:[1]}, dataset:{source:curveData}, }] }; myChart.setOption(option); ``` --- ### 结果说明 上述代码实现了在一个图表内同时展现直方图与正态分布曲线的功能。其中： 1. 直方图由柱形序列构成； 2. 正态分布曲线则采用光滑的线条形式呈现。 如果需要进一步优化或自定义外观，还可以对颜色方案、字体大小等方面做更多微调。 ---