<template>
  <div class="chart" :id="chartId"></div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted, ref } from 'vue'
import * as echarts from 'echarts'

export default defineComponent({
  name: 'pieChart',
  props: {
    chartData: {
      type: Array
    }
  },
  setup(props) {
    const chartId = `barChart${Math.random()}`
    const chart = ref<any>()
    const chartDatas = reactive({
      // dataList: props.chartData
      dataList: [
        { title: 'Matcha Latte', count1: 43.3, '2016': 85.8, '2017': 93.7 },
        { title: 'Milk Tea', count1: 83.1, '2016': 73.4, '2017': 55.1 },
        { title: 'Cheese Cocoa', count1: 86.4, '2016': 65.2, '2017': 82.5 },
        { title: 'Walnut Brownie', count1: 72.4, '2016': 53.9, '2017': 39.1 }
      ]
    })
    console.log(props)
    onMounted(() => {
      // console.log(echarts)
      chart.value = echarts.init(document.getElementById(chartId) as HTMLDivElement)
      chart.value.setOption({
        legend: {
          orient: 'vertical',
          left: '75%',
          top: '30%'
        },
        xAxis: {
          type: 'category',
          axisTick: { alignWithLabel: true }
        },
        yAxis: {
          type: 'value'
        },
        dataZoom: [
          {
            type: 'slider',
            start: 50,
            end: 100,
            realtime: true,
            height: 7
          }
        ],
        dataset: { source: chartDatas.dataList },
        series: [
          {
            name: '',
            type: 'bar',
            encode: {
              x: 'title',
              y: 'count1'
            }
          }
        ]
      })
    })
    return {
      chartId,
      chart,
      ...toRefs(chartDatas)
    }
  }
})
</script>

<style lang="stylus" scoped>
.chart
  width 100%
  height 100%
</style>