<template>
    <div>
        <common-card title="累计用户数" value="1,087,503">
            <template>
                <div id="total-users" :style="{ width: '100%', height: '100%' }"></div>
            </template>
            <template v-slot:footer>
                <div class="context">
                    <span>日同比</span>
                    <span class="money">7.33%</span>
                    <div class="increase" style="margin-right:10px" />
                    <span>月同比</span>
                    <span class="money">38.79%</span>
                    <div class="decrease" />
                </div>
            </template>
        </common-card>
    </div>
</template>

<script>
import commonCardMixin from '@/utils/mixins/commonCardMixin'
export default {
    mixins: [commonCardMixin],
    mounted() {
        const chartsDom = document.getElementById('total-users');
        const charts = this.$echarts.init(chartsDom);
        charts.setOption({
            xAxis: {
                type: 'value',
                show: false,
            },
            yAxis: {
                type: 'category',
                show: false,
            },
            grid: {
                top: 0,
                left: 0,
                bottom: 0,
                right: 0
            },
            series: [
                {
                    type: 'bar',
                    stack: '总量',
                    data: [200],
                    barWidth: 10,
                    itemStyle: {
                        color: "#45c946"
                    }
                },
                {
                    type: 'bar',
                    data: [250],
                    stack: '总量',
                    itemStyle: {
                        color: "#eee"
                    }
                },
                {
                    type: 'custom',
                    data: [200],
                    stack: '总量',
                    renderItem: (params, api) => {
                        const value = api.value(0)
                        const endPoint = api.coord([value, 0])
                        return {
                            type: 'group',
                            children: [{
                                type: 'path',
                                shape: {
                                    d: 'M0 767.909l512.029-511.913L1024 767.909 0 767.909z',
                                    x: -5,
                                    y: 10,
                                    width: 10,
                                    height: 10,
                                    layout: 'cover'
                                },
                                position: endPoint,
                                style: {
                                    fill: '#45c946'
                                }
                            },
                            {
                                type: 'path',
                                shape: {
                                    d: 'M1204 255.996 511.971 767.909 0 255.996 1024 255.996z',
                                    x: -5,
                                    y: -20,
                                    width: 10,
                                    height: 10,
                                    layout: 'cover'
                                },
                                position: endPoint,
                                style: {
                                    fill: '#45c946'
                                }
                            }],

                        }
                    }
                },
            ]
        })
    }
}
</script>
<style>
.context {
    display: flex;
    align-items: center;
}
</style>