<template>
    <div :class="className" :id="id" :style="{height:height,width:width}"></div>
</template>

<script>
    import mixins from '@/mixins';
    import 'echarts-liquidfill';

    export default {
        mixins: [mixins],
        props: {
            theme: {
                type: String,
            },
        },
        data() {
            return {};
        },
        methods: {
            updateChart() {
                this.chart.setOption({
                    series: {
                        type: 'liquidFill',
                        radius: '70%',
                        name: this.data.name,
                        data: [this.data.value, this.data.value / 1 - 0.05],
                        itemStyle: {
                            shadowBlur: 0,
                        },
                        color: ['#2d8cf0', 'rgb(87, 163, 243)'],
                        label: {
                            normal: {
                                color: '#666',
                                textStyle: {
                                    fontSize: 30,
                                    fontFamily: 'helveticaNeue Thin',
                                },
                            },
                        },
                        backgroundStyle: {
                            borderColor: '#2d8cf0',
                            borderWidth: 1,
                            color: '#ffffff',
                        },
                        outline: {
                            show: false,
                        },
                        phase: 0,
                        period: 4000,
                        waveLength: '100%',
                        animationDurationUpdate: 2000,
                    },
                });
            },

        },
    };
</script>
