柚子快報邀請碼778899分享：echarts 曲線光點指引
柚子快報邀請碼778899分享：echarts 曲線光點指引
echarts 實現(xiàn)曲線圖，并在曲線上添加光標從開始到結(jié)束位置循環(huán)移動， 如下圖
echarts本身有l(wèi)ines的effect可以實現(xiàn)光點移動的效果，但是只能是折線點，不能實現(xiàn)曲線光點移動效果；
實現(xiàn)思路： 畫兩條一樣的曲線，一條是實際展示的曲線，另一條是移動的，根據(jù)漸變色實現(xiàn)，開始和結(jié)尾都設(shè)置為透明色，而中間很短的一部分設(shè)置為光點色，然后不斷修改光標的位置，這樣就形成了一條不斷移動的光點；
配置如下：
let i = 1;
let step = 0.03;
let data = [
[502.84, 205.97, 332.79, 281.55, 398.35, 214.02],
[1502.84, 1205.97, 1332.79, 1281.55, 1398.35, 1214.02]
];
let a = [ {
name: "注冊總量",
type: "line",
smooth: 0.27,
lineStyle: {
width: 4
},
data: [502.84, 205.97, 332.79, 281.55, 398.35, 214.02],
animation: false
},
{
name: "注冊總量",
type: "line",
lineStyle: {
width: 4
},
smooth: 0.27,
data: [1502.84, 1205.97, 1332.79, 1281.55, 1398.35, 1214.02],
animation: false
}]
let dataIndex = 0;
setInterval(() => {
i++;
let startPre = step * (i-1);
let start = step * i;
let end = start + step;
let endSuffix = end + step;
if (endSuffix >= 1) {
endSuffix = 1;
i = 0;
}
// console.log(startPre, start, end, endSuffix);
let lines = {
name: "注冊總量",
type: "line",
smooth: 0.27,
data: data[dataIndex],
animation: false,
lineStyle: {
width: 4,
color: {
type: "linear",
colorStops: [
{
offset: startPre,
color: "transparent"
},
{
offset: start,
color: "red"
},
{
offset: end,
color: "red"
},
{
offset: endSuffix,
color: "transparent"
}
]
}
}
};
a[2] = (lines)
if (endSuffix >= 1) {
dataIndex++;
if (dataIndex >= data.length) {
dataIndex = 0;
}
}
option = {
xAxis: {
type: "category",
data: ["A", "B", "C", "D", "E", "F"]
},
yAxis: {
type: "value"
},
series: a
};
myChart.setOption(option);
}, 100);
柚子快報邀請碼778899分享：echarts 曲線光點指引
好文鏈接
本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點和立場。
轉(zhuǎn)載請注明，如有侵權(quán)，聯(lián)系刪除。
Bobshop出海優(yōu)選坊
