<template>
  <div :id="id" :style="{width: containerSize.width, height: containerSize.height}">
  </div>
</template>

<script type="text/ecmascript-6">
import * as echarts from 'echarts'

export default {
  name: 'RightEcharts',
  props: {
    id: {
      type: String,
      default: 'RightEcharts'
    },
    containerSize: {
      type: Object,
      default: null,
      width: {
        type: String,
        default: null
      },
      height: {
        type: String,
        default: null
      }
    },
    dataSource: {
      type: Array,
      default: null
    }
  },
  data() {
    return {}
  },
  mounted() {
    // this.initEchartsData()
  },
  methods: {
    initEchartsData() {
      const { id, dataSource } = this
      const myChart = echarts.init(document.getElementById(id))
      const option = {
        series: [
          {
            center: ['50%', '50%'], // 仪表的位置
            name: '刻度', // 仪表的名字
            type: 'gauge', // 统计图类型为仪表
            radius: '80%', // 统计图的半径大小
            min: 0, // 最小刻度
            max: 100, // 最大刻度
            splitNumber: 10, // 刻度数量
            axisLine: {
              show: false
            }, // 仪表盘轴线
            axisLabel: {
              // 仪表盘上的数据
              show: true,
              fontSize: 15,
              color: '#6f92ea', // 仪表盘上的轴线颜色
              distance: -15 // 图形与刻度的间距
            }, // 刻度标签。
            axisTick: {
              show: true,
              splitNumber: 5, // 刻度的段落数
              lineStyle: {
                color: '#54a3f0',
                width: 2 // 刻度的宽度
              },
              length: -8 // 刻度的长度
            }, // 刻度样式
            splitLine: {
              // 文字和刻度的偏移量
              show: true,
              length: -20, // 便宜的长度
              lineStyle: {
                color: '#54a3f0'
              }
            } // 分隔线样式
          },
          {
            type: 'gauge',
            radius: '65%', // 统计图的半径大小
            anchor: {
              show: true,
              showAbove: true,
              size: 18,
              itemStyle: {
                color: '#6795f7'
              }
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              show: false
            },
            axisTick: {
              show: false
            },
            pointer: {
              show: true,
              icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
              width: 4,
              length: '50%',
              itemStyle: {
                color: '#6795f7'
              },
              offsetCenter: [0, 0]
            },
            itemStyle: {
              color: 'rgba(84,163,240,0.5)',
              shadowColor: 'rgba(84,163,240,0.25)',
              shadowBlur: 10,
              shadowOffsetX: 2,
              shadowOffsetY: 2
            },
            progress: {
              show: true,
              overlap: true,
              roundCap: true,
              width: 13
            },
            axisLine: {
              roundCap: true,
              lineStyle: {
                width: 13
              }
            },
            data: dataSource,
            detail: {
              fontSize: 36,
              color: '#15b0ff',
              fontFamily: 'GothicThirteenStd',
              formatter: '{value}%'
            },
            title: {
              fontSize: 16,
              fontFamily: 'MicrosoftYaHei'
            }
          },
          {
            // 内圆
            type: 'pie',
            radius: '50%',
            center: ['50%', '50%'],
            z: 1,
            itemStyle: {
              normal: {
                color: new echarts.graphic.RadialGradient(0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(101,175,218, 0.1)'
                    },
                    {
                        offset: 0.5,
                        color: 'rgba(98,188,251, 0.1)'
                    },
                    {
                        offset: 1,
                        color: 'rgba(98,188,251, 0.1)'
                    }
                ], false),
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              }
            },
            hoverAnimation: false,
            label: {
              show: false
            },
            tooltip: {
              show: false
            },
            data: [100]
          }
        ]
      }
      myChart.setOption(option)
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    }
  }
}
</script>

<style scoped>
</style>
