[displayFn] echarts

사용 팁
,
1

Chart.js 이외에 여러 차트 선택지를 추가하였습니다.

display: echarts

  • plotly 스크립트를 사용할 수 있습니다.
  • ChatGPT 등을 통해 더 잘 활용할 수 있습니다. (e.g. “echarts로 bar 그리는 js 코드를 알려줘”)

displayFn

  • block.id와 displayFn안에 차트를 그릴때 ID가 동일해야합니다.
  • sqlMany 기능이 추가되었습니다. (여러개 쿼리 실행시 rows[0], rows[1] 안에 각각 결과가 담깁니다: 지난주/이번주 데이터 비교 등에 사용 가능)
  • displayFn안에서 쓸수있는 변수: rows, id, openModal, openAction, _ lodash 데이터 처리용

예시 YAML 코드

image
image2134×644 21.8 KB

menus:
- path: pages/8y_rbk-3
  name: echarts
pages:
- path: pages/8y_rbk-3
  # title: 제목
  # subtitle: 내용
  blocks:
  - type: query
    resource: mysql.qa
    sqlType: select
    sql: >
      SELECT DATE(created_at), COUNT(id) FROM TestLog 
      WHERE created_at > '2024-05-15'
      GROUP BY 1
    modals:
      - path: view
        blocks:
          - type: query
            resource: mysql.qa
            sqlType: select
            sql: SELECT :id
            params:
              - key: id
                valueFromRow: id
    
    display: echarts
    id: chart1
    displayFn: |
      console.log(rows)
      // Initialize the ECharts instance based on the prepared DOM
      var myChart = echarts.init(document.getElementById(id));

      // Specify the configuration and data for the chart
      var option = {
          title: {
              text: 'Basic Bar Chart'
          },
          tooltip: {},
          legend: {
              data: ['Sales']
          },
          xAxis: {
              data: ["Shirts", "Cardigans", "Chiffons", "Pants", "Heels", "Socks"]
          },
          yAxis: {},
          series: [{
              name: 'Sales',
              type: 'bar',
              data: [5, 20, 36, 10, 10, 20]
          }]
      };

      // Use the specified configuration and data to display the chart
      myChart.setOption(option);