Front/JS & jQuery

[echarts] 데이터를 차트 안에 표시하기

오선지♬ 2022. 5. 14. 11:32
728x90
반응형

1. 막대그래프

option안에 series안에 lable에 show: true로 설정하면 된다.

option = {
  tooltip: {},
  legend: {},
  xAxis: {
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
  },
  yAxis: {},
  series: [{
    name: "Sale",
    type: "bar",
    data: [5, 20, 36, 10, 10, 20, 4],
    label: {
      show: true,
    }
  }]
}

 

2. 파이그래프

파이 그래프는 lable에 show: true 로 설정하면 범례목록만 표시가 된다.

데이터를 표시하려면, formatter를 사용해야한다.

  • {a}: 시리즈 이름.
  • {b}: 데이터 항목의 이름입니다.
  • {c}: 데이터 항목의 값.
  • {d}: 퍼센트.

예시

formatter: '{b}: {d}'

728x90
반응형