Echarts制作泊松分布图，并加临界线

随着项目的深入，利用Echarts制作的图表的需求逐渐增多。现记录一下，Echarts制作泊松分布图的过程。
1.直接上效果图:

2.泊松分布：

https://blog.csdn.net/ccnt_2012/article/details/81114920

3.Echarts关键代码：

    const option = {
      title: {
        text: 'xxx结果',
        textAlign: 'left',
        show: true,
        textStyle: {
          color: '#FFFFFF',
          fontSize: '20',
        },
        left: '20%',
        top: '6%',
      }, 
  toolbox: {
    feature: {
      dataView: { show: true, readOnly: false },
      magicType: { show: true, type: ['line', 'bar'] },
      restore: { show: true },
      saveAsImage: { show: true },
    },
  },
      yAxis: [{
        type: 'value',
        // 显示分割线
        splitLine: {
          show: true,
          lineStyle: {
            color: 'rgba(255,255,255,0.50)',
            type: 'solid',
          },
        },
        // 隐藏坐标轴轴线
        axisLine: {
          show: true,
        },
        axisLabel: {
          interval: 0,
          color: '#FFFFFF',
          fontSize: '10%',
        },
        // 隐藏刻度线
        axisTick: {
          show: true,
        },
        name: 'xxx',
        nameTextStyle: {
          color: '#FFFFFF',
          fontSize: '12',
          align: 'left',
        },
      },
    {
      type: 'value',
      min: 0,
      max: 0.25,
      interval: 0.025,
      axisLabel: {
        formatter: '{value}',
        color: '#FFFFFF',
        fontSize: '10%',
      },
    }],
      xAxis: {
        name: 'xxx',
        nameTextStyle: {
          color: '#FFFFFF',
          fontSize: '12',
          align: 'left',
        },
        type: 'category',
        splitLine: {
          show: false,
        },
        axisLabel: {
          // show: false,
          interval: 0,
          color: '#FFFFFF',
          fontSize: '9',
        },
        // 隐藏刻度线
        axisTick: {
          show: false,
        },
        data: ['1°', '2°', '3°', '4°', '5°', '6°', '7°', '8°', '9°', '10°', '11°', '12°', '13°', '14°', '15°', '16°', '17°'],//x轴数组值
      },
      series: [
        {
          data: props.y,//y轴数组值，
          type: 'bar',
          itemStyle: {
            color: 'rgba(108, 200, 205, 1)',
          },
          barWidth: ' 25%',
          markLine : {
                symbol:'none',
                           /*symbol:"none",               //去掉警戒线最后面的箭头
                           label:{
                               position:"end"   ,       //将警示值放在哪个位置，三个值“start”,"middle","end"  开始  中点 结束 },*/
                           data : [{
                               silent:false,             //鼠标悬停事件  true没有，false有
                               lineStyle:{               //警戒线的样式  ，虚实  颜色
                                   type:'solid',
                                   color:'#CC3333',
                               },
                                   label:{
                                   position:'end',
                                   color:'#CCFF66',
                                   fontSize: '14px',
                                   formatter:'显著性α=0.01;临界点=13°',
                               },
                               xAxis:'13°',         // 警戒线的标注值，可以有多个yAxis,多条警示线   或者采用   {type : 'average', name: '平均值'}，type值有  max  min  average，分为最大，最小，平均值
                              
                           },
                           ],
                       },
        },
            {
      type: 'line',
      yAxisIndex: 1,
      itemStyle: {
            color: '#FFFFFF',
          },
      data: props.y,  //y轴数组值，
    },
      ],　
      grid: {
        top: 100,
        bottom: 0,
        left: '5%',
        containLabel: true,
        height: '60%',
        width: '90%',
      },
      tooltip: {
        show: true,
      },

    } as EChartsOption
    echart.setOption(option)