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