echarts: xy coordinate axis configuration item demo/background color block markArea

need

Use a line chart to display the temperature change within a day, and use the background color block to mark the custom time period. The expected effect is similar:

analyze

It is not difficult to implement a line chart. To make the details of the actual chart match expectations, it takes patience and care. First browse the official website examples to find similar implementation effects, and look at the configuration items of each chart component: echarts- configuration item manual .

This temperature line chart has two interesting requirements:
①I want the line to start from the coordinate origin, that is, the first point in the line fits with the coordinate origin, so I need to insert this node at the beginning of the data list and set xAxis.boundaryGap :false eliminates the default blank left and right sides of the x-axis;
②Background color blocks, official examples with reference effects: power consumption distribution in a day

the code

This code has created an online example in isqqw, you can directly click this link: isqqw-jump debugging of temperature changes in a day , there are more comprehensive (commonly used) xy coordinate axis configuration items, welcome to exchange and supplement~

// 生成测试数据，时间为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]
            }
          ]
        )
      }
    }
  ]
}

run debug

isqqw - temperature change in a day

Replenish

The following is a supplementary record of personal knowledge points on the coordinate axis configuration items:

Line chart fill color segment:

Supplementary recording of the needs of small partners in the comment area, you can refer to the official website example: Beijing AQI , add this line of attribute configuration to the series object:

areaStyle: {},

Renderings:

Richer echarts examples than the official website!

Strongly recommend a website with a lot of echarts online examples: PPChart , but due to DDOS attacks, PPChart service is not stable, you can also visit the other two sites recommended by PPChart developers: madeapie , isqqw , the author is currently about echarts All blog codes have been created online examples o^~^o in isqqw

reference documents

[1] echarts-configuration item manual
[2] Power consumption distribution in a day