vue.js 는 어떻게 echarts 를 구성 요소 로 봉 하여 원 키 로 사용 하 는 지 상세 하 게 설명 합 니 다.

머리말
본 고 는 vue.js 가 echarts 를 구성 요소 원 키 로 봉 하여 사용 하 는 것 에 관 한 내용 을 소개 하고 참고 학습 을 제공 합 니 다.다음은 더 이상 말 하지 않 겠 습 니 다.상세 한 소 개 를 해 보 겠 습 니 다.
설명 하 다.
프로젝트 를 할 때 데 이 터 를 더욱 직관 적 으로 보 여주 기 위해 도표 와 관련 된 컨트롤 을 사용 합 니 다.도표 컨트롤 은 처음에 ECharts 라 는 오픈 소스 프로젝트 를 생각 합 니 다.iview,element-ui 등 구성 요소 들 이 사용 하 는 것 처럼 편리 하지 않 고 작은 커 브 를 돌아 야 합 니 다.그림 의 편 의 를 위해 ECharts 를 한 층 포장 하 였 습 니 다.
컨트롤 데모

컨트롤 사용
개요
  • echarts 기반 2 차 패키지
  • 데이터 로 구동
  • 컨트롤 원본 코드 는 src/components/charts
  • 참조
    문서.
    props
    속성
    설명 하 다.
    유형
    _id
    도표 의 유일한 표 지 는 id 가 중복 되면 오 류 를 보고 합 니 다.
    String
    _titleText
    도표 제목
    String
    _xText
    x 축 설명
    String
    _yText
    y 축 설명
    String
    _chartData
    도표 데이터
    Array
    _type
    도표 유형,세 가지 제공(LineAndBar/LineOrBar/Pie)
    호출 예시
    
     <chart
     :_id="'testCharts'"
     :_titleText="'     '"
     :_xText="'  '"
     :_yText="'    '"
     :_chartData="chartData"
     :_type="'Pie'"></chart>
     //       [["  1",10],["  2",20]]
    실현 방식
    렌 더 링 할 dom 만 들 기
    
    <template>
     <div :id="_id" class="chart"></div>
    </template>
    함수 그리 기
    
    function drawPie(chartData,id,titleText,xText,yText) {
     var chart = echarts.init(document.getElementById(id))
     var xAxisData = chartData.map(function (item) {return item[0]})
     var pieData = []
     chartData.forEach((v,i)=>{
      pieData.push({
      name:v[0],
      value:v[1]
      })
     })
     chart.setOption({
      title : {
      text: titleText,
      subtext: '',
      x:'center'
      },
      tooltip : {
      trigger: 'item',
      formatter: "{a} <br/>{b} : {c} ({d}%)"
      },
      legend: {
      orient: 'vertical',
      left: 'left',
      data: xAxisData
      },
      series : [
      {
       name: xText,
       type: 'pie',
       radius : '55%',
       center: ['50%', '60%'],
       data:pieData,
       itemStyle: {
       emphasis: {
        shadowBlur: 10,
        shadowOffsetX: 0,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
       }
       }
      }
      ]
     })
     }
    마 운 트 종료,데이터 원본 변경 시 다시 그리 기
    
     watch:{
      _chartData(val){
      switch (this._type){
       case "LineAndBar":
       drawLineAndBar(val,this._id,this._titleText,this._xText,this._yText);
       break
       case "LineOrBar":
       drawLineOrBar(val,this._id,this._titleText,this._xText,this._yText);
       break
       case "Pie":
       drawPie(val,this._id,this._titleText,this._xText,this._yText);
       break
       default:
       drawLineAndBar(val,this._id,this._titleText,this._xText,this._yText);
       break
      }
      }
     },
     mounted() {
      switch (this._type){
      case "LineAndBar":
       drawLineAndBar(this._chartData,this._id,this._titleText,this._xText,this._yText);
       break
      case "LineOrBar":
       drawLineOrBar(this._chartData,this._id,this._titleText,this._xText,this._yText);
       break
      case "Pie":
       drawPie(this._chartData,this._id,this._titleText,this._xText,this._yText);
       break
      default:
       drawLineAndBar(this._chartData,this._id,this._titleText,this._xText,this._yText);
       break
      }
     }
    총결산
    이상 은 이 글 의 전체 내용 입 니 다.본 논문 의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 참고 학습 가치 가 있 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 댓 글 을 남 겨 주 셔 서 저희 에 대한 지지 에 감 사 드 립 니 다.

    좋은 웹페이지 즐겨찾기