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

本文主要是介绍echarts：xy坐标轴配置项demo/背景色块markArea，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文章目录

- 需求
- 分析
- 代码
- 运行调试
- 补充
- 折线图填充色分段：
- 比官网更丰富的echarts示例！
- 参考文档

需求

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

分析

实现一个折线图并不难，要让实际图表的细节与预期相符，需要的是足够耐心和细心，先浏览官网示例寻找相似的实现效果，并多翻看各个图表组件的配置项：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]}])}}]
}