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.思路 直接设 ...
随机推荐
- 安装iTerm2和oh-my-zsh
安装iTerm2和oh-my-zsh 此文是在参考许多教程(见目录:参考)并结合本人安装经历写下的一篇关于iTerm2和oh-my-zsh的认识和超级详细安装教程.全文所有图片均为本人截屏拍摄.希望能 ...
- C++算法之旅、05 基础篇 | 第二章 数据结构
常用代码模板2--数据结构 - AcWing 笔试用数组模拟而不是结构体 使用结构体指针,new Node() 非常慢,创建10万个节点就超时了,做笔试题不会用这种方式(优化是提前初始化好数组,但这样 ...
- 利用BGP Anycast 实现DNS 服务的高可用测试
一.背景 根据当前某公司内部生产系统容器平台架构设计,在各生产线边缘机房部署容器平台,与数据中心容器平台形成纵向冗余,在此情况下,传统部署在数据中心机房的DNS系统成为容器平台业务服务的短板, ...
- RabbitMQ入门实践
一.概述: 大多应用中,可通过消息服务中间件来提升系统异步通信.扩展解耦能力. 1.消息服务中两个重要概念: 消息代理(message broker)和目的地(destination)当消息发送者发送 ...
- 机器学习（6）K近邻算法
k-近邻,通过离你最近的来判断你的类别 例子: 定义:如果一个样本在特征空间中的k个最相似(即特征空间中最邻近的样本中大多数属于某一类别),则该样本属于这个类别 K近邻需要做标准化处理 例如: imp ...
- flutter的json转dart model问题
原文链接 原文链接 Preface 最近在做一个app,以后续用来找工作可以拿出来看看. 试试自己到产品设计能力,前后端能力等等. 中间遇到到一些有值得记录的点全部记录在此. Content json ...
- .NET 8 的 green thread 异步模型被搁置了
.NET 平台上的green thread 异步模型实验结果最近出来了,具体参见:https://github.com/dotnet/runtimelab/issues/2398 ,实验结果总结一下就 ...
- Excel--比较两列数据的异同
首先得到的数据分为两列,两种类型.由于在网站上搜索的时候,网站的"特殊性"会将000638-32-4 前面的0全部去掉.变成了638-32-4.基于得到了两列稍有不同的数据.由于人 ...
- umich cv-2-2
UMICH CV Linear Classifiers 在上一篇博文中,我们讨论了利用损失函数来判断一个权重矩阵的好坏,在这节中我们将讨论如何去找到最优的权重矩阵 想象我们要下到一个峡谷的底部,我们自 ...
- Anaconda虚拟环境配置Python库与Spyder编译器
本文介绍在Anaconda中,为Python的虚拟环境安装第三方库与Spyder等配套软件的方法. 在文章创建Anaconda虚拟Python环境的方法中,我们介绍了在Anaconda环境下, ...