echartjs實(shí)現(xiàn)cross十星輔助線(xiàn)實(shí)現(xiàn)示例詳解
前言
項(xiàng)目是金融項(xiàng)目,就像支付寶基金的走勢(shì)圖一樣。但圖表庫(kù)使用的是 echart 而不是 antv 的 f2,要問(wèn)為什么不直接用 f2 ?問(wèn)就是因?yàn)轫?xiàng)目歷史包袱。
背景
了解過(guò) echart 的都知道,官方提供了十星輔助線(xiàn),只要設(shè)置 axisPointer 的 type 為cross 即可實(shí)現(xiàn)類(lèi)似股票走勢(shì)圖的十星線(xiàn),縱軸吸附最近的點(diǎn),橫軸跟隨鼠標(biāo)或手勢(shì)的觸點(diǎn)位置,如下圖

功能沒(méi)問(wèn)題,但是若作為基金產(chǎn)品,老板要求要對(duì)標(biāo)支付寶,要達(dá)到如下圖的效果

但既然對(duì)標(biāo)阿里,為什么不用 antv ?我也問(wèn)過(guò)。但從風(fēng)險(xiǎn)和成本的角度看,反正最終是老板不讓。
既然不能切 antv,上面的 cross 又不能滿(mǎn)足老板的要求,那么就要老老實(shí)實(shí)研究 echart 怎么實(shí)現(xiàn)了。
方案的過(guò)程就不詳細(xì)說(shuō)了,反正最后靈光一現(xiàn),考慮到可以用 type 為 line 的 axisPointer 和 markline 來(lái)達(dá)到了老板的需求。
具體實(shí)現(xiàn)
1、開(kāi)啟 tooltip,并將 tooltip 的 trigger 設(shè)置為 axis。
2、xAxis 中設(shè)置 axisPointer,這里設(shè)置 snap 為 true,保證縱向輔助線(xiàn)吸附。
3、series 中設(shè)置 markline,默認(rèn)的 markline 會(huì)自帶起點(diǎn)和箭頭,為了做十星,這里需要將起點(diǎn)和箭頭通過(guò)將 symbol 設(shè)置為 none 來(lái)取消,默認(rèn) markline 的顯示會(huì)有動(dòng)畫(huà),而十星沒(méi)有,所以還要將 animation 設(shè)置為 false 來(lái)禁止 markline 的緩動(dòng)展示動(dòng)畫(huà)
4、完成以上步驟將會(huì)得到一個(gè)跟隨手勢(shì)的縱線(xiàn)和固定位置的橫線(xiàn)(markline),若要達(dá)到完美的十星,這里需要配置一個(gè)能跟隨手勢(shì)的橫線(xiàn),那么這里需要通過(guò)獲取縱線(xiàn)吸附后的點(diǎn)來(lái)重設(shè) markline 的位置,我這里在 tooltip 的 formatter 中進(jìn)行處理,因?yàn)檫@里能拿到我要的點(diǎn)(目前沒(méi)找到其他好的辦法,有知道的也可以提供下想法)
5、這樣看起來(lái)就基本完成了,但是考慮到移動(dòng)端,手勢(shì)離開(kāi)圖表坐標(biāo)系時(shí),axisPointer 會(huì)自動(dòng)消失,但是按照我們的實(shí)現(xiàn),markline 不會(huì)跟隨消失,這時(shí)候我們就需要通過(guò)監(jiān)聽(tīng)點(diǎn)擊的位置來(lái)再次控制 markline 的展示了
大致的配置如下
// 5 這里設(shè)置異步是因?yàn)?demo 的代碼是部分代碼,執(zhí)行的時(shí)候可能myChart 還沒(méi)渲染完成,真實(shí)處理的時(shí)候若 chart 已經(jīng)渲染完成的話(huà)無(wú)需異步處理
setTimeout(()=>{
var _componentsViews = myChart._componentsViews;
var view = _componentsViews.find(item => item.type === 'grid') || {};
debugger
var rect = view.__model.coordinateSystem._rect;
var rectObj = {
x: rect.x,
x1: rect.x + rect.width,
y: rect.y,
y1: rect.y + rect.height
};
// 設(shè)置監(jiān)聽(tīng)
myChart._zr.on('mouseup', (e) => {
var { offsetX, offsetY } = e;
// // 點(diǎn)擊圖表之外時(shí)markline消失
if (offsetX < rectObj.x || offsetX > rectObj.x1 || offsetY < rectObj.y || offsetY > rectObj.y1) {
chart.setOption({
series: [{
markLine: {
data: [],
label: {
show: false
}
}
}]
});
}
});
}, 1000)
...
option = {
tooltip: {
// 1
trigger: "axis",
// 4
formatter(arg) {
// 這里需要異步處理以下,否則無(wú)法設(shè)置成功
setTimeout(function() {
myChart.setOption({
series: [{
markLine: {
data: [{
yAxis: arg[0].value[1],
label: {
show: true
}
}]
}
}]
})
}, 0);
}
...
},
xAxis: {
// 2
axisPointer: {
snap: true,
label: {
show: true,
backgroundColor: "#0000ff",
color: '#fff',
...
},
lineStyle: {
color: '#0000ff'
},
...
},
},
yAxis: {
...
},
series: [
{
name: '模擬數(shù)據(jù)2',
type: 'line',
...
// 3
markLine: {
symbol: 'none',
silent: true,
data: [
{
yAxis: 0,
label: {
show:false
}
}
],
label: {
show: true,
position: 'start',
backgroundColor: '#0000ff',
color: '#ffffff',
padding: 2
},
lineStyle: {
color: '#0000ff'
},
animation: false
},
}
]
}
以上,類(lèi)支付寶的走勢(shì)圖十星就完成了,年度 kpi 達(dá)成 (•??• )?
有需要的可以參考已實(shí)現(xiàn)的 demo,也不知道官方會(huì)保存多久,且看且珍惜。
以上就是echartjs實(shí)現(xiàn)cross十星輔助線(xiàn)實(shí)現(xiàn)示例詳解的詳細(xì)內(nèi)容,更多關(guān)于echartjs cross十星輔助線(xiàn)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
JS代碼實(shí)現(xiàn)根據(jù)時(shí)間變換頁(yè)面背景效果
這篇文章主要介紹了JS代碼實(shí)現(xiàn)根據(jù)時(shí)間變換頁(yè)面背景效果的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友一起看下吧2016-06-06
js如何判斷用戶(hù)是在PC端和還是移動(dòng)端訪(fǎng)問(wèn)
這篇文章主要介紹了js如何判斷用戶(hù)是在PC端和還是移動(dòng)端訪(fǎng)問(wèn),需要的朋友可以參考下2014-04-04
JavaScript中添加監(jiān)聽(tīng)句柄的方式
這篇文章主要介紹了JavaScript中添加監(jiān)聽(tīng)句柄的方式,監(jiān)聽(tīng)就是觸發(fā)某事件之后做出的響應(yīng),監(jiān)聽(tīng)句柄是觸發(fā)某相應(yīng)的條件,下面關(guān)于添加監(jiān)聽(tīng)句柄的方式的詳細(xì)內(nèi)容,需要的朋友可以參考一下,希望對(duì)你有所幫助2022-02-02
基于mpvue小程序使用echarts畫(huà)折線(xiàn)圖的方法示例
這篇文章主要介紹了基于mpvue小程序使用echarts畫(huà)折線(xiàn)圖的方法示例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-04-04
基于JS實(shí)現(xiàn)checkbox全選功能實(shí)例代碼
最近做了個(gè)項(xiàng)目其中有這樣的需求要求實(shí)現(xiàn)點(diǎn)擊全選選中所有菜單,再次點(diǎn)擊全選取消選中。下面小編給大家分享實(shí)現(xiàn)代碼,對(duì)js實(shí)現(xiàn)checkbox全選功能感興趣的朋友參考下吧2016-10-10
20個(gè)JS簡(jiǎn)寫(xiě)技巧提升工作效率
這篇文章主要介紹了20個(gè)JS簡(jiǎn)寫(xiě)技巧提升工作效率,本文特點(diǎn)以言簡(jiǎn)意賅為主,圍繞JS簡(jiǎn)寫(xiě)技巧的話(huà)題展開(kāi)全文,具有一定的查看價(jià)值 ,需要的小伙伴可以參考一下2021-12-12

