<template>
  <div>
    <div ref="main" style="width:250px ;height:230px;"></div>
    <div style="width:250px ;height:230px;padding-left: 6rem;font-size: 16px;font-weight: bold">{{bottomTitle}}</div>
  </div>

</template>

<script>
import * as echarts from "echarts";
import 'echarts-liquidfill'
export default {
  name: "WaterWorld",
  mounted: function() {
    this.$nextTick(function() {
      this.getPie()
    })
  },
  props:{
    resultData: {
  
    },
    titleText:{
      type:String,
    },
    bottomTitle:{
      type:String,
    },

  },
  watch:{
    resultData(){
      this.$nextTick(function() {
        this.getPie()
      })
    }
  },
  methods: {
    getPie() {
      // 绘制图表
      var myChart = echarts.init(this.$refs.main)
      // 指定图表的配置项和数据
      var option = {
        title: {
          text: this.titleText,
          x: 'left' ,
          top: '-1%',
          //标题位置
          // textStyle: { //标题内容的样式
          //   color: '#000',
          //   fontStyle: 'normal',
          //   fontWeight: 100,
          //   fontSize: 16 //主题文字字体大小，默认为18px
          // },
        },
        series: [{
          type: 'liquidFill',

          name: 'Liquid Fill',
          radius: "70%",
          data: [{
            name: 'score',
            direction: 'right',
            value: this.resultData,
            itemStyle: {
              normal: {
                color: '#34cfe9'
              }
            }
          }],
          label: {
            nomal: {
              formatter: function(param) {
                return param.value * 100
              },
              textStyle: {
                color: '#34cfe9',
                insideColor: '#ffffff',
                fontSize: 50
              }
            }
          },
          outline: { // 是否显示外圈
            show: true
          }
        }]
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    }
  }
}
</script>

<style scoped>

</style>