<template>
  <div
    :class="className"
    :style="{ height: height, width: width }"
  />
</template>
<script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "./mixins/resize";
export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    },
    autoResize: {
      type: Boolean,
      default: true,
    },
    // chartData: {
    //   type: Object,
    //   required: true,
    // },
    chartConfig: {
      type: Object,
      default: () => {
        return {};
      },
    },
    title: {
      type: String,
      default: "分布图",
    },
  },
  data () {
    return {
      chart: null,
      option: {
        title: {
          text: "成本效果分析CEA (Cost Effectiveness Analysis) (万元/例)",
          subtext:"每避免一例胃痞死亡所增加的成本(ICER) 与人均GDP (万元)",
          subtextStyle: {
            color:'#fff',
            align: "right",
            verticalAlign: "top",
            lineHeight: 0,
          },
          top: "3%",
          left: "1%",
          // padding: 20,
          textStyle: {
            color: "rgba(255, 255, 255, 0.8)",
            fontStyle: "normal",
            fontSize: 16,
          },
        },
        color: 'rgb(89,174,293)',
        grid: {
          top: "16%",
          bottom: "54%",
          left: "50%",
          containLabel: false,
        },
        yAxis: [
          {
            type: "category",
            inverse: true,
            z: 3,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              inside: false,
              textStyle: {
                color: "RGB(78,184,252)",
                fontSize: 14,
              },
              show: true,
            },
            data: ['3倍GDP', '筛查ICER', '1倍GDP'],
          },
        ],
        xAxis: [
          {
            show: false,
          },
        ],
        series: [],
      }
    }
  },
  methods: {
    initChart () {
      this.chart = echarts.init(this.$el, "macarons");
      let sumValue = 40;
      let data = [
        {
          name: "3倍GDP",
          value: 24.2928,
        },
        {
          name: "筛查ICER",
          value: 18.54863,
        },
        {
          name: "1倍GDP",
          value: 8.0976,
        },
      ];
      for (let i = 0; i < data.length; i++) {
        this.option.series.push({
          // name: "学历",
          type: "pie",
          clockWise: true,
          z: 2,
          hoverAnimation: false,
          radius: [70 - i * 15 + "%", 62 - i * 15 + "%"],
          center: ["50%", "55%"],
          label: {
            show: true,
            formatter: "{c}",
            color: "#fff",
            fontSize: 14,
            rotate:-25,
            position: "inside",
          },
          labelLine: {
            show: false,
          },
          data: [
            {
              value: data[i].value,
              name: data[i].name,
            },
            {
              value: sumValue - data[i].value,
              name: "",
              itemStyle: {
                color: "rgba(0,0,0,0)",
                borderWidth: 0,
              },
              tooltip: {
                show: false,
              },
              label: {
                show: false,
              },
              hoverAnimation: false,
            },
          ],
        });
      }
      this.chart.setOption(this.option);
    },
  },
  mounted () {
    this.initChart()
  },
  watch: {}
}
</script>
<style lang="scss" scoped>
</style>