echarts设置多条折线不是你想的那样简单
生活随笔
收集整理的這篇文章主要介紹了
echarts设置多条折线不是你想的那样简单
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
簡(jiǎn)單的多條折線圖
小伙伴寫過(guò)多條折線圖的都知道，
常見(jiàn)的折線圖是 xAxis 配置項(xiàng)下的 data屬性上設(shè)置時(shí)間或者日期。
series配置項(xiàng)下是對(duì)應(yīng)的 legend中的數(shù)據(jù)以及該條折線的數(shù)據(jù)。
<!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'))
// 設(shè)置X軸的時(shí)間
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 = {
// 設(shè)置的是標(biāo)題
title: {
text: '折線圖'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['Email', 'Union Ads']
},
// 網(wǎng)格間距設(shè)置
grid: {
left: '30px',
right: '60px',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: dataXTime,
},
yAxis: {
type: 'value'
},
// 數(shù)據(jù)
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>
發(fā)現(xiàn)多條折線共享一個(gè)時(shí)間
通過(guò)上面的小例子，我們發(fā)現(xiàn)一個(gè)問(wèn)題：
多條折線共享的是一個(gè)時(shí)間(時(shí)間與數(shù)據(jù)是1對(duì)多的關(guān)系)
第一個(gè)時(shí)間匹配第一個(gè)數(shù)據(jù)，第2個(gè)時(shí)間匹配第2個(gè)數(shù)據(jù)。
也就是第n個(gè)時(shí)間匹配第n個(gè)數(shù)據(jù)。
我們不僅會(huì)提出這樣一個(gè)問(wèn)題：
有沒(méi)有可能讓每一條折線擁有自己的時(shí)間呢？
時(shí)間不同，也可以顯示在一個(gè)實(shí)例上。
多條折線擁有數(shù)據(jù)自己的時(shí)間
<!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 = {
// 設(shè)置的是標(biāo)題
title: {
text: '折線圖'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['郵件', '短信']
},
// 網(wǎng)格間距設(shè)置
grid: {
left: '30px',
right: '60px',
bottom: '3%',
containLabel: true
},
xAxis: {
// xAxis的下不在設(shè)置data屬性共享時(shí)間
type: 'category',
splitLine: { show: false },
lineStyle: {
width: 2
},
axisTick: {
show: false
},
axisLabel:{
// 更改x軸文字顏色的配置
textStyle: {
color: '#717782'
},
showMaxLabel: true // 固定顯示X軸的最后一條數(shù)據(jù)
},
// 更改x軸線的顏色
axisLine: {
lineStyle: {
color: '#D2DBE6;',
width: 1 // x軸線的寬度
}
},
},
yAxis: {
type: 'value'
},
// 數(shù)據(jù)
series: [
{
"name": "郵件",
"type": "line",
"symbol": "rect",
"connectNulls": true,
"showAllSymbol": true,
// 讓每一條折線擁有數(shù)據(jù)自己的時(shí)間
"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>
成功了嗎？多條折線擁有數(shù)據(jù)自己的時(shí)間
根據(jù)上面的圖片，我們發(fā)現(xiàn)。
好像確實(shí)是每一條折線都擁有數(shù)據(jù)自己的時(shí)間了。
但是如果你只細(xì)看的話。你就會(huì)發(fā)現(xiàn)端倪
結(jié)束時(shí)間都是一樣的，但是折線卻是在不同的時(shí)間上結(jié)束的。
很明顯不正確的。
多條折線他們必須有一樣的開始時(shí)間和結(jié)束時(shí)間？
上面我們發(fā)現(xiàn)了問(wèn)題：結(jié)束時(shí)間都是一樣的，但是折線卻是在不同的時(shí)間上結(jié)束的。
有的機(jī)智的小伙伴可能會(huì)說(shuō)：
是因?yàn)椋憾鄺l折線他們必須有一樣的開始時(shí)間和結(jié)束時(shí)間。
這樣echarts在渲染的時(shí)候就不會(huì)出現(xiàn)上面這樣的情況。
需要有相同的起始點(diǎn)和結(jié)束點(diǎn)
感覺(jué)有點(diǎn)道理，我們嘗試一下
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"],
],
}
]
現(xiàn)在都有相同的起始點(diǎn)(2023-12-04 09:50:07)和結(jié)束點(diǎn)(2023-12-04 10:50:07)。
如果每條折線的時(shí)間都沒(méi)有交集會(huì)怎么樣?
我們發(fā)現(xiàn)只要有相同的起始點(diǎn)和結(jié)束點(diǎn)；
就會(huì)可以達(dá)到我們的預(yù)期效果。
此時(shí)，有的小伙伴說(shuō):
"如果他們的時(shí)間如果沒(méi)有交集會(huì)怎么樣(有相同的起始點(diǎn)和結(jié)束點(diǎn))"
"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值設(shè)置time
時(shí)間繪制的折線圖不對(duì)，怎么會(huì)有返回去的折線？
怎么去解決這個(gè)問(wèn)題呢？
有些小伙伴又提出了。我們可以將 xAxis 的 type值設(shè)置time。
就可以解決這個(gè)問(wèn)題。
在 ECharts 中，type的值是 time 和 category 的區(qū)別
1.數(shù)據(jù)類型：'time' 表示時(shí)間類型的數(shù)據(jù)，適用于連續(xù)的時(shí)序數(shù)據(jù)。
通常返回的是時(shí)間戳。我們?yōu)榱朔奖氵@里寫的是yyyy-mm-dd hh:mm:ss
而 'category' 表示類目類型的數(shù)據(jù)，適用于離散的類目數(shù)據(jù)。
2.顯示方式：在 'time' 類型下，
ECharts 會(huì)根據(jù)時(shí)間跨度自動(dòng)切換顯示的時(shí)間粒度，例如從月、星期、日到小時(shí)等。
而在 'category' 類型下，坐標(biāo)軸只會(huì)顯示類目列表，并且坐標(biāo)軸內(nèi)僅包含這些指定類目的坐標(biāo)。
時(shí)間格式又不對(duì)
有眼尖的小伙伴發(fā)現(xiàn)了一個(gè)小問(wèn)題。
我們給的時(shí)間是 yyyy-mm-dd hh:mm:ss的格式
但是剛剛發(fā)現(xiàn)展示的是 hh:ss mm-dd
格式和我們預(yù)期的不符合
xAxis 配置項(xiàng) axisLabel下的formatter 轉(zhuǎn)換時(shí)間格式
通過(guò)查詢echarts的文檔。
我們發(fā)現(xiàn) xAxis.axisLabel.formatter 可以做到對(duì)格式進(jìn)行轉(zhuǎn)換。
formatter：刻度標(biāo)簽的內(nèi)容格式器，支持字符串模板和回調(diào)函數(shù)兩種形式。
對(duì)于時(shí)間軸（type: 'time'），formatter 的字符串模板支持3種形式：
1.字符串模板：簡(jiǎn)單快速實(shí)現(xiàn)常用日期時(shí)間模板，string 類型
2.回調(diào)函數(shù)：自定義 formatter，可以用來(lái)實(shí)現(xiàn)復(fù)雜高級(jí)的格式，F(xiàn)unction 類型
3.分級(jí)模板：為不同時(shí)間粒度的標(biāo)簽使用不同的 formatter，object 類型
我發(fā)現(xiàn)使用 字符串模板 模板是不行的。分級(jí)模板沒(méi)有試過(guò)。
官網(wǎng)推薦使用字符串模板，如果可以使用成功。
我們就不需要在寫一個(gè)方法進(jìn)行轉(zhuǎn)化了。
但是很遺憾，失敗了。可能是用的方式錯(cuò)誤吧
字符串模板是失敗的
字符串模板是失敗的原因
本來(lái)我已經(jīng)失望了。
結(jié)果小腦袋靈光一閃，猜測(cè)有沒(méi)有可能是版本的原因。
我果斷去切換到5的版本
<script src="https://cdn.staticfile.org/echarts/5.3.0/echarts.min.js"></script>
果然字符串模板顯示正常了
模板字符串的詳細(xì)使用地址是：https://echarts.apache.org/zh/option.html#xAxis.axisLabel.formatter
字符串模板轉(zhuǎn)化時(shí)間格式【推薦】
xAxis: {
// xAxis的下不在設(shè)置data屬性共享時(shí)間`
type: 'time',
splitLine: { show: false },
lineStyle: {
width: 2
},
axisTick: {
show: false
},
axisLabel:{
// 更改x軸文字顏色的配置
textStyle: {
color: '#717782'
},
// 設(shè)置坐標(biāo)軸上的時(shí)間格式 --使用的是模板字符串
// formatter: "{yyyy}-{MM}-{dd}", 得到的 label 形如：'2020-12-02'
formatter: '{yyyy}-{MM}-{dd} \n{HH}:{mm}:{ss}',
showMinLabel: true,
showMaxLabel: true // 固定顯示X軸的最后一條數(shù)據(jù)
},
// 更改x軸線的顏色
axisLine: {
lineStyle: {
color: '#D2DBE6;',
width: 1 // x軸線的寬度
}
},
},
使用回調(diào)函數(shù)轉(zhuǎn)化時(shí)間格式
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();
// 格式化月份和日期為兩位數(shù)（不足兩位時(shí)補(bǔ)零）
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的下不在設(shè)置data屬性共享時(shí)間
type: 'time',
splitLine: { show: false },
lineStyle: {
width: 2
},
axisTick: {
show: false
},
axisLabel:{
// 更改x軸文字顏色的配置
textStyle: {
color: '#717782'
},
// 設(shè)置坐標(biāo)軸上的時(shí)間格式
formatter: function (value) {
console.log('時(shí)間戳',value )
// 將時(shí)間轉(zhuǎn)換為 我們需要的格式 ，這里的value是一個(gè)時(shí)間戳
return backTime(value)
},
showMinLabel: true,
showMaxLabel: true // 固定顯示X軸的最后一條數(shù)據(jù)
},
// 更改x軸線的顏色
axisLine: {
lineStyle: {
color: '#D2DBE6;',
width: 1 // x軸線的寬度
}
},
},
特別提醒： type: 'time'的時(shí)候，
formatter : function (value) { }
中的value是一個(gè)時(shí)間戳
更改tooltip的時(shí)間格式
tooltip: {
trigger: 'axis',
formatter: (c) => {
let str = ''
let temp = {
showTime: '', // 時(shí)間
marker: '', // 顏色
seriesName: '', // legend名稱
valueData: '', // 數(shù)值
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();
// 格式化月份和日期為兩位數(shù)（不足兩位時(shí)補(bǔ)零）
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 = {
// 設(shè)置的是標(biāo)題
title: {
text: '折線圖'
},
tooltip: {
trigger: 'axis',
formatter: (c) => {
let str = ''
let temp = {
showTime: '', // 時(shí)間
marker: '', // 顏色
seriesName: '', // legend名稱
valueData: '', // 數(shù)值
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: ['郵件', '短信']
},
// 網(wǎng)格間距設(shè)置
grid: {
left: '30px',
right: '60px',
bottom: '3%',
containLabel: true
},
xAxis: {
// xAxis的下不在設(shè)置data屬性共享時(shí)間`
type: 'time',
splitLine: { show: false },
lineStyle: {
width: 2
},
axisTick: {
show: false
},
axisLabel:{
// 更改x軸文字顏色的配置
textStyle: {
color: '#717782'
},
// 設(shè)置坐標(biāo)軸上的時(shí)間格式
formatter: function (value) {
console.log('時(shí)間戳',value )
// 將時(shí)間轉(zhuǎn)換為 JavaScript 日期對(duì)象
return backTime(value)
},
showMinLabel: true,
showMaxLabel: true // 固定顯示X軸的最后一條數(shù)據(jù)
},
// 更改x軸線的顏色
axisLine: {
lineStyle: {
color: '#D2DBE6;',
width: 1 // x軸線的寬度
}
},
},
yAxis: {
type: 'value'
},
// 數(shù)據(jù)
series: [
{
"name": "郵件",
"type": "line",
"symbol": "rect",
"connectNulls": true,
"showAllSymbol": true,
// 讓每一條折線擁有數(shù)據(jù)自己的時(shí)間
"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>
總結(jié)
以上是生活随笔為你收集整理的echarts设置多条折线不是你想的那样简单的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 性价比拉满！哪吒V全系优惠1万元 限量1
- 下一篇： 开源地图库OpenLayers的简单使用