如何解决echarts:如何在条形图上添加正态分布曲线?
我已经使用echarts绘制了条形图:
如何在下图所示的条形图线上显示正态分布曲线:
export class MainComponent implements OnInit,AfterViewInit,OnDestroy {
binsCount: number = 20;
histogramDetails: any = [];
//#endregion
constructor(private router: Router,private store: Store<any>,private projectService: ProjectService,private taskService: TaskService,private messageService: MessageService,) { }
async createNewPlot(task: Task) {
if(this.selectedPlotType.name === 'Histogram') {
plotOption = await this.loadHistogramPlotData(task) ;
}
}
loadHistogramPlotData(task) {
if (!task || !this.selectedVariableX) {
return
}
return new Promise((resolve,reject) => {
this.taskService.getOutputVariablesHistogramPlot(task.id,this.selectedVariableX.id).subscribe(
response => {
//reset data
log.debug(`response = ${JSON.stringify(response)}`);
const plotData = this.setHistogramDetails(response.hist_plot_data);
resolve(plotData);
},error => {
log.error(error);
reject(error)
}
);
})
}
setHistogramDetails(histogramDetails: any) {
// histogramDetails ? this.histogramDetails.push(histogramDetails) : null ;
const nums = histogramDetails.realization
let min = Math.floor(Math.min(...nums));
let max = Math.ceil(Math.max(...nums));
const binSize = (max - min) / this.binsCount;
let xaxisData: number[] = [];
let yseries = [];
let previousNumber = min;
for (let i = 0; i <= this.binsCount; i++) {
xaxisData.push(parseFloat(previousNumber.toFixed(1)));
yseries.push(0);
previousNumber = previousNumber + binSize;
}
for (const num of nums) {
for (let i = 1; i < xaxisData.length; i++) {
if (num < xaxisData[i]) {
yseries[i]++;
break;
}
}
}
const plotData: number[] = yseries;
const options = {
grid: {
left: 30,top: 10,bottom: 100
},tooltip: {
trigger: 'axis',axisPointer: {
type: 'cross',crossStyle: {
color: '#eee'
}
}
},legend: {
orient: 'vertical',left: '5%',bottom: 30,itemHeight: 3,itemGap: 14,textStyle: {
fontSize: 10,color: '#333333'
},data: ['Specified Distribution','Simulated Distribution']
},xAxis: [
{
type: 'category',data: [xaxisData[0] * 10,...xaxisData,xaxisData[xaxisData.length - 1] * 10],boundaryGap: ['40%','40%'],axisTick: {
alignWithLabel: true
},axisPointer: {
type: 'shadow'
}
}
],yAxis: [
{
type: 'value',splitNumber: 5,axisLabel: {
formatter: '{value}',fontSize: 10
}
}
],dataZoom: [{
type: 'inside',throttle: 50
}],series: [
{
name: 'Simulated Distribution',type: 'bar',color: '#2DA8D8',large: true,data: plotData,}
],histogramDetails: histogramDetails
};
return options;
};
}
解决方法
Echarts没有内置功能正态分布。您需要根据数据calculate it并像往常一样line
series或let
添加栏。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。