vue+echarts 동적 접선 도 를 실현 하 는 방법 과 주의

이전에 회사 에서 실시 간 이윤율 접선 도 를 그 리 는 수요 가 있 었 는데 잘 실현 되 었 다.오늘 은 vue+echarts 가 동적 접선 도 를 실현 하 는 방법 을 공유 하 자.
구현 코드

<template>
 <div id="myChart"></div>
</template>

<script>
import echarts from 'echarts'
export default {
 name: 'DynamicLineChart',
 data () {
  return {
  	//       
   date: [],
   yieldRate: [],
   yieldIndex: [],
   //    echarts     
   echartsOption: {
    legend: {
     data: ['     ', '     '],
    },
    xAxis: {
     name: '  ',
     nameTextStyle: {
      fontWeight: 600,
      fontSize: 18
     },
     type: 'category',
     boundaryGap: false,
     data: this.date,	//         
    },
    yAxis: {
     name: '     ',
     nameTextStyle: {
      fontWeight: 600,
      fontSize: 18
     },
     type: 'value',
     scale: true,
     boundaryGap: ['15%', '15%'],
     axisLabel: {
      interval: 'auto',
      formatter: '{value} %'
     }
    },
    tooltip: {
     trigger: 'axis',
    },
    series: [
     {
      name:'     ',
      type:'line',
      smooth: true,
      data: this.yieldRate,	//         
     },
     {
      name:'     ',
      type:'line',
      smooth: true,
      data: this.yieldIndex,	//         
     }
    ]
   }
  }
 },
 mounted () {
  this.myChart = echarts.init(document.getElementById('myChart'), 'light');	//    echarts, theme light
  this.myChart.setOption(this.echartsOption);	// echarts       
  setInterval(this.addData, 3000);	//              
 },
 methods: {
 	//       
  getTime : function() {	
   var ts = arguments[0] || 0;
   var t, h, i, s;
   t = ts ? new Date(ts * 1000) : new Date();
   h = t.getHours();
   i = t.getMinutes();
   s = t.getSeconds();
   //       
   return (h < 10 ? '0' + h : h) + ':' + (i < 10 ? '0' + i : i) + ':' + (s < 10 ? '0' + s : s);
  },
  //       
  addData : function() {
  	//              
   this.$axios.get('url').then((res) => {
    this.yieldRate.push((res.data.actualProfitRate * 100).toFixed(3));
    this.yieldIndex.push((res.data.benchmarkProfitRate * 100).toFixed(3));
    this.date.push(this.getTime(Math.round(new Date().getTime() / 1000)));
    //         echarts  
    this.echartsOption.xAxis.data = this.date;
    this.echartsOption.series[0].data = this.yieldRate;
    this.echartsOption.series[1].data = this.yieldIndex;
    this.myChart.setOption(this.echartsOption);
   });
  }
 }
}
</script>

<style>
//     ，    windows      
#myChart{
 width: 100%;
 height: 500px;
 margin: 0 auto;
}
</style>

주의해 야 할 것 은 세 가지 가 있다.
mounted 중 init 및 setOption 초기 화 echartsecharts Option 의 data 바 인 딩 배열

setInterval 에서 배열 을 업데이트 하고 배열 을 echarts 옵션 에 다시 할당 해 야 합 니 다.

효과 도

총결산
vue+echarts 가 동적 접 는 그림 을 실현 하 는 것 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 vue+echarts 동적 접 는 그림 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!