<template>
  <basic-container>
    <div id="chart" :style="{width: '400px', height: '400px'}"></div>
  </basic-container>
</template>

<script>
  export default {
    name: "check-chart",
    data() {
      return {
        titles: {day: '每日監控圖表', week: '每週監控圖表', month: '每月監控圖表'},
        option: {
          title: {
            text: '每日监控图表',
            // subtext: '纯属虚构',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left',
          },
          toolbox: {
            show: true,
            feature: {
              mark: {show: true},
              // restore: {show: true},
              saveAsImage: {
                show: true,
                pixelRatio: '保存为图片',
                title: '保存为图片',
                type: 'png',
                lang: ['点击保存'],
              },
            }
          },
          series: [
            {
              name: '每日',
              type: 'pie',
              radius: '50%',
              data: [
                {value: 0, name: '未完成', color: 'red'},
                {value: 0, name: '已完成'}
              ],
              itemStyle: {
                normal:{
                  color:function(params) {
                    //自定义颜色
                    var colorList = [
                      'red', 'lightgreen'
                    ];
                    return colorList[params.dataIndex]
                  }
                }
              },
            }
          ]
        },
      }
    },
    props: {
      cycle: {
        type: String,
        default: 'day'
      },
      data: {
        type: Object,
        default: {}
      }
    },
    mounted() {
      this.option.title.text = this.titles['' + this.cycle];
      this.option.series[0].data[0].value = this.data.checkedCount;
      this.option.series[0].data[1].value = this.data.noCheckCount;

      let chart = this.$echarts.init(document.getElementById('chart'))
      chart.setOption(this.option);
    }
  }
</script>

<style scoped>

</style>
