vue3+ts+hook开发cpk图

//数据

const data = [10，20，30，40，50，40，30，20]
const mean = data.reduce((a: any, b: any) => a + b) / data.length //平均数，data的数据和除以data的长度

const variance = data.map((x: any) => {return (x - mean) ** 2}).reduce((a: any, b: any) => a + b) / data.length //公差

const StandardDeviation = Math.sqrt(variance)
const convertedData: any = []
for (
let x = mean - data.length * StandardDeviation;
x <= mean + data.length * StandardDeviation;
x++
) {
const y
= (1 / (StandardDeviation * Math.sqrt(2 * Math.PI)))
* Math.exp(-((x - mean) ** 2) / (2 * StandardDeviation ** 2))
convertedData.push([x, y])
}

[x轴的数据] = convertedData.map((item: any[]) => {
return Math.abs(item[0])//Math.abs每一项的绝对值，不需要的可以不加
})
[y轴的数据] = convertedData.map((item: any[]) => {
return Math.abs(item[1])
})

//echarts图配置

const cpkOption = computed(() => {
　　return {
　　　　title: {},
　　　　legend: {
　　　　　　data: ['整体'],
　　　　},
　　　　grid: {
　　　　　　left: '8%',
　　　　　　top: '8%',
　　　　　　bottom: '6%',
　　　　　　containLabel: true,
　　　　},
　　　　// 提示
　　　　tooltip: {
　　　　　　trigger: 'item',
　　　　　　axisPointer: {
　　　　　　　　type: 'shadow',
　　　　　　},
　　　　},
　　　　toolbox: {
　　　　　　show: true,
　　　　},
　　　　xAxis: [
　　　　　　{
　　　　　　　　type: 'category',
　　　　　　　　axisTick: {
　　　　　　　　　　show: false, // 不显示刻度
　　　　　　　　　　interval: 10,//步长
　　　　　　　　},
　　　　　　　　axisLabel: {
　　　　　　　　　　rotate: 30,//旋转角度
　　　　　　　　},
　　　　　　　　data: [],//x轴数据数组
　　　　　　},
　　　　　　{
　　　　　　　　type: 'category',
　　　　　　　　axisTick: {
　　　　　　　　　　show: false, // 不显示刻度
　　　　　　　　},
　　　　　　},
　　　　],

yAxis: [
{
type: 'value',
name: '',
position: 'left',
// 网格线
splitLine: {
show: false,
},
scale: true, // 启用坐标轴缩放。
min: 'dataMin',//坐标原点从最小值开始
},
{
type: 'value',
name: '',
min: 'dataMin',
scale: true, // 启用坐标轴缩放。
},
],
series: [
{
name: '', // y 轴名称
type: 'bar', // y 轴类型
itemStyle: {
normal: {
show: true,
},
},
data: []//柱子的数据，我的和曲线的数据相同,
barWidth: 10,
barGap: 0,
},
{
name: '整体',
type: 'line',
xAxisIndex: 1,
yAxisIndex: 1,
symbol: 'none',
smooth: true,
data: []//曲线在y轴的数据,
},
{
name: '',
type: 'line',
xAxisIndex: 0,
yAxisIndex: 0,
symbol: 'none',
smooth: true,
// 实测数据警示线
markLine: {
symbol: ['none'], // 箭头方向
animation: false,
label: {
show: true,
formatter(params) {
return `${params.name}`
},
},
data: [
{
name: '规格下线',
xAxis: 20,
},
{
name: '规格上线',
xAxis: 100,
},
],
},
},
],
} as echarts.EChartsOption
})