echarts echarts 데이터 동적 업데이트 및 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를 부여
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 데이터 증분 리셋은 appendData로도 가능보충 지식: echarts 동적 추가 데이터
나는 쓸데없는 말을 더 이상 하지 않겠다. 모두들 코드를 직접 보는 것이 좋겠다.
<template>
<!-- echarts 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: ' + '
},
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 : ' 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 : ' 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>
보충하다echarts의 resize 방법을 사용하여 차트 크기를 변경합니다.
(opts?: {
width?: number|string,
height?: number|string,
silent?: boolean
})
파라미터에 폭 높이를 입력하면this.echarts.resize ({width:30}),dom층은 초기화 픽셀의 넓이가 있어야 하며, 백분율의 넓이가 적용되지 않습니다.이상의 이 해결 echarts echarts 데이터 동적 업데이트와 데이터 Zoom 리셋 문제는 바로 편집자가 여러분에게 공유한 모든 내용입니다. 참고 부탁드리고 저희를 많이 사랑해 주세요.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
어쩌면 echarts에 더 좋은 방법echarts를 React에 유용하게 사용하세요. echarts-for-react 기반 Make echarts come in handy for React. Based on 🌈 사용하기 쉬움(기본 레이아웃 및 스타일 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.