<template>
    <div class="chart" ref="chartsRef">

    </div>
</template>
<script>
import * as echarts from 'echarts'
import img from '@/views/electromechanicalMange/assets/guage.png'
export default {
    props: {
        value: [Number, String]
    },
    data() {
        return {
            charts: null,
            img: img
        }
    },
    created() {
        this.$nextTick(() => {
            this.initCharts()
        })
    },
    watch: {
        value(val) {
            this.initCharts()
        }
    },
    methods: {
        initCharts(data) {
            this.charts = echarts.init(this.$refs.chartsRef)
            this.charts.setOption(this.setOption(data || []), true)
        },
        setOption() {
            let option = {
                series: [
                    {
                        name: '最外层',
                        type: 'gauge',
                        radius: '85%',
                        center: ['50%', '40%'],
                        splitNumber: 1, //刻度数量
                        startAngle: 180,
                        endAngle: 0,
                        min: 0, //最小刻度
                        max: 100, //最大刻度
                        z: 0,
                        zlevel: 0,
                        axisLine: {
                            show: true,
                            lineStyle: {
                                // 轴线样式
                                width: 0, // 宽度
                                color: [[1, 'rgba(2, 56, 57, 1)']]
                            }
                        },
                        //分隔线样式
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        },
                        axisTick: {
                            show: true,
                            splitNumber: 60,
                            length: 1,
                            distance: 0,
                            lineStyle: {
                                color: 'rgba(10, 149, 128, 1)',
                                width: 1
                            }
                        },
                        pointer: {
                            show: false
                        },
                        detail: {
                            show: false
                        }
                    },
                    // 最小
                    {
                        type: 'gauge',
                        radius: '45%', // 位置
                        center: ['50%', '40%'],
                        min: 0,
                        max: 100,
                        startAngle: 180,
                        endAngle: 0,
                        axisLine: {
                            show: true,
                            lineStyle: {
                                // 轴线样式
                                width: 30, // 宽度
                                color: [
                                    [
                                        1,
                                        new echarts.graphic.RadialGradient(0.5, 1, 1, [
                                            {
                                                offset: 1,
                                                color: '#013637'
                                            },
                                            {
                                                offset: 0.3,
                                                color: '#04494a'
                                            }
                                        ])
                                    ]
                                ] // 颜色
                            }
                        },
                        axisTick: {
                            // 刻度
                            show: false
                        },
                        splitLine: {
                            // 分割线
                            show: false
                        },
                        axisLabel: {
                            // 刻度标签
                            show: false
                        },
                        pointer: {
                            // 仪表盘指针
                            show: false
                        },
                        detail: {
                            fontSize: 16,
                            lineHeight: 35,
                            color: 'transparent',
                            offsetCenter: [0, '-20%'],
                            backgroundColor: {
                                image: this.img
                            }
                        }
                    },
                    {
                        type: 'gauge',
                        center: ['50%', '40%'],
                        startAngle: 180,
                        endAngle: 0,
                        min: 0,
                        max: 1,
                        splitNumber: 8,
                        axisLine: {
                            lineStyle: {
                                width: 8,
                                color: [
                                    [
                                        this.value,
                                        new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                            {
                                                offset: 0,
                                                color: 'rgba(11, 190, 160, 1)'
                                            },
                                            {
                                                offset: 1,
                                                color: 'rgba(9, 23, 34, 1)'
                                            }
                                        ])
                                    ],
                                    [1, 'rgba(1, 54, 55, 0)']
                                ]
                            }
                        },
                        pointer: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        },
                        detail: {
                            fontSize: 14,
                            color: '#fff',
                            offsetCenter: [0, '-10%'],
                            valueAnimation: true,
                            formatter: function(value) {
                                return value  + '%'
                            }
                        },
                        data: [
                            {
                                value: this.value,
                                name: ''
                            }
                        ]
                    }
                ]
            }
            return option
        }
    }
}
</script>
<style lang="scss" scoped>
.chart {
    width: 160px;
    height: 160px;
}
</style>
