需求
使用折线图展示一天内气温的变化,并使用背景色块标注自定义的时间段,预期效果类似:
分析
实现一个折线图并不难,要让实际图表的细节与预期相符,需要的是足够耐心和细心,先浏览官网示例寻找相似的实现效果,并多翻看各个图表组件的配置项: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]
}
]
)
}
}
]
}
运行调试
补充
以下是个人对坐标轴配置项知识点的一点补充记录:
折线图填充色分段:
补充记录一下评论区小伙伴提问的需求,可以参考官网示例:Beijing AQI,在其中的series对象增加这行属性配置即可:
areaStyle: {},
效果图:
比官网更丰富的echarts示例!
强烈推荐一个有非常丰富的echarts在线示例的网站:PPChart,但由于遭到DDOS攻击,PPChart服务不太稳定,大家也可以访问PPChart开发者推荐的另外两个站点:madeapie、isqqw,目前笔者关于echarts的博客代码都已在isqqw创建在线示例o^~^o
参考文档
[1] echarts-配置项手册
[2] 一天用电量分布