뷰 프로젝트에 echarts를 사용하여

첫 번째 방법은 직접 도입 echarts

1 . 프로젝트 설치 echarts 따라 
    NPM 설치 echarts - 저장 
이 글로벌 main.js.의에 통합 
    "echarts"에서 가져 오기 echarts ;  . Vue.prototype = $ echarts Echarts;

<템플릿> 
  <DIV ID = "응용 프로그램"> 
    <DIV ID = "주"스타일 = "너비 : 600 픽셀, 높이 : 400 픽셀;"> </ DIV> 
  </ DIV> 
</ 템플릿>

JS 부분 스크립트 코드

<스크립트> 
내보내기 기본은 { 
  이름 : "응용 프로그램" , 
  방법 : { 
    drawChart는 () { 
      // 기반 준비 DOM, 예를 초기화 echarts 
      myChart = 송출을 은이를 $ echarts.init (document.getElementById를 ( "주." ));
       // 지정된 데이터와 구성 항목의 차트 
      송출 옵션은 = { 
        제목 : { 
          텍스트 : "모범적 인 ECharts을 시작하기" 
        }, 
        도구 설명 : {} 
        설명 : { 
          데이터 : "판매" ] 
        }, 
        x 축를 { 
          데이터 : "셔츠 ""스웨터 ","쉬폰 셔츠 ","바지 ""하이힐", "양말" ]
        } 
        y 축 {} 
        시리즈 [ 
          { 
            상품명 : "판매" , 
            형식 : "바" , 
            데이터 : . 5, 20, 20 36, 10, 10이다 ] 
          } 
        ] 
      } 
      //이 단지 CI 지정된 사용하십시오 그래프 데이터. 
      ; myChart.setOption (옵션) 
    } 
  } 
  마운트 () { 
    이 본 .drawChart (); 
  } 
};
 </ script>

두 번째 방법은 뷰 - ECharts 성분을 사용하여

장착 조립 단계 A :

NPM 설치 충격 echarts -S

2 단계 : 구성 요소 사용

<템플릿> 
  <DIV ID = "응용 프로그램"> 
    <V 차트 클래스 = "내 차트"옵션 = "바"/> 
  </ div> 
</ 템플릿> 
<script> 
에서 수입 ECharts VUE-echarts / 구성 요소 " / ECharts " ; 
수입 "/ 바 echarts / lib 디렉토리 / 차트" ; 
수출 기본 { 
  이름 : "응용 프로그램" , 
  구성 요소 : {
     "V 차트 ' : ECharts 
  }, 
  데이터 : 기능 () {
     반환 { 
      바 : { 
        제목 : { 
          텍스트 : "ECharts入门示例" 
        }, "판매" ] 
        }, 
        x 축 : { 
          데이터 : "셔츠", "스웨터", "쉬폰 셔츠", "바지", "신발", "양말" ] 
        }, 
        y 축 : {} 
        시리즈 : [ 
          { 
            이름 : "판매" , 
            유형 : "바" , 
            : 데이터 [ . 5, 20, 36, 10, 10, 20이다 ] 
          } 
        ] 
      } 
    } 
  } 
}
 </ SCRIPT> 
<스타일> 
누군 데 - 차트 { 
  폭 : 800 픽셀, 
  높이 500 픽셀;
}
 </ 스타일>

뷰 프로젝트에 echarts를 사용하여

추천