ECharts绘制正态分布曲线

<template>
  <div id="main"></div>
</template>

<script setup>
import { onMounted } from "vue";
import * as echarts from "echarts";
let data={
  x:[
    -3,-2.6842105263157894,-2.3684210526315788, 
    -2.052631578947368,-1.7368421052631575,-1.421052631578947,-1.1052631578947363, 
    -0.7894736842105258,-0.47368421052631526,-0.15789473684210475,
    0.15789473684210575,0.47368421052631626,0.7894736842105268,
    1.1052631578947372,1.4210526315789478,1.7368421052631584,
    2.052631578947369, 2.3684210526315796,2.6842105263157903],
  y:[
    0.0044318484119380075, 0.010873446008403894,   0.02414573124668899,
    0.04852933916733306,   0.08827937454560608, 0.14534663197630093,
    0.21659157163219764,   0.292125176410827, 0.3566048764304543,
    0.394000182232257,   0.39400018223225697, 0.3566048764304541,
    0.29212517641082686,  0.21659157163219742, 0.14534663197630074,
    0.08827937454560594,   0.04852933916733297, 0.024145731246688947,
    0.010873446008403865],
};
const sum=()=> {
  if (data.y.length === 0) return 0
  return data.y.reduce((prev, curr) => prev + curr)
};
const average=()=> {
  return sum() / data.y.length
};
console.log('平均值',average());
let median;
const deviation=()=> {
  // 1、求平均数
  const avg = average();
  // 2、返回偏差。 f(x) = x - avg
  return data.y.map(x => x - avg)
};
console.log('偏差',deviation());
const variance=()=> {
  if (data.y.length === 0) return 0
      // 1、求偏差
  const dev = deviation();
      // 2、求偏差平方和
  const sumOfSquOfDev = dev.map(x => x * x).reduce((x, y) => x + y)
      // 3、返回方差
  return sumOfSquOfDev / data.y.length - 1
};
console.log('方差',variance());
const  standardDeviation=() =>{
    return (Math.sqrt(Math.abs(-variance())))
};
console.log('标准差',standardDeviation());
const standarDevRangeOfOne=() =>{
    return {
        low: average() - 1 * standardDeviation(),
        up: average() + 1 * standardDeviation()
    }
};
console.log('1倍标准偏差',standarDevRangeOfOne());
const standarDevRangeOfTwo=()=> {
    return {
        low: average() - 2 * standardDeviation(),
        up: average() + 2 * standardDeviation()
    }
};
console.log('2倍标准偏差',standarDevRangeOfTwo());
const standarDevRangeOfThree=()=> {
    return {
        low: average() - 3 * standardDeviation(),
        up: average() + 3 * standardDeviation()
    }
};
console.log('3倍标准偏差',standarDevRangeOfThree());
const min=() =>{
  return Math.min(...data.y)
};
console.log('min',min());
const max=() =>{
  return Math.max(...data.y)
};
console.log('max',max());
onMounted(() => {
  // 1.基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById("main"));
  // 2.指定图表的配置项和数据, Echarts 图的配置
  var option = {
    // Echarts 图 -- 标题
    title: {
      text: 'Echarts 绘制正态分布曲线'
    },
    // Echarts 图 -- 工具
    tooltip: {},
    // Echarts 图 -- 图例
    legend: {
      data: ['f(x)']
    },
    // Echarts 图 -- x 坐标轴刻度 -- 正态分布数值
    xAxis: [{
      // name : "标准刻度(0.1)",
      data: data.x,
      // min: this.min,
      // max: this.max
    }],
     // Echarts 图 -- y 坐标轴刻度
    yAxis: [
      {
        type: 'value',
        name: '频数',
        position: 'left',
        // 网格线
        splitLine: {
            show: false
        },
        axisLine: {
            lineStyle: {
                color: 'orange'
            }
        },
        axisLabel: {
            formatter: '{value}'
        }
      }, 
      {
        type: 'value',
        name: '概率',
        position: 'right',
        // 网格线
        splitLine: {
            show: false
        },
        axisLine: {
            lineStyle: {
                color: 'black'
            }
        },
        axisLabel: {
            formatter: '{value}'
        }
      }, 
    ],
    // Echarts 图 -- y 轴数据
    series: [
      {
        name: '源数据', // y 轴名称
        type: 'bar', // y 轴类型
        yAxisIndex: 0,
        barGap: 0,
        barWidth: 27,
        itemStyle: {
            normal: {
                show: true,
                color: 'rgba(255, 204, 0,.3)', //柱子颜色
                borderColor: '#FF7F50' //边框颜色
            }
        },
        data: data.y, // y 轴数据 -- 源数据
      }, 
      {
        name: '正态分布', // y 轴名称
        type: 'line', // y 轴类型
        // symbol: 'none', //去掉折线图中的节点
        smooth: true, //true 为平滑曲线
        yAxisIndex: 1,
        data: data.y, // y 轴数据 -- 正态分布
        // 警示线
        markLine: {
          symbol: ['none'], // 箭头方向
          lineStyle: {
              type: "silent",
              color: "green",
          },
          itemStyle: {
              normal: {
                  show: true,
                  color: 'black'
              }
          },
          label: {
              show: true,
              position: "middle"
          },
          data: [
            {
              name: '一倍标准差',
              xAxis: standarDevRangeOfOne().low.toFixed(1),
              // 当 n 倍标准差在坐标轴外时，将其隐藏，否则它会默认显示在最小值部分，容易引起混淆
              lineStyle: {
                  opacity: (min() > standarDevRangeOfOne()
                      .low) ? 0 : 1
              },
              label: {
                  show: !(min() > standarDevRangeOfOne().low)
              }
            }, 
            {
              name: '一倍标准差',
              xAxis: standarDevRangeOfOne().up.toFixed(1),
              lineStyle: {
                  opacity: (max() < standarDevRangeOfOne().up) ?
                      0 : 1
              },
              label: {
                  show: !(max() < standarDevRangeOfOne().up)
              }
            },
            {
              name: '二倍标准差',
              xAxis: standarDevRangeOfTwo().low.toFixed(1),
              lineStyle: {
                  opacity: (min() > standarDevRangeOfTwo()
                      .low) ? 0 : 1
              },
              label: {
                  show: !(min() > standarDevRangeOfTwo().low)
              }
            }, 
            {
              name: '二倍标准差',
              xAxis: standarDevRangeOfTwo().up.toFixed(1),
              lineStyle: {
                  opacity: (max() < standarDevRangeOfTwo()
                      .up) ? 0 : 1
              },
              label: {
                  show: !(max() < standarDevRangeOfTwo().up)
              }
            }, 
            {
              name: '三倍标准差',
              xAxis: standarDevRangeOfThree().low.toFixed(1),
              lineStyle: {
                  opacity: (min() > standarDevRangeOfThree()
                      .low) ? 0 : 1
              },
              label: {
                  show: !(min() > standarDevRangeOfThree().low)
              }
            }, 
            {
              name: '三倍标准差',
              xAxis: standarDevRangeOfThree().up.toFixed(1),
              lineStyle: {
                  opacity: (max() < standarDevRangeOfThree()
                      .up) ? 0 : 1
              },
              label: {
                  show: !(max() < standarDevRangeOfThree().up)
              }
            },
            {
              name: '平均值',
              xAxis: average().toFixed(1),
              lineStyle: {
                  color: 'red'
              }
            },
            {
              name: '中位值',
              xAxis: 10,
              lineStyle: {
                  color: 'green'
              }
            },
            {
              name: '下偏差',
              xAxis: 1.1,
              lineStyle: {
                    color: 'red'
                }
            },
            {
              name: '上偏差',
              xAxis: 1.9,
              lineStyle: {
                  color: 'red'
                }
            }
          ]
        }
    }
  ],
  };
  // 3.使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  window.addEventListener("resize", () => {
    myChart.resize()
  })
});
</script>

<style>
#main {
  width: 600px;
  height: 400px;
}
</style>