<template>
  <div class="chart-container py-piechart" ref="echartbox"></div>
</template>

<script>
export default {
  name: "PyPiechart",
  data() {
    return {
      chart: {}
    };
  },
  props: {
    title: {},
    //是否显示面积
    area: Boolean,
    //是否曲线
    smooth: Boolean,
    //x轴是否是横轴
    vaxis: Boolean,
    data: {
      type: Object,
      default: function() {
        return {
          value: [[120, 132, 101, 134, 90, 230, 210]],
          axis: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
        };
      }
    }
  },
  mounted() {
    this.setEchart();
  },
  watch: {
    chartOpt() {
      this.refushChart();
    }
  },
  methods: {
    refushChart() {
      let that = this;
      that.chart.setOption(that.chartOpt);
    },
    setEchart() {
      let that = this;
      let dom = that.$refs.echartbox;
      that.chart = that.$echarts.init(dom);

      function x() {
        that.chart.setOption(that.chartOpt);
      }
      setTimeout(x, 500);
    }
  },
  computed: {
    chartOpt() {
      let that = this;
      let obj = {
        series: []
      };
      if (that.vaxis) {
        obj.yAxis = {
          type: "category",
          data: that.data.axis
        };
        obj.xAxis = {
          type: "value"
        };
      } else {
        obj.xAxis = {
          type: "category",
          data: that.data.axis
        };
        obj.yAxis = {
          type: "value"
        };
      }
      for (let i = 0; i < that.data.value.length; i++) {
        obj.series[i] = {};
        obj.series[i].data = that.data.value[i];
        obj.series[i].type = "line";
        obj.series[i].smooth = that.smooth;
        if (that.area) {
          obj.series[i].areaStyle = {};
        }
        if (that.data.value[i].hasOwnProperty("option")) {
        }
      }
      console.log(obj);
      return obj;
    }
  }
};
</script>

<style scoped>
</style>