echarts折線圖實(shí)現(xiàn)部分虛線部分實(shí)線效果的方法
更新時(shí)間：2024年09月20日 11:34:23 作者：暴富的im
在折線圖中,通常實(shí)線表示實(shí)際數(shù)據(jù),而虛線用于表示預(yù)測(cè)數(shù)據(jù),這篇文章主要介紹了echarts折線圖實(shí)現(xiàn)部分虛線部分實(shí)線效果的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
場(chǎng)景：
折線圖一般都是實(shí)線為準(zhǔn)，但是由于最后一個(gè)數(shù)據(jù)是預(yù)測(cè)。所以想要實(shí)現(xiàn)最后一段為虛線。
效果圖：
具體實(shí)現(xiàn)：
series:[
{
name: "銷售總金額",
type: "line",
smooth: true,
barWidth: 10,
stack: 'Total',
itemStyle: {
normal: {
color: "#F02FC2",
lineStyle: {
width: 2,
type: 'solid' //'dotted'虛線 'solid'實(shí)線
}
},
// 強(qiáng)調(diào)最后一個(gè)數(shù)據(jù)點(diǎn)的樣式
},
data: [1213,232132,4324,2,23,42323,4234,4243223,424334,4324,423423,64456]
PS:重點(diǎn)虛線的那一段的開頭數(shù)據(jù)需要與實(shí)線的最后一個(gè)數(shù)據(jù)對(duì)應(yīng)
},
{
name: "銷售總金額",
type: "line",
smooth: true,
barWidth: 10,
itemStyle: {
normal: {
color: "#F02FC2",
// 最后一個(gè)點(diǎn)的邊框顏色
borderWidth: 2,
lineStyle: {
width: 2,
type: 'dotted',
color: "yellow"http://'dotted'虛線 'solid'實(shí)線
}
}
},
data: ["-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", 64456, 52435]
},
]同理：如果中間段的數(shù)據(jù)需要虛線也按這個(gè)方法即可。
數(shù)據(jù)處理：
let dataValue = [1, 2, 3, 4, 5, 6];
let dataValue1 = [ ...new Array(dataValue.length - 1).fill('-'), dataValue[dataValue.length - 1]多條線點(diǎn)重合的處理方法
防止多個(gè)點(diǎn)以及值為空的情況
this.options = {
tooltip: {
trigger: "axis",
backgroundColor: "rgba(255,255,255,0.8)",
formatter: function (params, ticket, callback) {
var htmlStr = '';
var valMap = {};
for (var i = 0; i < params.length; i++) {
var param = params[i];
var xName = param.name;//x軸的名稱
var seriesName = param.seriesName;//圖例名稱
var value = param.value;//y軸值
var color = param.color;//圖例顏色
//過濾無效值
if (value == '-') {
continue;
}
//過濾重疊值
if (valMap[seriesName] == value) {
continue;
}
if (i === 0) {
htmlStr += xName + '<br/>';//x軸的名稱
}
htmlStr += '<div>';
//為了保證和原來的效果一樣，這里自己實(shí)現(xiàn)了一個(gè)點(diǎn)的效果
htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>';
//圓點(diǎn)后面顯示的文本
htmlStr += seriesName + '：' + value;
htmlStr += '</div>';
valMap[seriesName] = value;
}
return htmlStr;
},
axisPointer: {
type: "shadow",
label: {
show: true,
backgroundColor: "#7B7DDC"
}
}
},
legend: {
data: ["銷售總金額", "回款總金額"],
textStyle: {
color: "#B4B4B4"
},
top: "0%"
},
grid: {
left: '0%',
right: '3%',
bottom: '8%',
width: "96%",
containLabel: true
},
xAxis: {
data: this.cdata.category,
axisLine: {
lineStyle: {
color: "#B4B4B4"
}
},
type: 'category',
boundaryGap: true,
},
yAxis: [
{
splitLine: { show: false },
axisLine: {
lineStyle: {
color: "#B4B4B4"
}
},
axisLabel: {
formatter: "{value} "
}
},
{
splitLine: { show: false },
axisLine: {
lineStyle: {
color: "#B4B4B4"
}
},
axisLabel: {
formatter: "{value} "
}
}
],
series: [
{
name: "銷售總金額",
type: "line",
smooth: true,
barWidth: 10,
// stack: 'Total', 這個(gè)不去掉會(huì)出現(xiàn)多個(gè)點(diǎn)
itemStyle: {
normal: {
color: "#F02FC2",
lineStyle: {
width: 2,
type: 'solid' //'dotted'虛線 'solid'實(shí)線
}
},
// 強(qiáng)調(diào)最后一個(gè)數(shù)據(jù)點(diǎn)的樣式
},
data: this.cdata.rateData
},
{
name: "銷售總金額",
type: "line",
smooth: true,
barWidth: 10,
itemStyle: {
normal: {
color: "#F02FC2",
// 最后一個(gè)點(diǎn)的邊框顏色
// borderWidth: 2,
lineStyle: {
width: 2,
type: 'dotted',
// color: "yellow"http://'dotted'虛線 'solid'實(shí)線
}
}
},
data: this.cdata.mockRateData
},
{
name: "回款總金額",
type: "line",
barWidth: 10,
smooth: true,
itemStyle: {
normal: {
barBorderRadius: 5,
color: "#7e8be9",
lineStyle: {
width: 2,
type: 'solid' //'dotted'虛線 'solid'實(shí)線
}
}
},
data: this.cdata.barData [1,2,3,4,'-']
},
{
name: "回款總金額",
type: "line",
barWidth: 10,
smooth: true,
smooth: false,
itemStyle: {
normal: {
// barBorderRadius: 5,
color: "#7e8be9",
// color: "#7e8be9",
lineStyle: {
width: 2,
type: 'dotted' //'dotted'虛線 'solid'實(shí)線
}
}
},
data: this.cdata.mockBarData ['-','-','-',4,5]
},
]
}總結(jié)
到此這篇關(guān)于echarts折線圖實(shí)現(xiàn)部分虛線部分實(shí)線效果的文章就介紹到這了,更多相關(guān)echarts折線圖部分虛線內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
淺談javascript 函數(shù)表達(dá)式和函數(shù)聲明的區(qū)別
javascript中聲明函數(shù)的方法有兩種:函數(shù)聲明式和函數(shù)表達(dá)式.究竟他們用起來有什么區(qū)別呢，今天就本著打破砂鍋問到底的精神，好好來說說這個(gè)讓人神魂顛倒的--函數(shù)聲明。2016-01-01
JSON 在很多場(chǎng)合下作為數(shù)據(jù)格式比XML要更加方便。JSON的數(shù)據(jù)由對(duì)象、數(shù)組和元素等格式組成。每種格式都可以包含合法的JavaScript數(shù)據(jù)類型2014-01-01
這篇文章主要介紹了使用javascript如何生成隨機(jī)顏色,需要的朋友可以參考下2014-05-05
這篇文章整理了JavaScript文件上傳的常見問題，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06
處理JavaScript浮點(diǎn)數(shù)精度問題的解決方案
在開發(fā)過程中,特別是涉及到金額計(jì)算或需要精確比較的場(chǎng)景,浮點(diǎn)數(shù)精度問題是一個(gè)常見而重要的挑戰(zhàn),本文將介紹在JavaScript中如何識(shí)別、理解和解決這些問題,并提供一些實(shí)用的技巧和建議,需要的朋友可以參考下2024-06-06
這篇文章主要為大家詳細(xì)介紹了微信小程序重寫tabbar底部導(dǎo)航，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-11-11
js實(shí)現(xiàn)帶圓角的多級(jí)下拉菜單效果
這篇文章主要介紹了js實(shí)現(xiàn)帶圓角的多級(jí)下拉菜單效果,通過調(diào)用封裝的js庫ocscript.js實(shí)現(xiàn)圓角下拉菜單功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
奉獻(xiàn)給JavaScript初學(xué)者的編寫開發(fā)的七個(gè)細(xì)節(jié)
每種語言都有它特別的地方，對(duì)于JavaScript來說，使用var就可以聲明任意類型的變量，這門腳本語言看起來很簡(jiǎn)單，然而想要寫出優(yōu)雅的代碼卻是需要不斷積累經(jīng)驗(yàn)的。本文利列舉了JavaScript初學(xué)者應(yīng)該注意的七個(gè)細(xì)節(jié)，與大家分享。2011-01-01
大家都知道Promise解決了回調(diào)地獄的問題,“回調(diào)地獄”所說的嵌套其實(shí)是指異步的嵌套,它帶來了兩個(gè)問題:可讀性的問題和信任問題,下面這篇文章主要給大家介紹了關(guān)于JS中promise特點(diǎn)與信任問題解決的相關(guān)資料,需要的朋友可以參考下2022-06-06
面板樣式除了內(nèi)容之外，還有一個(gè)面板頭部可以添加標(biāo)題，讓我們通過這篇文章看看Bootstrap面板樣式的使用方法2017-01-01