基础使用

坐标轴设置

// 根据数据绘制折线图的逻辑...

// 使用 data 来设置折线图的 x 轴和 y 轴数据
const y_min = parseInt(Math.min(...data.y_coords).toString());
const y_max = Math.max(...data.y_coords).toFixed();
const x_min = parseInt(Math.min(...data.x_coords).toString());
const x_max = Math.max(...data.x_coords).toFixed();

const option = {
  xAxis: {
    type: "category",
    // data: data.x_coords, // 可以直接指定一个跟数据数量一致的列表作为x轴名称
    min: x_min,  // 或者根据数据范围，直接指定最大最小值，这样间隔会自动识别
    max: x_max,
  },
  yAxis: {
    type: "value",
    min: y_min,
    max: y_max,
  },
  series: [
    {
      data: data.y_coords,
      type: "line",
    },
  ],
};

chart.setOption(option);

网格设置

坐标轴网格内的splitLine:{}

{
    xAxis: {
      splitLine: { show: true }, // 根据x轴显示网格线
      z: 99, // 将网格线置顶
    },
    yAxis: {
      splitLine: { show: true }, // 根据x轴显示网格线
      z: 99, // 将网格线置顶
    }
}

使用grid:{}

{
    grid:{
        show:boolean; // 全局性的网格
    }
}

图例

使用直线图例

legend字段就是图例的详细配置，通过legend.icon可以设置图例的符号形状，默认是圆点+直线的组合，默认情况下没有纯直线，但是可以通设置成roundRect配合压低的itemHeight高度，现实直线的效果

legend:{
      show: true,
      icon: "roundRect",
      itemHeight: 2,
}