解決echarts echarts數(shù)據(jù)動(dòng)態(tài)更新和dataZoom被重置問題
更新時(shí)間：2020年07月20日 09:37:38 作者：aliven1
這篇文章主要介紹了解決echarts echarts數(shù)據(jù)動(dòng)態(tài)更新和dataZoom被重置問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
1.全局綁定滾輪事件，獲得dataZoom最新的位置：
myChart.on('dataZoom',function(event){
if(event.batch){
start=event.batch[0].start;
end=event.batch[0].end;
}else{
start=event.start;
end=event.end;
};
});
2.把最新的start和end賦值給要更新的option
window.setInterval(function () {
num=Math.random()*num+100;
data0.splice(0,1);
data0.push(num);
option.dataZoom[0].start=start;
option.dataZoom[0].end=end;
myChart.setOption(option);
},3000);
3.echart數(shù)據(jù)增量刷新還可以用appendData
補(bǔ)充知識(shí)：echarts動(dòng)態(tài)添加數(shù)據(jù)
我就廢話不多說了，大家還是直接看代碼吧~
<template>
<!--為echarts準(zhǔn)備一個(gè)具備大小的容器dom-->
<div id="main" style="width: 600px;height: 400px;"></div>
</template>
<script>
import echarts from 'echarts'
export default {
name: 'Chart',
data () {
return {
charts: '',
}
},
methods:{
initLine(id){
this.charts = echarts.init(document.getElementById(id))
this.charts.setOption({
title: {
text: '動(dòng)態(tài)數(shù)據(jù) + 時(shí)間坐標(biāo)軸'
},
tooltip: {
trigger: 'axis',
formatter: function (params) {
params = params[0]
return params.value[0] + ' : ' + params.value[1]
},
axisPointer: {
animation: false
}
},
xAxis: {
type: 'time',
splitLine: {
show: false
}
},
yAxis: {
type: 'value',
boundaryGap: [0, '100%'],
splitLine: {
show: false
}
},
animation: false
})
}
},
mounted(){
this.$nextTick(function() {
this.initLine('main')
this.charts.setOption({
series : [
{
name : '模擬數(shù)據(jù)0',
type : 'line',
showSymbol : false,
hoverAnimation : false,
data : [['2018-01-02', '3'],['2018-01-05', '4']]
}
]
})
setTimeout(() => {
this.charts.appendData({
seriesIndex:0,
data : [['2018-01-03', '1'],['2018-01-07', '2']]
})
},2000)
setTimeout(() => {
this.charts.resize();
},4000)
setTimeout(() => {
this.charts.setOption({
series : [
{},
{
name : '模擬數(shù)據(jù)1',
type : 'line',
showSymbol : false,
hoverAnimation : false,
data : [['2018-01-02', '5'],['2018-01-05', '10']]
}
]
})
this.charts.appendData({
seriesIndex:1,
data : [['2018-01-03', '11'],['2018-01-10', '2']]
})
},6000)
setTimeout(() => {
this.charts.resize();
},8000)
})
}
}
</script>
<style scoped>
* {
margin: 0;
padding: 0;
list-style: none;
}
</style>
補(bǔ)充
主動(dòng)使用echarts的resize方法改變圖表大?。?/p>
(opts?: {
width?: number|string,
height?: number|string,
silent?: boolean
})
當(dāng)在參數(shù)中填入寬高，this.echarts.resize({width:300})，dom層必須有一個(gè)初始化像素的寬高，百分比的寬高該方法不會(huì)生效。
以上這篇解決echarts echarts數(shù)據(jù)動(dòng)態(tài)更新和dataZoom被重置問題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章主要介紹了深入理解vue的狀態(tài)管理模式vuex，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
這篇文章主要介紹了vue?change阻止默認(rèn)事件問題,使用事件 @click.stop.native.prevent 解決 (使用@click.stop 或者 @click.prevent都無效，直接報(bào)錯(cuò)還阻止不了事件)，需要的朋友可以參考下2022-01-01
這篇文章主要介紹了vue-cli3.0之配置productionGzip方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要介紹了從vue源碼看Vue.set()和this.$set()的相關(guān)知識(shí),我們先來從Vue提供的Vue.set()和this.$set()這兩個(gè)api看看它內(nèi)部是怎么實(shí)現(xiàn)的。感興趣的朋友跟隨小編一起看看吧2018-08-08
Vue項(xiàng)目通過network的ip地址訪問注意事項(xiàng)及說明
這篇文章主要介紹了Vue項(xiàng)目通過network的ip地址訪問注意事項(xiàng)及說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue實(shí)用功能之實(shí)現(xiàn)拖拽元素、列表拖拽排序
在日常開發(fā)中,特別是管理端,經(jīng)常會(huì)遇到要實(shí)現(xiàn)拖拽排序的效果,下面這篇文章主要給大家介紹了關(guān)于Vue實(shí)用功能之實(shí)現(xiàn)拖拽元素、列表拖拽排序的相關(guān)資料,需要的朋友可以參考下2022-10-10
這篇文章主要介紹了v-model中如何使用過濾器問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要給大家分享了vue全局過濾器概念及注意事項(xiàng)和基本使用方法，下面文字圍繞vue全局過濾器的相關(guān)資料展開具體的詳細(xì)內(nèi)容,需要的朋友可以參考一下，希望對(duì)你有所幫助2021-11-11
Vuex state中同步數(shù)據(jù)和異步數(shù)據(jù)方式
這篇文章主要介紹了Vuex state中同步數(shù)據(jù)和異步數(shù)據(jù)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
vue實(shí)現(xiàn)點(diǎn)擊展開點(diǎn)擊收起效果
這篇文章主要介紹了vue實(shí)現(xiàn)點(diǎn)擊展開,點(diǎn)擊收起效果，首先我們需要定義data里面的數(shù)據(jù)，使用computed對(duì)data進(jìn)行處理,需要的朋友可以參考下2018-04-04