echarts绘画直线（自定义标准线）

echarts绘画直线（自定义标准线）

在series中写入以下代码：

{
  type: 'custom',
  name: '标准线',
  renderItem: (param, api)=>{
    let bandWidth = api.size([0, 0])[0] * (data.length); // data为总数据量
    let itemWidth = api.size([0, 0])[0]
    let point = api.coord([api.value(0), api.value(1)]);
    return {
      type: 'line',
      transition: ['shape'],
      shape: {
        x1: point[0] - itemWidth*0.5,
        x2: point[0] + bandWidth - itemWidth*0.5,
        y1: point[1],
        y2: point[1]
      },
      style: api.style({ // 直线配置
        fill: null,
        stroke: api.visual('color'),
        lineWidth: 2 // 线宽
      })
      // style: api.style({ // 虚线配置
      //  stroke: api.visual('color'),
      //   lineWidth: 2,
      //   fill: "transparent",
      //   lineDash:[5,5],
      // }),
    };
  },
  encode: {
    x: 0,
    y: 1
  },
  color: '#FFC621',
  data: [x], // x为标准线数据值，例如：3
  label: { // 标准线上的提示文字
    show: true,
    formatter: `标准值${x}`,
    position: [ ((100/(m+1))*(n+1)-10) + '%', -4], // m 为设置标准线的个数  n为第几根标准线， 这样设置后，标准线上的提示文字是错开的
    backgroundColor: '#ebf9f9'
  },
},

配置好后标准线如图：