[Apache ECharts] ECharts 사용하기

See the Pen echarts by dadafly1244 (@dadafly1244) on CodePen.

실강 마지막 시간에 ECharts 사용법을 간단하게 배웠다. 위의 주석을 참고해서 보기를 바란다!!! 

https://echarts.apache.org/en/option.html#title

Documentation - Apache ECharts

 

홈페이지에서 docs => api => option 을 눌러서 보면 된다!!  series에서 'line', 'bar' 등에서 각각의 모양에서 사용할 수 있는 옵션을 더 확인할 수 있다. 

const el = document.querySelector('#heropy')
const data1 = {
  'Mon': 150,
  'Tue': 230,
  'Wed': 224,
  'Thu': 218,
  'Fri': 135,
  'Sat': 147,
  'Sun': 260
}
const data2 = {
  'Mon': 100,
  'Tue': 200,
  'Wed': 250,
  'Thu': 200,
  'Fri': 200,
  'Sat': 80,
  'Sun': 60
}
const data3 = {
  'Mon': 2,
  'Tue': 5,
  'Wed': 10,
  'Thu': 20,
  'Fri': 70,
  'Sat': 50,
  'Sun': 92
}
const chart = echarts.init(el)
chart.setOption({
  tooltip: {
     trigger: 'axis' //축을 기준으로 마우스 올렸을 때 값을 볼 수 있다
  },
  legend: {}, // 범례 넣기!! 
  xAxis: {
    type: 'category',
    data: Object.keys(data1)
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name:'올해 매출',
      type: 'line',
      data: Object.values(data1),
      lineStyle: { 
        color: 'red' // 줄 색
      },
      itemStyle: { 
        color: 'red' //점 색
      }
    },
    {
      name: '작년 매출',
      type: 'line',
      data: Object.values(data2)
    },
    {
      name: '직원 수',
      type: 'bar',
      data: Object.values(data3),
      itemStyle: {
        color: 'yellowgreen'
      }
    },
    {
      name: '직원 분포',
      type: 'pie',
      data: [
        { value: 2, name: '임원' },
        { value: 3, name: '기획자' },
        { value: 5, name: '디자이너' },
        { value: 10, name: '개발자' }
      ],
      radius: ['10%','25%' ], //안쪽원 , 바깥원,
      center: ['80%', 100] // background-position: L T;이랑 유사!! ///왼쪽에서 85%, 위에 100px
    }
  ]
})