<template>
  <div class="gcharts2" :id="id" :content="content"></div>
</template>
 
<script>
import G2 from "@antv/g2";
export default {
  data() {
    return {
      chart: null,
    };
  },
  props: {
    charData: {
      type: Array,
      default: function () {
        return {
          data: [],
        };
      },
    },
    id: String,
    content:String
  },
  // 如果使用serverData传过来的静态数据 请使用mounted()方法 并注释掉watch
  mounted() {
    this.drawChart();
  },
  // 监听API接口传过来的数据 使用watch
  watch: {
    charData: function (val, oldVal) {
      // 监听charData，当发生变化时，触发这个回调函数绘制图表
      // console.log("new: %s, old: %s", val, oldVal);
      this.drawChart(val);
    },
  },
  methods: {
    drawChart() {
      // 2019.03.30 更新 destory方法已被废弃
      this.chart && this.chart.destroy();
      // if(this.charData.length > 0){
      this.chart = new G2.Chart({
        container: this.id,
        padding: 0,
        autoFit: true,
        width: 125,
        height: 125,
      });
      this.chart.source(this.charData);
      // this.chart.scale("value", {
      //   range: [0, 1],
      // });
      // this.chart.scale("name", {
      //   // range: [0, 1]
      // });
      // this.chart.tooltip({
      //   crosshairs: {
      //     type: "line",
      //   },
      // });

      // this.chart.line().position("name*value");
      // this.chart.point().position("name*value").size(4).shape("circle").style({
      //   stroke: "#fff",
      //   lineWidth: 1,
      // });
      // this.chart.area().position('name*value').color('type','#42CACE')
      this.chart.coord("theta", {
        innerRadius: 0.75,
      });
      this.chart.tooltip({
        showTitle: false,
      });
      this.chart
        .view()
        .guide()
        .text({
          position: ["50%", "50%"],
          content: this.content,
          style: {
            fontSize: "20",
            fill: "#262626",
            textAlign: "center",
          },
        });
      this.chart
        .intervalStack()
        .position("value")
        .color("name")
        .shape("sliceShape");
      this.chart.render();
      // }
    },
  },
};
</script>
