<template>
  <div
    :id="id"
    :style="`width:${curWidth};height:${curHeight}`"
  >
  </div>
</template>
<script>
/**
   * @author 王晓颖
   * @date 2020/08/19
   * @Description 圆型水球图
   * @props 数据格式：{
   *    id: '',
      width: 0,
      height: 0,
      xAxisData:[],
      data: []
    }
   *
   */
import { countSize } from '@/utils/utils'
import echartsLiquidfill from 'echarts-liquidfill'// 在这里引入
export default {
  name: 'RoundLiquidFill',
  props: {
    id: { // id
      type: String,
      default: 'simpleBarChart'
    },
    width: { // 宽
      type: Number | String,
      default: '100%'
    },
    height: { // 高
      type: Number | String,
      default: '100%'
    },
    shape:{ // 容器形状:circle|rect|triangle|diamond|pin|arrow
      type: String,
      default: 'circle'
    },
    color: { // 波浪外文字颜色
      type: String,
      default: '#fff'
    },
    colors: { // 波浪外文字颜色
      type: Array,
      default: () => { return ['#21cf87', '#156ACF'] }
    },
    insideColor: { // 波浪里面文字的颜色
      type: String,
      default: 'white'
    },
    waterColor: { // 波浪颜色
      type: String,
      default: '#1772de'
    },
    hoverWaterColor: { // 鼠标移到波浪上显示的颜色
      type: String,
      default: '#101d5d'
    },
    shadowColor: { // 阴影颜色
      type: String,
      default: '#8dc1e9'
    },
    backgroundColor: {
      type: String,
      default: 'transparent'
    }, // 背景颜色
    fontColor: { // 轴线上文字颜色
      type: String,
      default: '#ffffff'
    },
    labelColor: { // 图形上文本标签颜色
      type: String,
      default: '#47c8b2'
    },
    data: { // 数据
      type: Array,
      default: () => { return [50] }
    },
    xAxisData: { // X轴数据
      type: Array,
      default: () => { return [] }
    }
  },
  data () {
    return {
      curWidth: this.width,
      curHeight: this.height,
      option: {
        series: [
          {
            name: '水球图', // 系列名称
            type: 'liquidFill', // 类型
            data: [], // 数据
            itemStyle: {
              opacity: 0.5, // 波浪的透明度
              shadowBlur: 10, // 波浪的阴影范围
              shadowColor: this.shadowColor// 阴影颜色
            },
            emphasis: {
              itemStyle: {
                opacity: 1 // 鼠标经过波浪颜色的透明度
              }
            },
            shape: this.shape,
            radius: '80%',
            outline: { // 边框
              borderDistance: 2, // 外部轮廓与图表的距离 数字
              itemStyle: {
                borderWidth: 4, // 边框宽度
                borderColor: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
                  [
                    {offset: 0, color: this.colors[0]},
                    {offset: 1, color: this.colors[1]}
                  ]
                ), // 边框颜色
                shadowBlur: 5 // 外部轮廓的阴影范围 一旦设置了内外都有阴影
              }
            },
            backgroundStyle: {
              color: this.backgroundColor// 图表的背景颜色
            },
            label: {
              normal: {
                show: true,
                color: this.color,
                insideColor: this.insideColor,
                fontSize: '120%'
              }
            } // 图形上的文本标签
          }
        ]
      }
    }
  },
  watch: {
    width (newVal, oldVal) {
      this.curWidth = newVal
      this.refreshEchart()
    },
    height (newVal, oldVal) {
      this.curHeight = newVal
      this.refreshEchart()
    },
    data (newVal, oldVal) {
      this.option.series[0].data = newVal
      this.refreshEchart()
    },
    xAxisData (newVal, oldVal) {
      this.option.xAxis.data = newVal
      this.refreshEchart()
    }
  },
  mounted () {
    if (this.data.length) {
      this.option.series[0].data = this.data
      // const colors = []
      // for (const index in this.colors) {
      //   if (index === '0') {
      //     colors.push({offset: 0, color: this.colors[index]})
      //   } else {
      //     colors.push({offset: 1, color: this.colors[index]})
      //   }
      // }
      // this.option.series[0].itemStyle = { // 图形演示
      //   normal: {
      //     // LinearGradient 用于配置渐变色的起始位置，分别对应右下左上，0001表示正上方
      //     color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, colors)}
      // }
      this.initEchart()
    }
  },
  methods: {
    refreshEchart () {
      if (this.data.length) {
        this.option.series[0].data = this.data
        this.initEchart()
      }
    },
    initEchart () {
      const _div = document.getElementById(this.id)
      setTimeout(() => {
        let myChart = this.$echarts.init(_div)
        myChart.setOption(this.option, true)
        window.onresize = myChart.resize
      }, 500)
    }
  }
}
</script>

<style scoped>
</style>