<template>
  <chart :options="water()" class="water" />
</template>

<script>
import { graphic } from "echarts/lib/export";
export default {
  props: {
    datas: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data: () => ({}),
  mounted() {},
  methods: {
    water() {
      let self = this;
      return {
        title: [
          {
            text: "支持开发",
            x: "center",
            y: "40%",
            textStyle: {
              fontSize: 14,
              fontWeight: "normal",
              color: "#58617a"
            }
          },
          {
            text: "不支持开发",
            x: "center",
            y: "90%",
            textStyle: {
              fontSize: 14,
              fontWeight: "normal",
              color: "#58617a"
            }
          }
        ],
        series: [
          {
            type: "liquidFill",
            data: [
              {
                name: "A",
                value: self.datas[0] / 100,
                key: self.datas[0]
              }
            ],
            radius: "50%",
            center: ["50%", "20%"],
            outline: {
              borderDistance: 2,
              itemStyle: {
                borderWidth: 3,
                borderColor: "#274fee",
                shadowBlur: 0
              }
            },
            backgroundStyle: {
              color: "#fff",
              opacity: 1
            },
            itemStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 1,
                    color: ["#c9d3fc"]
                  },
                  {
                    offset: 0,
                    color: ["#515fe7"]
                  }
                ],
                global: false
              },
              opacity: 1,
              shadowBlur: 0
            },
            label: {
              normal: {
                formatter: function(param) {
                  return self.datas[0] + "%";
                },
                textStyle: {
                  color: "#000",
                  insideColor: "#000",
                  fontSize: 14
                }
              }
            }
          },
          {
            type: "liquidFill",
            data: [
              {
                name: "A",
                value: self.datas[1] / 100,
                key: self.datas[1]
              }
            ],
            radius: "50%",
            center: ["50%", "70%"],
            outline: {
              borderDistance: 2,
              itemStyle: {
                borderWidth: 3,
                borderColor: "#e56600",
                shadowBlur: 0
              }
            },
            backgroundStyle: {
              color: "#fff",
              opacity: 1
            },
            itemStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 1,
                    color: ["#f9ddba"]
                  },
                  {
                    offset: 0,
                    color: ["#ef9433"]
                  }
                ],
                global: false
              },
              opacity: 1,
              shadowBlur: 0
            },
            label: {
              normal: {
                formatter: function(param) {
                  return self.datas[1] + "%";
                },
                textStyle: {
                  color: "#000",
                  insideColor: "#000",
                  fontSize: 14
                }
              }
            }
          }
        ]
      };
    }
  }
};
</script>
<style scoped>
.water {
  width: 100%;
  height: calc(100% - 20px);
}
</style>