Echart折線圖手柄觸發(fā)事件示例詳解
前言
這是我準(zhǔn)備在這個(gè)項(xiàng)目中使用的圖形庫(kù),這也是一款基于HTML5的圖形庫(kù)。圖形的創(chuàng)建也比較簡(jiǎn)單,直接引用Javascript即可。使用這個(gè)庫(kù)的原因主要有三點(diǎn),一個(gè)是因?yàn)檫@個(gè)庫(kù)是百度的項(xiàng)目,而且一直有更新,目前最新的是EChart 3;第二個(gè)是這個(gè)庫(kù)的項(xiàng)目文檔比較詳細(xì),每個(gè)點(diǎn)都說(shuō)明的比較清楚,而且是中文的,理解比較容易;第三點(diǎn)是這個(gè)庫(kù)支持的圖形很豐富,并且可以直接切換圖形,使用起來(lái)很方便。
下面話不多說(shuō)了,來(lái)一起看看詳細(xì)的介紹吧
1 環(huán)境:
vue-cli(2.0)+ vue-echarts (git地址:https://github.com/ecomfe/vue-echarts(本地下載))
2 場(chǎng)景:
最近項(xiàng)目用echarts來(lái)展示圖標(biāo),其中有一個(gè)需求,需要拖動(dòng)手柄,等松開(kāi)手柄時(shí),要根據(jù)手柄所在的位置(獲取手柄在的x軸信息),重新發(fā)送請(qǐng)求,來(lái)渲染數(shù)據(jù)。
echarts的手柄實(shí)例地址:http://echarts.baidu.com/examples/editor.html?c=line-tooltip-touch
3圖:

4遇到的bug:
4.1 手柄上的label信息,有時(shí)會(huì)刷新不出來(lái)。即上圖中的2016-10-07消失。
4.2 echarts的點(diǎn)擊事件對(duì)折線圖并不友好,必須點(diǎn)在折線圖的點(diǎn)坐標(biāo)上才會(huì)觸發(fā)事件。so,要實(shí)現(xiàn)點(diǎn)擊圖中任意位置來(lái)即可實(shí)現(xiàn)觸發(fā)自己的事件。
4.3 echarts提供了可以拖動(dòng)的手柄,但是并沒(méi)有松開(kāi)手柄后觸發(fā)的事,這個(gè)沒(méi)有滿足我們產(chǎn)品的需求。當(dāng)然有可能是我沒(méi)有找到,若有請(qǐng)告知,謝謝。
5解決以上的bug:
頁(yè)面的展示如下:
<template>
<div>
<div id='line' @touchend='touchs' @mouseup='touchs'>
<v-chart auto-resize class='zhexian' :options='lineOption' :initOptions='initOptions' ref='line' />
</div>
</div>
</template>
<script>
//初始化折線的數(shù)據(jù)
import lineoption from '@/assets/js/handleline.js'
export default{
data(){
return{
lineOption:lineoption,
initOptions:{
renderer: 'svg' || 'canvas'
},
date:'',//發(fā)送Ajax時(shí)所需的參數(shù)
reFlag:'',//避免重復(fù)發(fā)送請(qǐng)求時(shí)的中間變量
}
},
}
</script>
拖動(dòng)手柄時(shí),會(huì)實(shí)時(shí)觸發(fā)formater,
解決第一個(gè)bug ,label有時(shí)會(huì)消失,因?yàn)槲乙院蟮拇a會(huì)用到formatter,第一次要用formater ,我是這樣寫(xiě)的,
this.lineOption.xAxis.axisPoint.label.formatter=function(param){
//param是X軸的信息
let value = _this.$echart.format.formatTime('yyyy-MM-dd', params.value);
_this.date =value;
console.log('實(shí)時(shí)獲取的X軸的事件'+_this.date)
return value;
},
,axisPoint對(duì)象的其他數(shù)據(jù)寫(xiě)在了handleline.js中,解決方案就是把a(bǔ)xisPoint的其他數(shù)據(jù)也重新setOption了,
mounted(){
//
let _this = this;
this.lineOption.xAxis.axisPointer={
value: '2016-10-7',
snap: true,
lineStyle: {
color: '#004E52',
opacity: 0.5,
width: 2
},
label: {
show: true,
formatter: function (params) {
let value = _this.$echart.format.formatTime('yyyy-MM-dd', params.value);
_this.date =value;
console.log('實(shí)時(shí)獲取的X軸的事件'+_this.date)
return value;
},
backgroundColor: '#004E52'
},
handle: {
show: true,
color: '#004E52'
}
}
},
解決第三個(gè)bug,結(jié)合了formatter 和 vue的touchend事件,單獨(dú)的formatter并沒(méi)有用,因?yàn)槭种鸽x開(kāi)時(shí),formatter的param數(shù)據(jù)會(huì)獲取多個(gè),也有可能會(huì)是多個(gè)重復(fù)的數(shù)據(jù)。效果并不好。so結(jié)合了touchend事件,手指離開(kāi)時(shí)獲取最終的date.
methods:{
touchs(){
//手指離開(kāi)手柄事件,因?yàn)槭直瑒?dòng)時(shí),就會(huì)觸發(fā)formatter,這時(shí),this.date 就會(huì)發(fā)生改變。當(dāng)你手指觸發(fā)其他的地方時(shí)
//并不會(huì)改變this.date的值,so。為了避免手指離開(kāi)時(shí)重復(fù)發(fā)送請(qǐng)求,需要一個(gè)中間變量。只有兩個(gè)值不相等才會(huì)去做自己想做的事。
if (this.reFlag == this.date) {
return
}
this.reFlag = this.date
//重新發(fā)送請(qǐng)求,渲染數(shù)據(jù),這時(shí)已經(jīng)或得了X軸的時(shí)間。
console.log(this.date)
// this.getPieData()
},
}
解決第二個(gè)bug ,這是從網(wǎng)上找到的。實(shí)現(xiàn)點(diǎn)擊折線圖的任意地方獲取x軸的信息,發(fā)送請(qǐng)求。同時(shí),要讓lineOption中的tooltip:{triggerOn:'click'} ,否則點(diǎn)擊無(wú)效。
sendTime() {
//寫(xiě)在mounted中調(diào)用
var chart = this.$echart.init(this.$refs.line.$el)
chart.getZr().on('click', params => {
var pointInPixel = [params.offsetX, params.offsetY]
if (chart.containPixel('grid', pointInPixel)) {
let xIndex = chart.convertFromPixel({ seriesIndex: 0 }, [
params.offsetX,
params.offsetY
])[0];
let a =this.$echart.format.formatTime('yyyy-MM-dd', xIndex);
/*事件處理代碼書(shū)寫(xiě)位置*/
// xIndex是個(gè)重要信息,用的時(shí)候最好打印看下具體的內(nèi)容再用
console.log(xIndex);
// this.date = this.linedata[xIndex + 1][0];
// 手指點(diǎn)擊后,讓這兩個(gè)值相等,避免觸發(fā)touchend事件,
this.reFlag = this.date=a;
//重新發(fā)送請(qǐng)求
//this.getPieData()
}
})
},
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,如果有疑問(wèn)大家可以留言交流,謝謝大家對(duì)腳本之家的支持。
- JFreeChart插件實(shí)現(xiàn)的折線圖效果實(shí)例
- jQuery插件echarts設(shè)置折線圖中折線線條顏色和折線點(diǎn)顏色的方法
- jQuery插件echarts實(shí)現(xiàn)的多折線圖效果示例【附demo源碼下載】
- Echarts教程之通過(guò)Ajax實(shí)現(xiàn)動(dòng)態(tài)加載折線圖的方法
- jQuery插件echarts實(shí)現(xiàn)的單折線圖效果示例【附demo源碼下載】
- jfreechart插件將數(shù)據(jù)展示成餅狀圖、柱狀圖和折線圖
- JFreeChart折線圖的生成方法
- JFreeChart動(dòng)態(tài)畫(huà)折線圖的方法
- jfreechart畫(huà)折線圖的方法
- Echart折線圖手柄觸發(fā)事件示例詳解
相關(guān)文章
js實(shí)現(xiàn)點(diǎn)擊復(fù)制當(dāng)前文本到剪貼板功能(兼容所有瀏覽器)
這篇文章主要介紹了js實(shí)現(xiàn)點(diǎn)擊復(fù)制當(dāng)前文本到剪貼板功能,兼容所有瀏覽器,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2015-12-12
js中關(guān)于String對(duì)象的replace使用詳解
關(guān)于String對(duì)象的replace使用詳解,需要的朋友可以參考下。2011-05-05
詳解JS中定時(shí)器setInterval和setTImeout的this指向問(wèn)題
在js中setTimeout和setInterval都是用來(lái)定時(shí)的一個(gè)功能,下面這篇文章主要給介紹了JS中setInterval和setTImeout的this指向問(wèn)題,文中通過(guò)示例介紹的很詳細(xì),有需要的朋友可以參考借鑒,一起來(lái)看看吧。2017-01-01
利用js 進(jìn)行輸入框自動(dòng)匹配字符的小例子
制作論壇用到的輸入框~想模仿百度之類的寫(xiě)一個(gè)自動(dòng)匹配字符2013-06-06

