echarts绘制SPC控制图（X-R控制图）

X-R控制图

简介

控制图（Control Chart）又叫管制图，是对过程质量特性进行测定、记录、评估，从而监察过程是否处于控制状态的一种用统计方法设计的图。图上有三条平行于横轴的直线：中心线（CL，Central Line）、上控制限（UCL，Upper Control Limit）和下控制限（LCL，Lower Control Limit），并有按时间顺序抽取的样本统计量数值的描点序列。UCL、CL、LCL统称为控制限（Control Limit），通常控制界限设定在±3标准差的位置。中心线是所控制的统计量的平均值，上下控制界限与中心线相距数倍标准差。若控制图中的描点落在UCL与LCL之外或描点在UCL和LCL之间的排列不随机，则表明过程异常

X-R控制图样例¹

使用Echarts绘制

在echarts中要绘制这种控制图，需要用到主要以下几个配置项

1. markLine：用于绘制标准类似标准上限、平均值和异常值连接横坐标的虚线
2. markPoint：用于绘制异常点堆叠和异常值点位

具体例子

option = {
   
  toolbox: {
   
    feature: {
   
      saveAsImage: {
   
        name: 'x-Bar R均值控制图'
      }
    }
  },
  xAxis: {
   
    type: 'category',
    axisTick: false,
    data: [1, 2, 3, 4, 5, 6, 7, 8]
  },
  tooltip: {
   
    trigger: 'item'
  },
  grid: {
   
    right: '15%'
  },
  dataZoom: [
    {
   
      type: 'slider',
      show: true,
    },
    {
   
      // 没有下面这块的话，只能拖动滚动条，
      // 鼠标滚轮在区域内不能控制外部滚动条
      type: 'inside',
      // 滚轮是否触发缩放
      zoomOnMouseWheel: true,
      // 鼠标滚轮触发滚动
      moveOnMouseMove: false,
      moveOnMouseWheel: false
    }
  ],

  yAxis: {
   
    type: 'value',
    max: Math.max(...[820, 932, 901, 934, 1290, 1330, 1320, 820]) + 100,
    min: 0
  },
  legend