echarts折線圖流動(dòng)特效的實(shí)現(xiàn)全過(guò)程(非平滑曲線)
1.實(shí)現(xiàn)效果

2.實(shí)現(xiàn)原理
注意:流動(dòng)特效只支持非平滑曲線(smooth:false)
series-lines路徑圖:
用于帶有起點(diǎn)和終點(diǎn)信息的線數(shù)據(jù)的繪制,主要用于地圖上的航線,路線的可視化。
ECharts 2.x 里會(huì)用地圖上的 markLine 去繪制遷徙效果,在 ECharts 3 里建議使用單獨(dú)的 lines 類型圖表。
一些參數(shù):
series-lines.coordinateSystem :該系列使用的坐標(biāo)系,可選:
‘cartesian2d’-使用二維的直角坐標(biāo)系(也稱笛卡爾坐標(biāo)系),通過(guò) xAxisIndex, yAxisIndex指定相應(yīng)的坐標(biāo)軸組件。
‘geo’-使用地理坐標(biāo)系,通過(guò) geoIndex 指定相應(yīng)的地理坐標(biāo)系組件。
series-lines.polyline:是否是多段線。
默認(rèn)為 false,只能用于繪制只有兩個(gè)端點(diǎn)的線段,線段可以通過(guò) lineStyle.curveness 配置為曲線。
如果該配置項(xiàng)為 true,則可以在 data.coords 中設(shè)置多于 2 個(gè)的頂點(diǎn)用來(lái)繪制多段線,在繪制路線軌跡的時(shí)候比較有用,見示例 北京公交路線,設(shè)置為多段線后 lineStyle.curveness 無(wú)效。
series-lines.effect. show:是否顯示特效。
series-lines.effect. period = 4。 特效動(dòng)畫的時(shí)間,單位為 s。
series-lines.effect. symbol = ‘circle’。特效圖形的標(biāo)記。
ECharts 提供的標(biāo)記類型包括’circle’, ‘rect’, ‘roundRect’, ‘triangle’, ‘diamond’, ‘pin’, ‘arrow’, 'none’可以通過(guò) ‘image://url’ 設(shè)置為圖片,其中 URL 為圖片的鏈接,或者 dataURI。
series-lines.effect. symbolSize = 3。特效標(biāo)記的大小,可以設(shè)置成諸如 10 這樣單一的數(shù)字,也可以用數(shù)組分開表示高和寬,例如 [20, 10] 表示標(biāo)記寬為20,高為10。
series-lines.effect. trailLength = 0.2。特效尾跡的長(zhǎng)度。取從 0 到 1 的值,數(shù)值越大尾跡越長(zhǎng)。
series-lines.effect. loop = true。是否循環(huán)顯示特效。
series-lines.data. coords :一個(gè)包含兩個(gè)到多個(gè)二維坐標(biāo)的數(shù)組。在 polyline 設(shè)置為 true 時(shí)支持多于兩個(gè)的坐標(biāo)。
eg:
[
{
coords: [
["測(cè)1", 222],
["測(cè)2", 932],
["測(cè)3", 66],
["測(cè)4", 934],
["測(cè)5", 111],
["測(cè)6", 333],
["測(cè)7", 0],
],
},
];
3.實(shí)現(xiàn)代碼
data. coords的獲?。?/strong>
//多線段(polyline=true),如圖左側(cè)連續(xù)一段:
let yData = [222, 932, 66, 934, 111, 333, 0],
xData = ["測(cè)1", "測(cè)2", "測(cè)3", "測(cè)4", "測(cè)5", "測(cè)6", "測(cè)7"],
datacoords = [
{
coords: [],
},
];
for (var i = 0; i < xData.length; i++) {
datacoords[0].coords.push([xData[i], yData[i]]);
}
//單線段(polyline=false),如圖右側(cè)各段展示:
let yData = [90, 555, 666, 999, 567, 999, 888, 0],
xData = ["測(cè)1", "測(cè)2", "測(cè)3", "測(cè)4", "測(cè)5", "測(cè)6", "測(cè)7", "測(cè)8"],
datacoords = [];
for (var i = 0; i < xData.length; i++) {
datacoords.push([
{
coord: [i, yData[i]],
},
{
coord: [i + 1, yData[i + 1]],
},
]);
}
setOption設(shè)置:
this.charts.setOption({
animation: true, //控制動(dòng)畫示否開啟
animationDuration: 3000,
animationEasing: "bounceOut", //緩動(dòng)動(dòng)畫
animationThreshold: 8, //動(dòng)畫元素的閾值
backgroundColor: "transparent", // 給echarts圖設(shè)置背景色
tooltip: {
trigger: "axis",
backgroundColor: "rgba(0,0,0,.5)",
axisPointer: {
type: "cross",
label: {
backgroundColor: "rgba(0,0,0,.5)",
},
},
textStyle: {
color: "#fff",
fontSize: 14,
},
},
grid: {
left: "3%", //圖表距邊框的距離
right: "3%",
top: "15%",
bottom: "5%",
containLabel: true,
},
xAxis: [
{
nameGap: 3,
nameTextStyle: {
color: "rgba(255,255,255,.8)",
fontSize: 12,
},
type: "category",
data: xData,
boundaryGap: false, //從0開始
axisLine: {
onZero: true,
rotate: 30, //坐標(biāo)軸內(nèi)容過(guò)長(zhǎng)旋轉(zhuǎn)
interval: 1,
lineStyle: {
color: "#636E7C",
},
},
axisLabel: {
color: "rgba(255,255,255,.8)", //坐標(biāo)的字體顏色
fontSize: 12,
},
axisTick: {
//坐標(biāo)軸刻度顏色 x和y不交叉
show: false,
},
},
],
yAxis: [
{
name: "個(gè)",
min: 0,
max: function (value) {
return Math.ceil(value.max / 5) * 5;
},
splitNumber: 5,
type: "value",
nameTextStyle: {
color: "rgba(255,255,255,.89)",
fontSize: 12,
},
splitLine: {
show: true,
lineStyle: {
color: "rgba(255,255,255,.25)",
type: "dashed",
},
},
axisTick: {
//坐標(biāo)軸刻度顏色
show: false,
},
axisLine: {
//坐標(biāo)軸線顏色
show: true,
lineStyle: {
color: "#636E7C",
},
},
axisLabel: {
color: "rgba(255,255,255,.8)", //坐標(biāo)的字體顏色
fontSize: 12,
},
},
],
series: [
{
name: "蘇蘇小蘇蘇",
type: "line",
smooth: false,
lineStyle: {
color: "#DC7828",
width: 1.5,
type: "dashed",
shadowOffsetX: 0, // 折線的X偏移
shadowOffsetY: 10, // 折線的Y偏移
shadowBlur: 4, // 折線模糊
shadowColor: "rgba(255, 255, 255, 0.8)", //設(shè)置折線陰影顏色
},
showSymbol: true, //是否默認(rèn)展示圓點(diǎn)
symbol: "circle", // 默認(rèn)是空心圓(中間是白色的)
symbolSize: 7,
itemStyle: {
color: "#021E47", //實(shí)圓的背景色
borderWidth: 1,
borderColor: "#DC7828",
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 1,
color: "rgba(220,120,40,0.8)",
},
{
offset: 0.74,
color: "rgba(220,120,40,0.5)",
},
{
offset: 0,
color: "rgba(220,120,40,0)",
},
]),
},
emphasis: {
focus: "series",
},
data: yData,
},
{
showSymbol: false,
name: "蘇蘇小蘇蘇",
type: "lines",
polyline: true,
smooth: false,
coordinateSystem: "cartesian2d",
zlevel: 1,
effect: {
show: true,
smooth: true,
period: 6,
symbolSize: 4,
},
lineStyle: {
color: "#fff",
width: 1,
opacity: 0,
curveness: 0,
cap: "round",
},
data: datacoords,
},
],
});
總結(jié)
到此這篇關(guān)于echarts折線圖流動(dòng)特效實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)echarts折線圖流動(dòng)特效內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
jquery實(shí)現(xiàn)右側(cè)欄菜單選擇操作
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)右側(cè)欄菜單選擇操作,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-03-03
JavaScript實(shí)現(xiàn)獲得所有兄弟節(jié)點(diǎn)的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)獲得所有兄弟節(jié)點(diǎn)的方法,實(shí)例分析了javascript節(jié)點(diǎn)遍歷的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
取消Bootstrap的dropdown-menu點(diǎn)擊默認(rèn)關(guān)閉事件方法
今天小編就為大家分享一篇取消Bootstrap的dropdown-menu點(diǎn)擊默認(rèn)關(guān)閉事件方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
javascript createElement()創(chuàng)建input不能設(shè)置name屬性的解決方法
今天在使用document.createElement()動(dòng)態(tài)創(chuàng)建input時(shí),發(fā)現(xiàn)不能為其name賦值,以下是測(cè)試代碼。2009-10-10
webpack打包html里面img后src為“[object Module]”問(wèn)題
這篇文章主要介紹了webpack打包html里面img后src為“[object Module]”問(wèn)題,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
JavaScript 中的replace方法說(shuō)明
JavaScript 中的replace方法說(shuō)明...2007-04-04
js中符號(hào)轉(zhuǎn)意問(wèn)題示例探討
符號(hào)轉(zhuǎn)意,大家或許有所了解,知識(shí)在使用中或許不是那么的在意,其實(shí)這個(gè)問(wèn)題很重要,下面為大家講解下js符號(hào)轉(zhuǎn)意問(wèn)題相關(guān)知識(shí),感興趣的朋友可以參考下2013-08-08
TypeScript中Map對(duì)象使用及Map與字典的區(qū)別詳解
Map對(duì)象主要的應(yīng)用場(chǎng)景在于數(shù)據(jù)重組和數(shù)據(jù)儲(chǔ)存,下面這篇文章主要給大家介紹了TypeScript中Map對(duì)象使用及Map與字典的區(qū)別的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01

