Vue Echart 사용하기 #2 LineChart -> BarChart (과정)

주말에 더현대 갔다가 연남동도 갔다가 그래서 주말에 시간이 없어서 

회사에서 작성함.. 

노는거 아님!!!!!! 회사에서 EChart 사용하는데 아직 익숙하지 않아서 공부하면서 작성하려고 하는거임! 

진짜 놀지는 않았음 아직 class화 하는것도 미숙해서 익숙해지기 위해서 노력중임 

 

 

---

#1 에서는 html css 만들고 npm run echarts 뭐시기 저시기 하는거 환경세팅까지 했다면 본격적으로 진행해볼것이다. 

 

오늘은 LineChart 해보기 

 

일단 컨텐츠 굽분을 위해서 이렇게 작성항 

 

<template>

      <section class="content" id="content1" style="height: 250px; display: flex; justify-content: space-between; align-items: center;">
        <h2>Content 1</h2>
        <div class="box-with-border">
          <chart-area></chart-area>
        </div>
        <div>
          <p>설명</p>
        </div>
      </section>
     
</template>

<script>
import ChartArea from './ChartArea.vue'

export default {
  name: 'App',
  components: {
    ChartArea
  },

</script>

<style>

.box-with-border {
  width: 350px;            /* 너비 */
  height: 180px;           /* 높이 */
  border: 2px solid #333;  /* 테두리 설정 */
  padding: 10px;           /* 안쪽 여백 */
  border-radius: 8px;      /* 테두리 모서리 둥글게 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 그림자 */
  background-color: #f0f0f0; /* 배경색 */
}
</style>

---> 소스 블로그 이렇게 처음 적어보는데 복사가 안될까봐 걱정됨.. .알아서 다들 보시길 바래요 공유하고싶긴한데 

흠 ..... 홈.... 

 

 

 

 

---

 

 

아! 지금 사용할 api 는 서울특별시_영등포구_반려동물등록현황 활용 신청해서 사용하기로함 

 

 methods: {
    async initData(){


      let res1 = await fetch(`https://api.odcloud.kr/api/15040372/v1/uddi:5d0d03fa-084c-44d3-b22f-95882c08269c?page=1&perPage=10&serviceKey=비밀이지롱~~~`);
    let data = await res1.json();
    console.log("data == ", data.data);
    if(data.data[5]["읍면동(법정동)"] == '영등포동'){
      console.log("check");
      this.Embedded = data.data[5]["내장형 무선식별(RFID)"];
      this.AnimalsCount = data.data[5]["동물등록수합계(마리)"];
      this.AnimalOwnersCount = data.data[5]["동물소유자수(명)"];
      this.External = data.data[5]["외장형 무선식별(RFID)"];
      console.log("222chekct ", this.Embedded, this.External , this.AnimalOwnersCount, this.AnimalsCount);
    }


    }
  },

권한 주는 코드는 각자 받아서 "비밀이지롱~~~" 한 부분에 넣어서 하면 확인이 된다

내가 지금 영등포동에 거주중이여서 읍면동을 '영등포동'으로 데이터 찾아서 확인해서 콘솔에 데이터가 찍히는것까지 확인함 

(( 근데 궁금한게 데이터 이렇게 저장하는거 맞는걸까  좀더 이뿌게 소스 짜고싶은데 )) 

 

 

자자 데이터 잘 들어온거 확인이 됐으니 이걸 어떻게 라인차트에 그릴지 고민해봐야한다... 

 

근데 지금 생각해보니깐 라인 차트는 

 

 

이런식으로 날짜랑 값을 비교해야하는데...? ㅋㅋㅋㅋㅋ나 바보인가 barChart 해야할거같은데...? 

 

 

 

---

자자 그럼 BarChart 그리는걸로 변경~~~ 

 

https://echarts.apache.org/examples/en/editor.html?c=bar-background 

Examples - Apache ECharts

 

여기있는 소스들을 가지고 활용을 할거임 

 

Vue에서 중요한거는 바로  Echart 를 컴포넌트 작업이 필요하다고 생각이 든다 

 

 

 

 

AreaChart 페이지 보면 

 

<template>
  <div class="d-flex justify-content-center align-items-center" v-bind:style="{ height: '100%', width: '100%' }">
    <span v-if="!this.myChart">라인 챠트 영역</span>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { shallowRef } from 'vue';

export default {
  data() {
    return {
      myChart: shallowRef(null)
    }
  },
  methods: {
    changeData(dataAll) {
      console.log("dataAll " ,dataAll);
      if (this.myChart != null && this.myChart != '' && this.myChart != undefined) {
        this.myChart.dispose();
      }

      this.myChart = echarts.init(this.$el);

      this.myChart.setOption(dataAll);
      window.onresize = () => {
        this.myChart.resize();
      };
    },
    disposeData() {
      if (this.myChart != null) {
        this.myChart.dispose();
      }
    }
  }
};

</script>

<style></style>

dataAll로 클래스화 전체데이터를 받아서 그래프를 그려줘야한다 ... ( 근데 왜 나는 오류 나는거지 ..? )