echarts drawing straight line (custom standard line)

echarts drawing straight line (custom standard line)

Write the following code in 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'
  },
},

After configuration, the standard line is as shown in the figure:
insert image description here

Guess you like

Origin blog.csdn.net/qq_41329287/article/details/129139768