vue 에서 Echarts 를 사용 하여 곡선 도 를 그 리 는 예제

현실 적 인 작업 에서 데 이 터 는 죽 을 수 없 으 며 모든 데 이 터 는 전송 요청 을 통 해 가 져 와 야 합 니 다.
따라서 이 프로젝트 의 수 요 는 서버 에 2 차원 배열 을 요청 하고 곡선 도 를 생 성 하 는 것 입 니 다.곡선 도의 가로 세로 좌 표 는 모두 얻 은 데이터 에서 얻 을 수 있다.
Echarts 공식 문서:
https://ecomfe.github.io/echarts-doc/public/en/index.html
전단 프레임 워 크 는 vue 를 사용 하고 서버 는 express 로 구축 하 며 상호작용 은 axios 를 사용 합 니 다.
vue-resource 도입
npm 를 통 해 vue-resource 다운로드

npm install vue-resource --save

main.js 에 vue-resource 를 도입 하고 등록 합 니 다.

// main.js

import VueResource from 'vue-resource' 
Vue.use(VueResource)

2.aysnc-lineChart-option.js 설정
이 그래프 의 데이터 가 없 는 option 을 async-lineChart-option.js 에 추출 합 니 다.
이 코드 는 src/echarts/aysnc-lineChart-option.js 파일 에서 코드 는 다음 과 같 습 니 다.

export const option = {
  title: { text: '   ' },
  backgroundColor: '#FBFBFB',
  tooltip: {
    trigger:'axis'
  },
  xAxis: {
    data: [],
    name: 'id'
  },
  yAxis: {},
  series: [{
    name: 'data',
    type: 'line',
    data: [],
    smooth : true,
    itemStyle: {
      normal: {
        color: 'hotpink'
      }
    }
  }]
}

3.Curve.vue 에서 데 이 터 를 요청 합 니 다.
　   1.async-lineChart-option.js 에서 option 도입
2.methods 에 draw LineChart()방법 추가
3.mounted()갈고리 함수 에서 drawBarChart()호출
4.로 딩 애니메이션 을 추가 하고 draw LineChart()방법 에 show Loading()과 hideLoading()을 추가 합 니 다.
이 코드 는 src/views/Curve.vue 에 있 습 니 다.코드 는 다음 과 같 습 니 다.

<script>
  import {option} from '../echarts/aysnc-lineChart-option.js' // aysnc-lineChart-option.js   option

  export default {
    name: 'Curve',

    mounted() {
      //  drawLineChart()
      this.drawLineChart();
    },
    data () {
      return {

      }
    },
    methods:{　　　　　　drawLineChart() {
        //       dom，   echarts  
        var myChart = this.$echarts.init(document.getElementById('myChart'));
        //       
        myChart.setOption(option);

        //      
        myChart.showLoading();

        //    
        this.$axios.get('/getdate').then(res => {

          // json     id        
          var id = [];
          for(let i = 0;i < res.data.length;i++){
            id.push(res.data[i].id);
          }

          // json      data        
          var data = [];
          for(let i = 0;i < res.data.length;i++){
            data.push(res.data[i].data);
          }

          setTimeout(()=>{ //           ,     setTimeout,  300ms  
            myChart.hideLoading(); //      
            myChart.setOption({
              xAxis: {
                data: id
              },
              series: [{
                 data: data
              }]
            })
          }, 300 )
        })
      },
    },

  };


</script>

효과 도

이상 은 vue 에서 Echarts 를 사용 하여 곡선 도 를 그 리 는 예제 의 상세 한 내용 입 니 다.vue Echarts 가 곡선 도 를 그 리 는 것 에 관 한 자 료 는 다른 관련 글 을 주목 하 세 요!