echarts：xy坐标轴配置项demo/背景色块markArea

需求

使用折线图展示一天内气温的变化，并使用背景色块标注自定义的时间段，预期效果类似：
效果图

分析

实现一个折线图并不难，要让实际图表的细节与预期相符，需要的是足够耐心和细心，先浏览官网示例寻找相似的实现效果，并多翻看各个图表组件的配置项：echarts-配置项手册。

这个气温折线图有两点需求比较有趣：
①想要折线从坐标原点出发，即：折线中的第一个点与坐标原点贴合，所以需要在数据列表开头插入这个节点，以及设置xAxis.boundaryGap:false消除x轴左右的默认留空；
②背景色块，有参考效果的官方示例：一天用电量分布

代码

这段代码已在isqqw创建在线示例，可直接点击此链接：isqqw-一天气温变化跳转调试，其中有较为全面（常用）的xy坐标轴配置项，欢迎交流补充~

// 生成测试数据，时间为01:00~23:00，温度为22~27的随机数值
let testData = [];
while(testData.length < 23) {
  testData.push({
    time: `${testData.length < 9 ? '0' : ''}${testData.length + 1}:00`,
    temperature: parseInt(22 + Math.random() * 6)
  });
}

let xData = testData.map(item => item.time); // x轴数据
let chartData = testData.map(item => item.temperature); // 折线数据
// 在x轴数据、折线数据列表开头插入坐标原点的节点
xData.unshift(``); // 此节点没有标签
chartData.unshift({ "value": 0, "symbol": "none" }) // 此节点不显示图标

const timeSpan = [`07:00`, `09:00`, `12:00`, `16:00`, `18:00`]; // 时间段切分点
const markColor = [`#67e6d3`, `#53b9ff`, `#7387f3`, `#e133a4`, `#fab93e`, `#ffcd37`]; // 背景色块配色
// 时间段对应的背景色块配置列表
let markAreaCfg = [];
timeSpan.forEach((time, idx) => {
  let startTime = idx === 0 ? xData[idx] : time;
  let endTime = idx === xData.length - 1 ? xData[idx] : timeSpan[idx + 1]
  // 色块在x轴的范围，色块颜色
  markAreaCfg.push({
    range: [startTime, endTime], 
    color: markColor[idx]
  })
})

option = {
  "grid": { // 设置图表距离容器各个边的间距
    "left": 64,
    "right": 172,
    "top": '32%',
    "bottom": '36%',
    "containLabel": true // 将标签算作图表的一部分
  },
  "xAxis": [ // x轴配置
    {
      "name": "时间段", // x轴名称
      "nameTextStyle": { // x轴名称样式
        "color": "#666",
        "fontWeight": 400,
        "fontSize": 30,
        "padding": [ 0, 88, 20, 32 ]
      },
      "type": "category",
      "data": xData,
      "boundaryGap": false, // 消除x轴左右的默认留空，使折线两端节点与x轴边界对齐
      "axisLine": { // x轴轴线样式
        "lineStyle": {
          "width": 4,
          "color": "rgba(0, 0, 0, 0.36)"
        }
      },
      "axisLabel": { // x轴标签样式
        "color": "#aaa",
        "fontWeight": 400,
        "fontSize": 30,
        "padding": [ 16, 0, 0, 0 ]
      },
      "axisTick": { // x轴刻度样式
        "show": false // 不显示刻度
      }
    }
  ],
  "yAxis": [ // y轴配置
    {
      "name": "温度", // y轴名称
      "nameTextStyle": { // y轴名称样式
        "color": "#666",
        "fontWeight": 400,
        "fontSize": 30,
        "padding": [ 0, 88, 20, 0 ]
      },
      "axisLine": { // y轴轴线样式
        "show": false // 不显示轴线
      },
      "axisLabel": { // y轴标签样式
        "color": "#aaa",
        "fontWeight": 400,
        "fontSize": 30,
        "padding": [ 4, 8, 0, 0 ]
      },
      "axisTick": { // y轴刻度样式
        "show": false // 不显示刻度
      },
      // y轴分隔线：与y轴垂直，与刻度对应的准线
      //（这里x轴数据为类目值所以默认不显示分隔线，y轴数据为数值所以默认显示分隔线）
      "splitNumber": 3, // 分隔数量，预估值，实际分隔数可能与设置值有差异
      "splitLine": { // 分隔线样式
        "lineStyle": {
          "width": 4,
          "color": "rgba(0, 0, 0, 0.16)"
        }
      },
      "type": "value"
    }
  ],
  "color": `#ffefac`, // 图线节点图标的默认颜色
  "series": [
    {
      "name": "一天的气温变化",
      "type": "line",
      "smooth": true, // 显示为光滑的曲线
      "data": chartData,
      // 这里如果要将折线节点设置为自定义图标，需指定图标路径
      // "symbol": "image://自定义图标路径",
      "symbol": "pin", // echarts自带的节点样式，参见配置项手册
      "symbolSize": 36, // 设置节点显示大小
      "lineStyle": { // 图线样式
        "color": "rgba(255, 255, 255, 0.8)",
        "width": 4
      },
      "areaStyle": { // 图线与x轴之间面积的填充配置
        "color": { // 渐变色配置
          "x": 0,
          "y": 0,
          "x2": 0,
          "y2": 1,
          "type": "linear",
          "global": false,
          "colorStops": [
            {
              "offset": 0,
              "color": "rgba(255, 255, 255, 0.56)"
            },
            {
              "offset": 1,
              "color": "rgba(255, 255, 255, 0.01)"
            }
          ]
        }
      },
      "markArea": { // 背景色块配置
        "silent": false,
        "data": markAreaCfg.map(cfg =>
          [ // 包含色块在x轴起止点的配置数组
            {
              "xAxis": cfg.range[0],
              "itemStyle": { // 色块配置
                "color": cfg.color,
                "opacity": 0.56
              }
            },
            {
              "xAxis": cfg.range[1]
            }
          ]
        )
      }
    }
  ]
}