echarts设置多条折线不是你想的那样简单
简单的多条折线图
小伙伴写过多条折线图的都知道，
常见的折线图是 xAxis 配置项下的 data属性上设置时间或者日期。
series配置项下是对应的 legend中的数据以及该条折线的数据。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多条折线图</title>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<div style="width: 900px;height: 400px;"></div>
</body>
<script>
let myChart = echarts.init(document.querySelector('div'))
// 设置X轴的时间
let dataXTime = [
'2023-12-04 09:45:07', '2023-12-04 09:50:07','2023-12-04 09:55:07', '2023-12-04 10:00:07', '2023-12-04 10:05:07',
'2023-12-04 11:05:07','2023-12-04 12:05:07','2023-12-04 13:05:07','2023-12-04 14:05:07','2023-12-04 15:05:07',
]
let option = {
// 设置的是标题
title: {
text: '折线图'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['Email', 'Union Ads']
},
// 网格间距设置
grid: {
left: '30px',
right: '60px',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: dataXTime,
},
yAxis: {
type: 'value'
},
// 数据
series: [
{
name: 'Email',
type: 'line',
data: [120, 132, 101, 134, 90, 230, 210,90, 230, 210]
},
{
name: 'Union Ads',
type: 'line',
data: [220, 182, 191, 234, 290, 330, 310,9, 30, 110]
}
]
};
myChart.setOption(option);
</script>
</html>
发现多条折线共享一个时间
通过上面的小例子，我们发现一个问题：
多条折线共享的是一个时间(时间与数据是1对多的关系)
第一个时间匹配第一个数据，第2个时间匹配第2个数据。
也就是第n个时间匹配第n个数据。
我们不仅会提出这样一个问题：
有没有可能让每一条折线拥有自己的时间呢？
时间不同，也可以显示在一个实例上。
多条折线拥有数据自己的时间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多条折线图</title>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<div style="width: 900px;height: 400px;"></div>
</body>
<script>
let myChart = echarts.init(document.querySelector('div'))
let option = {
// 设置的是标题
title: {
text: '折线图'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['邮件', '短信']
},
// 网格间距设置
grid: {
left: '30px',
right: '60px',
bottom: '3%',
containLabel: true
},
xAxis: {
// xAxis的下不在设置data属性共享时间
type: 'category',
splitLine: { show: false },
lineStyle: {
width: 2
},
axisTick: {
show: false
},
axisLabel:{
// 更改x轴文字颜色的配置
textStyle: {
color: '#717782'
},
showMaxLabel: true // 固定显示X轴的最后一条数据
},
// 更改x轴线的颜色
axisLine: {
lineStyle: {
color: '#D2DBE6;',
width: 1 // x轴线的宽度
}
},
},
yAxis: {
type: 'value'
},
// 数据
series: [
{
"name": "邮件",
"type": "line",
"symbol": "rect",
"connectNulls": true,
"showAllSymbol": true,
// 让每一条折线拥有数据自己的时间
"data": [
[ "2023-12-04 09:50:07", "0.137"],
[ "2023-12-04 09:55:07", "0.147"],
[ "2023-12-04 10:00:07", "0.137"],
[ "2023-12-04 10:05:07", "0.163"],
[ "2023-12-04 10:10:07", "0.150"],
[ "2023-12-04 10:15:07", "0.143"],
[ "2023-12-04 10:20:07", "0.133"],
[ "2023-12-04 10:25:07", "0.147"],
[ "2023-12-04 10:30:07", "0.147"],
[ "2023-12-04 10:35:07", "0.143"],
[ "2023-12-04 10:40:07", "0.140"],
[ "2023-12-04 10:45:07", "0.150"],
[ "2023-12-04 10:50:07", "0.143"],
],
"unit": "%",
"markPoint": {
"symbol": "rect",
"symbolSize": "12",
"label": { "show": false },
"tooltip": { "triggerOn": "click", "trigger": "item" },
}
},
{
"name": "短信",
"type": "line",
"symbol": "rect",
"connectNulls": true,
"showAllSymbol": true,
"data": [
[ "2023-12-04 10:35:07", "0.123"],
[ "2023-12-04 10:40:07", "0.140"],
[ "2023-12-04 10:45:07", "0.150"],
[ "2023-12-04 10:50:07", "0.143"],
],
"unit": "%",
"markPoint": {
"symbol": "circle",
"symbolSize": "12",
"label": { "show": false }
}
}
]
};
myChart.setOption(option);
</script>
</html>
成功了吗？多条折线拥有数据自己的时间
根据上面的图片，我们发现。
好像确实是每一条折线都拥有数据自己的时间了。
但是如果你只细看的话。你就会发现端倪
结束时间都是一样的，但是折线却是在不同的时间上结束的。
很明显不正确的。
多条折线他们必须有一样的开始时间和结束时间？
上面我们发现了问题：结束时间都是一样的，但是折线却是在不同的时间上结束的。
有的机智的小伙伴可能会说：
是因为：多条折线他们必须有一样的开始时间和结束时间。
这样echarts在渲染的时候就不会出现上面这样的情况。
需要有相同的起始点和结束点
感觉有点道理，我们尝试一下
series: [
{
"name": "邮件",
"data": [
[ "2023-12-04 09:50:07", "0.137"],
[ "2023-12-04 09:55:07", "0.147"],
[ "2023-12-04 10:00:07", "0.137"],
[ "2023-12-04 10:05:07", "0.163"],
[ "2023-12-04 10:10:07", "0.150"],
[ "2023-12-04 10:15:07", "0.143"],
[ "2023-12-04 10:20:07", "0.133"],
[ "2023-12-04 10:25:07", "0.147"],
[ "2023-12-04 10:30:07", "0.147"],
[ "2023-12-04 10:35:07", "0.143"],
[ "2023-12-04 10:40:07", "0.140"],
[ "2023-12-04 10:45:07", "0.150"],
[ "2023-12-04 10:50:07", "0.143"],
],
},
{
"name": "短信",
"data": [
[ "2023-12-04 09:50:07", "0.8"],
[ "2023-12-04 10:40:07", "0.140"],
[ "2023-12-04 10:45:07", "0.150"],
[ "2023-12-04 10:50:07", "0.143"],
],
}
]
现在都有相同的起始点(2023-12-04 09:50:07)和结束点(2023-12-04 10:50:07)。
如果每条折线的时间都没有交集会怎么样?
我们发现只要有相同的起始点和结束点；
就会可以达到我们的预期效果。
此时，有的小伙伴说:
"如果他们的时间如果没有交集会怎么样(有相同的起始点和结束点)"
"data": [
[ "2023-12-04 09:50:07", "0.137"],
[ "2023-12-04 09:55:07", "0.147"],
[ "2023-12-04 10:00:07", "0.137"],
[ "2023-12-04 10:05:07", "0.163"],
[ "2023-12-04 10:10:07", "0.150"],
[ "2023-12-04 10:15:07", "0.143"],
[ "2023-12-04 10:20:07", "0.133"],
[ "2023-12-04 10:25:07", "0.147"],
[ "2023-12-04 10:30:07", "0.147"],
[ "2023-12-04 10:35:07", "0.143"],
[ "2023-12-04 10:40:07", "0.140"],
[ "2023-12-04 10:45:07", "0.150"],
[ "2023-12-04 10:50:07", "0.143"],
],
"data": [
[ "2023-12-04 09:50:07", "0.8"],
[ "2023-12-04 09:52:07", "1.23"],
[ "2023-12-04 10:41:07", "0.140"],
[ "2023-12-04 10:49:07", "0.150"],
[ "2023-12-04 10:50:07", "0.143"],
],
xAxis 的 type值设置time
时间绘制的折线图不对，怎么会有返回去的折线？
怎么去解决这个问题呢？
有些小伙伴又提出了。我们可以将 xAxis 的 type值设置time。
就可以解决这个问题。
在 ECharts 中，type的值是 time 和 category 的区别
1.数据类型：'time' 表示时间类型的数据，适用于连续的时序数据。
通常返回的是时间戳。我们为了方便这里写的是yyyy-mm-dd hh:mm:ss
而 'category' 表示类目类型的数据，适用于离散的类目数据。
2.显示方式：在 'time' 类型下，
ECharts 会根据时间跨度自动切换显示的时间粒度，例如从月、星期、日到小时等。
而在 'category' 类型下，坐标轴只会显示类目列表，并且坐标轴内仅包含这些指定类目的坐标。
时间格式又不对
有眼尖的小伙伴发现了一个小问题。
我们给的时间是 yyyy-mm-dd hh:mm:ss的格式
但是刚刚发现展示的是 hh:ss mm-dd
格式和我们预期的不符合
xAxis 配置项 axisLabel下的formatter 转换时间格式
通过查询echarts的文档。
我们发现 xAxis.axisLabel.formatter 可以做到对格式进行转换。
formatter：刻度标签的内容格式器，支持字符串模板和回调函数两种形式。
对于时间轴（type: 'time'），formatter 的字符串模板支持3种形式：
1.字符串模板：简单快速实现常用日期时间模板，string 类型
2.回调函数：自定义 formatter，可以用来实现复杂高级的格式，Function 类型
3.分级模板：为不同时间粒度的标签使用不同的 formatter，object 类型
我发现使用 字符串模板 模板是不行的。分级模板没有试过。
官网推荐使用字符串模板，如果可以使用成功。
我们就不需要在写一个方法进行转化了。
但是很遗憾，失败了。可能是用的方式错误吧
字符串模板是失败的
字符串模板是失败的原因
本来我已经失望了。
结果小脑袋灵光一闪，猜测有没有可能是版本的原因。
我果断去切换到5的版本
<script src="https://cdn.staticfile.org/echarts/5.3.0/echarts.min.js"></script>
果然字符串模板显示正常了
模板字符串的详细使用地址是：https://echarts.apache.org/zh/option.html#xAxis.axisLabel.formatter
字符串模板转化时间格式【推荐】
xAxis: {
// xAxis的下不在设置data属性共享时间`
type: 'time',
splitLine: { show: false },
lineStyle: {
width: 2
},
axisTick: {
show: false
},
axisLabel:{
// 更改x轴文字颜色的配置
textStyle: {
color: '#717782'
},
// 设置坐标轴上的时间格式 --使用的是模板字符串
// formatter: "{yyyy}-{MM}-{dd}", 得到的 label 形如：'2020-12-02'
formatter: '{yyyy}-{MM}-{dd} \n{HH}:{mm}:{ss}',
showMinLabel: true,
showMaxLabel: true // 固定显示X轴的最后一条数据
},
// 更改x轴线的颜色
axisLine: {
lineStyle: {
color: '#D2DBE6;',
width: 1 // x轴线的宽度
}
},
},
使用回调函数转化时间格式
function backTime(value){
let date = new Date(value);
// 获取年份、月份和日期
let year = date.getFullYear();
let month = date.getMonth() + 1; // 月份从 0 开始，需要加 1
let day = date.getDate();
let hours = date.getHours();
let minutes = date.getMinutes();
let seconds = date.getSeconds();
// 格式化月份和日期为两位数（不足两位时补零）
month = month < 10 ? '0' + month : month;
day = day < 10 ? '0' + day : day;
hours = hours < 10 ? '0' + hours : hours;
minutes = minutes < 10 ? '0' + minutes : minutes;
seconds = seconds < 10 ? '0' + seconds : seconds;
// 返回格式化后的字符串
return year + '-' + month + '-' + day + ' ' +
hours + ':' + minutes + ':' + seconds;
}
xAxis: {
// xAxis的下不在设置data属性共享时间
type: 'time',
splitLine: { show: false },
lineStyle: {
width: 2
},
axisTick: {
show: false
},
axisLabel:{
// 更改x轴文字颜色的配置
textStyle: {
color: '#717782'
},
// 设置坐标轴上的时间格式
formatter: function (value) {
console.log('时间戳',value )
// 将时间转换为 我们需要的格式 ，这里的value是一个时间戳
return backTime(value)
},
showMinLabel: true,
showMaxLabel: true // 固定显示X轴的最后一条数据
},
// 更改x轴线的颜色
axisLine: {
lineStyle: {
color: '#D2DBE6;',
width: 1 // x轴线的宽度
}
},
},
特别提醒： type: 'time'的时候，
formatter : function (value) { }
中的value是一个时间戳
更改tooltip的时间格式
tooltip: {
trigger: 'axis',
formatter: (c) => {
let str = ''
let temp = {
showTime: '', // 时间
marker: '', // 颜色
seriesName: '', // legend名称
valueData: '', // 数值
setWidthSpan: '',
}
c.forEach((item) => {
temp.showTime = item.data[0]
temp.marker = item.marker
temp.seriesName = item.seriesName
temp.valueData = item.value[1]
temp.setWidthSpan = '<span style="display:inline-block;width:10px;height:10px;"></span>'
str += temp.marker + temp.seriesName + temp.setWidthSpan + temp.valueData + '<br />'
})
return temp.showTime + '<br />' + str
},
},
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多条折线图</title>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<div style="width: 900px;height: 400px;"></div>
</body>
<script>
function backTime(value){
let date = new Date(value);
// 获取年份、月份和日期
let year = date.getFullYear();
let month = date.getMonth() + 1; // 月份从 0 开始，需要加 1
let day = date.getDate();
let hours = date.getHours();
let minutes = date.getMinutes();
let seconds = date.getSeconds();
// 格式化月份和日期为两位数（不足两位时补零）
month = month < 10 ? '0' + month : month;
day = day < 10 ? '0' + day : day;
hours = hours < 10 ? '0' + hours : hours;
minutes = minutes < 10 ? '0' + minutes : minutes;
seconds = seconds < 10 ? '0' + seconds : seconds;
// 返回格式化后的字符串
return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
}
let myChart = echarts.init(document.querySelector('div'))
let option = {
// 设置的是标题
title: {
text: '折线图'
},
tooltip: {
trigger: 'axis',
formatter: (c) => {
let str = ''
let temp = {
showTime: '', // 时间
marker: '', // 颜色
seriesName: '', // legend名称
valueData: '', // 数值
setWidthSpan: '',
}
c.forEach((item) => {
temp.showTime = item.data[0]
temp.marker = item.marker
temp.seriesName = item.seriesName
temp.valueData = item.value[1]
temp.setWidthSpan = '<span style="display:inline-block;width:10px;height:10px;"></span>'
str += temp.marker + temp.seriesName + temp.setWidthSpan + temp.valueData + '<br />'
})
return temp.showTime + '<br />' + str
},
},
legend: {
data: ['邮件', '短信']
},
// 网格间距设置
grid: {
left: '30px',
right: '60px',
bottom: '3%',
containLabel: true
},
xAxis: {
// xAxis的下不在设置data属性共享时间`
type: 'time',
splitLine: { show: false },
lineStyle: {
width: 2
},
axisTick: {
show: false
},
axisLabel:{
// 更改x轴文字颜色的配置
textStyle: {
color: '#717782'
},
// 设置坐标轴上的时间格式
formatter: function (value) {
console.log('时间戳',value )
// 将时间转换为 JavaScript 日期对象
return backTime(value)
},
showMinLabel: true,
showMaxLabel: true // 固定显示X轴的最后一条数据
},
// 更改x轴线的颜色
axisLine: {
lineStyle: {
color: '#D2DBE6;',
width: 1 // x轴线的宽度
}
},
},
yAxis: {
type: 'value'
},
// 数据
series: [
{
"name": "邮件",
"type": "line",
"symbol": "rect",
"connectNulls": true,
"showAllSymbol": true,
// 让每一条折线拥有数据自己的时间
"data": [
[ "2023-12-04 09:50:07", "0.137"],
[ "2023-12-04 09:55:07", "0.147"],
[ "2023-12-04 10:00:07", "0.137"],
[ "2023-12-04 10:05:07", "0.163"],
[ "2023-12-04 10:10:07", "0.150"],
[ "2023-12-04 10:15:07", "0.143"],
[ "2023-12-04 10:20:07", "0.133"],
[ "2023-12-04 10:25:07", "0.147"],
[ "2023-12-04 10:30:07", "0.147"],
[ "2023-12-04 10:35:07", "0.143"],
[ "2023-12-04 10:40:07", "0.140"],
[ "2023-12-04 10:45:07", "0.150"],
[ "2023-12-04 10:50:07", "0.143"],
],
"unit": "%",
"markPoint": {
"symbol": "rect",
"symbolSize": "12",
"label": { "show": false },
"tooltip": { "triggerOn": "click", "trigger": "item" },
}
},
{
"name": "短信",
"type": "line",
"symbol": "rect",
"connectNulls": true,
"showAllSymbol": true,
"data": [
[ "2023-12-04 09:50:07", "0.8"],
[ "2023-12-04 09:52:07", "1.23"],
[ "2023-12-04 10:41:07", "0.140"],
[ "2023-12-04 10:42:07", "0.140"],
[ "2023-12-04 10:45:07", "0.140"],
[ "2023-12-04 10:49:07", "0.150"],
[ "2023-12-04 10:50:07", "0.143"],
],
"unit": "%",
"markPoint": {
"symbol": "circle",
"symbolSize": "12",
"label": { "show": false }
}
}
]
};
myChart.setOption(option);
</script>
</html>
echarts设置多条折线不是你想的那样简单的更多相关文章
- [Swift通天遁地]三、手势与图表-(6)创建包含三条折线的线性图表
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- 小程序textarea设置maxlength后不是你想的那样简单
可能很多小伙伴们.看见这个标题后; 觉得作者是一个标题党. textarea设置maxlength后, 限制用户输入的字符呗! 还能怎么样呢? 恭喜你,说对了一半. 之前我也一直是这样想的. 知道今天 ...
- 详细介绍如何计算两条折线的交点并使用Echarts展示以及图表优化
1.背景 前段时间公司有个需求,需要在一个图表中展示两条折线,并且绘制出两条线的交点.为了满足需求大哥的需求,我也是着实想了有一会.下面我就把具体的实现过程给大家展示一下. 1.1.ECharts 简 ...
- 关于C#chart图表实现多条折线动态绑定数据的问题
之前就已经实现了多条折线绑定数据并显示,但不是动态绑定,而是每一条数据都要进行一次绑定,个人觉得在解决实际问题时,这样的解决方法过于笨重且缺乏扩展性,这次主要是对代码进行优化,实现写一遍代码,无论数据 ...
- 解决echarts的叠堆折线图数据出现坐标和值对不上的问题
原文:https://blog.csdn.net/qq_36538012/article/details/88889545 ------------------------------- 说一个小bu ...
- echarts实现多条可拖动节点的折现图
这篇博文主要是利用echarts实现两条以及多条可拖动节点的曲线,demo脱胎于官方demo,在官方demo的基础上添加了另一条曲线.因为之前写过一篇在vue中使用echarts实现可拖动节点的折线图 ...
- Android 设置进度条背景
Android 设置进度条背景 直接上代码 <ProgressBar android:id="@+id/progressBar" android:layout_width=& ...
- Android_listview设置每条信息的间距
Android_listview设置每条信息的间距 设置listView的item间距,可以在xml布局文件中的listView下设置xml属性: android:divider="#000 ...
- Echarts 设置地图上文字大小及颜色
Echarts 设置地图上文字大小及颜色,效果如下: 上代码:关键代码用红色 series: [ { //name: '香港18区人口密度', type: 'map', mapType: 'jiang ...
- [iOS微博项目 - 4.3] - 设置每条微博边框样式
github: https://github.com/hellovoidworld/HVWWeibo A.设置每条微博边框样式 1.需求 不需要分割线 每个微博之间留有一定的间隙 2.思路 直接设 ...
随机推荐
- cs50ai1
cs50ai1-------Knowledge cs50ai1-------Knowledge 基础知识 课后题目 代码实践 学习链接 总结 基础知识 对我们来说,一些基本的logic是自然而然的,我 ...
- C#是否应该限制链式重载的设计模式？
1.代码的可阅读性 一眼看懂是什么意思,并且能看出生成的SQL是什么样的 var list = db.Queryable<Student>() .GroupBy(it => it.N ...
- Redis从入门到放弃（11）：雪崩、击穿、穿透
1.前言 Redis作为一款高性能的缓存数据库,为许多应用提供了快速的数据访问和存储能力.然而,在使用Redis时,我们不可避免地会面对一些常见的问题,如缓存雪崩.缓存穿透和缓存击穿.本文将深入探讨这 ...
- vue3探索——5分钟快速上手大菠萝pinia
温馨提示:本文以vue3+vite+ts举例,vite配置和ts语法侧重较少,比较适合有vuex或者vue基础的小伙伴们儿查阅. 安装pinia yarn yarn add pinia npm npm ...
- 集群部署专题之二：超高性能RPC框架Zeroc-ICE集群部署简易教程
一.前言 Zeroc ICE在简中互联网的资料十分匮乏,以至于大家线上使用时可能会有所顾虑.其实大家尽可放心,ZerocICE是一款性能和稳定性都非常优秀的RPC组件,这也是我当时选择ZerocICE ...
- MySQL 表分区简介
MySQL表分区是一种数据库管理技术,用于将大型表拆分成更小.更可管理的分区(子表).每个分区可以独立进行维护.备份和查询,从而提高数据库性能和管理效率.以下是详细介绍MySQL表分区的步骤和注意事项 ...
- 图解 LeetCode 算法汇总——二分查找
二分查找(Binary Search)是一种在有序数组中查找特定元素的高效算法.它的基本思想是将目标值与数组中间的元素进行比较,如果目标值小于中间元素,则在数组的左半部分继续查找,否则在右半部分查找, ...
- Python并发编程——IO模型、阻塞IO、非阻塞IO、多路复用、异步IO、IO模型比较、selectors模块、复习网络和并发知识点
文章目录 每日测验 一 IO模型介绍 二 阻塞IO(blocking IO) 三 非阻塞IO(non-blocking IO) 四 多路复用IO(IO multiplexing) 五 异步IO(Asy ...
- ABC319 A-E 题解
A 用 map <string, int> 将名字对应的值存下来即可. 赛时代码 B 按照题意暴力模拟,注意细节. 赛时代码 C 答辩题,卡了我半个小时. 枚举 \(1\sim 9\) 的 ...
- 来世再不选Java！
危机感 距离上一次找工作面试已经过去快2年了,那时候正值疫情肆虐,虽然还未感受到"寒潮来临"的苗头,但最终还是成功通过了几轮面试,顺利签约.在目前公司待了2年了,在大环境的影响下, ...