レンダリングは次のとおりです。
実装
1. まず、markLine の垂直 x 軸を実現します。
- X 軸には 2 つのカテゴリがあり、1 つは離散点描画のカテゴリ、もう 1 つは連続点描画の値です。
- markLine が x 軸に対して垂直である場合、x 軸の主軸が使用され、データ ポイント タイプは連続ポイントになります。注: ここでのデータ ポイント タイプがカテゴリ離散タイプの場合、markLine はこのデータ ポイントに含まれるマーカー ラインのみを表示できます。また、連続点はデータ範囲内の任意の位置にマーカー線を引くことができます。
2. 基本バージョンの完全な実装コードは次のとおりです。
const nums = 1.398
const datas1 = [12.12, 18.3, 19.7, 21.1, 22.49, 23.89, 25.29, 26.69, 28.09, 29.48, 30.88, 35.55]
const lsl = 23.12
const usl = 28
const nom = 25.34
const sigma_plus3 = 34.26
const sigma_minus3 = 14.34
const mean = 24.30
const std1 = 3.32
const std2 = 3.43
const range = [12.12, 35.55]
const resolution = 10000
const xData = []
const step = (range[1] - range[0]) / resolution
for (let i = range[0]; i <= range[1]; i += step) {
xData.push(parseFloat(i.toFixed(2)))
}
const barData = [[18.3, 51],[19.7, 64],[21.1, 65],[22.49, 67],[23.89, 55],[25.29, 81],[18.3, 51],
[26.69, 80],[28.09, 50],[29.48, 40],[30.88, 7]];
const yData1 = []
for (let i = 0; i < xData.length; i++) {
let x = xData[i]
let y = Math.exp(-0.5 * Math.pow((x - mean) / std1, 2)) / (std1 * Math.sqrt(2 * Math.PI))
yData1.push(y);
}
const yData2 = []
for (let i = 0; i < xData.length; i++) {
let x = xData[i]
let y = Math.exp(-0.5 * Math.pow((x - mean) / std2, 2)) / (std2 * Math.sqrt(2 * Math.PI))
yData2.push(y);
}
option = {
title: {
text: '正态分布图',
subtext: ''
},
legend: {
'data': ['过程能力（估算）', '过程能力（实测）']
},
tooltip: {
trigger: 'item',
axisPointer: {
type: 'shadow'
},
formatter: function (params) {
if (params.componentType === 'series') {
return `${
params.seriesName}<br>${
parseFloat(parseFloat(params.value[0]) - nums * 0.5).toFixed(2)}~${
parseFloat(parseFloat(params.value[0]) + parseFloat(nums * 0.5)).toFixed(2)} : ${
params.value[1]}</br>`
} else {
return `${
params.name} : ${
params.value}`
}
}
},
toolbox: {
show: true,
feature: {
saveAsImage: {
show: true }
}
},
xAxis: [{
type: 'value',
axisLabel: {
showMinLabel: false,
showMaxLabel: false
},
boundaryGap: false,
min: Math.min.apply(null, xData),
max: Math.max.apply(null, xData),
},
{
type: 'category',
axisTick: {
show: false
},
axisLabel: {
show: false,
formatter: '{value}'
},
data: xData
}
],
yAxis: [
{
type: 'value',
name: '频数',
position: 'left',
splitLine: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: 'orange'
}
},
}, {
type: 'value',
name: ''
},
{
type: 'value',
name: '概率',
position: 'right',
splitLine: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: 'black'
}
},
}],
series: [
{
name: '数据个数',
type: 'bar',
yAxisIndex: 0,
xAxisIndex: 0,
barCategoryGap: '40%',
itemStyle: {
normal: {
show: true,
color: 'rgba(255, 204, 0,.3)',
borderColor: '#FF7F50'
}
},
data: barData,
}, {
name: '过程能力（估算）',
type: 'line',
xAxisIndex: 1,
yAxisIndex: 1,
symbol: 'none',
smooth: true,
data: yData1,
},
{
name: '过程能力（实测）',
type: 'line',
yAxisIndex: 1,
xAxisIndex: 1,
symbol: 'none',
smooth: true,
data: yData2,
},
{
name: '',
type: 'line',
xAxisIndex: 0,
yAxisIndex: 0,
symbol: 'none',
smooth: true,
markLine: {
symbol: ['none'],
itemStyle: {
color: '#FF0000' },
animation: false,
label: {
show: true,
fontSize: 14,
fontWeight: 'bold',
formatter: function (params) {
if (params.name === '-3σ' || params.name === '+3σ' || params.name === 'X-bar') {
return `${
params.name}\n`;
} else {
return `${
params.name}`;
}
},
},
data: [
{
name: 'LSL',
xAxis: lsl,
lineStyle: {
color: '#066d06', width: 2 },
label: {
color: '#066d06', position: 'end' }
},
{
name: 'USL',
xAxis:usl,
lineStyle: {
color: '#066d06', width: 2 },
label: {
color: '#066d06', position: 'end' }
},
{
name: 'NOM',
xAxis:nom,
lineStyle: {
color: '#ffbe11', width: 2 },
label: {
color: '#ffbe11', position: 'end' }
},
{
name: '-3σ',
xAxis:sigma_minus3,
lineStyle: {
color: 'red', width: 2 },
label: {
color: 'red', position: 'end' }
},
{
name: '+3σ',
xAxis: sigma_plus3,
lineStyle: {
color: 'red', width: 2 },
label: {
color: 'red', position: 'end' }
},
{
name: 'X-bar',
xAxis:mean,
lineStyle: {
color: 'red', width: 2 },
label: {
color: 'red', position: 'end' }
},
]
}
}
]
}
3. 最終的な効果は次のとおりです。
