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添加栏。