<template>
  <div class="inerank-container">
    <div :style="{height:'100%',width:'100%'}" ref="myLineRank"></div>
  </div>
</template>
<script>
export default {
  props: {
    newdata: {
      type: Number,
      default: 0
    },
    olddata: {
      type: Number,
      default: 0
    },
    colors:{
      type:Array,
      default:[]
    },
    title:{
      type:String,
      default:""
    }
  },
  data() {
    return {
      placeHolderStyle: {
        normal: {
          color: "rgba(0,0,0,0)",
          label: { show: false },
          labelLine: { show: false }
        },
        emphasis: {
          color: "rgba(0,0,0,0)"
        }
      }
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      let myChart = this.$echarts.init(this.$refs.myLineRank);
      let dataAlias = [this.$t('objFill.v101.activity.jinnian'), this.$t('objFill.v101.activity.qunian')];
      let data2 = [{
        name:this.$t('objFill.v101.activity.jinnian'),
        value:this.newdata
      }, {
        name:this.$t('objFill.v101.activity.qunian'),
        value:this.olddata,
        itemStyle:this.placeHolderStyle
      }];
      let data3 = [{
        name:this.$t('objFill.v101.activity.qunian'),
        value:this.olddata
      },{
        name:this.$t('objFill.v101.activity.jinnian'),
        value:this.newdata,
        itemStyle:this.placeHolderStyle
      }];
      let option = {
        tooltip: {
          show:false
        },
        graphic: [
          {
            type: "text",
            left:'center',
            top: "center",
            style: {
              text: this.title,
              textAlign: "center",
              fill: this.colors[0], //文字的颜色
              fontSize: 16,
              width: 120,
              fontFamily: "pingfangR"
            }
          }
        ],
        calculable: true,
        series: [
          {
            // center: ["25%", "45%"],
            name:this.$t('hotel.order_Form'),
            type: "pie",
            radius: ["80%", "90%"],
            hoverAnimation: false,
            legendHoverLink:false,
            tooltip:false,
            startAngle:90,
            itemStyle: {
              emphasis: {
                barBorderRadius: 30
              },
              normal: {
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                },
                color: new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [
                  { offset: 0, color: "#00BFF9" },
                  { offset: 0.35, color: "#0067CC" },
                  { offset: 1, color: "#0067CC" }
                ])
              }
            },
            data: data2
          },
          {
            // center: ["25%", "45%"],
            name:this.$t('hotel.order_Form'),
            type: "pie",
            radius: ["60%", "70%"],
            hoverAnimation: false,
            legendHoverLink:false,
            tooltip:false,
            startAngle:90,
            itemStyle: {
              emphasis: {
                barBorderRadius: 30
              },
              normal: {
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                },
                color: new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [
                  { offset: 0, color: this.colors[1] },
                  { offset: 0.35, color: this.colors[0] },
                  { offset: 1, color: this.colors[0] }
                ])
              }
            },
            data: data3
          }
        ]
      };

      myChart.setOption(option);
    }
  }
};
</script>
<style>
.inerank-container {
  height: 100%;
  width: 100%;
}
</style>