<template>
    <div>
        <common-card
            title="累计用户数"
            value="1,087,503"
        >
          <template>
            <div id="total-users-chart" :style="{width: '100%', height: '100%'}" />
          </template>
          <template slot="footer">
              <div class="total-user-footer">
                <span>日同比</span>
                <span class="emphasis"> 38.79%</span>
                <div class="increase"></div>
                <span class="month">月同比</span>
                <span class="emphasis"> 38.79%</span>
                <div class="decrease"></div>
              </div>
          </template>
        </common-card>
    </div>
</template>

<script>
/* eslint-disable */
import commonCardMixin from '@/mixins/commonCardMixin';
    export default {
        mixins: [commonCardMixin],
        mounted() {
          const chartDom = document.getElementById('total-users-chart')
          const chart = this.$echarts.init(chartDom);
          chart.setOption({
            grid: {
              right: 0,
              left: 0,
              top: 0,
              bottom: 0
            },
            xAxis: {
              type: 'value',
              show: false,
              boundaryGap: false
            },
            yAxis: {
              type: 'category',
              show: false
            },
            series: [
              {
                data: [100],
                type: 'bar',
                barWidth: 10,
                stack: 'sum',
                itemStyle: {
                  color: '#45c946'
                }
              },
              {
                type: 'bar',
                data: [250],
                stack: 'sum',
                itemStyle: {
                  color: '#eee'
                }
              },
              {
                type: 'custom',
                data: [100],
                stack: 'sum',
                renderItem: (params, api) => {
                  const value = api.value(0)
                  const endPoint = api.coord([value, 0])
                  console.log(endPoint)
                  return {
                    type: 'group',
                    children: [{
                      type: 'path',
                      shape: { // 形状
                        d: 'M1024 255.995 511.971 767.909 0 255.996 1024 255.996z', // svg图像内容
                        x: -5, // 偏移量
                        y: -20,
                        width: 10, // 宽高
                        height: 10,
                        layout: 'cover'
                      },
                      style: {
                        fill: '#45c946'
                      }
                    }, {
                      type: 'path',
                      shape: { // 形状
                        d: 'M0 767.909l512.029-511.913L1024 767.909 0 767.909z', // svg图像内容
                        x: -5, //
                        y: 10,
                        width: 10, // 宽高
                        height: 10,
                        layout: 'cover'
                      },
                      style: {
                        fill: '#45c946'
                      }
                    }],
                    position: endPoint,

                  }
                }
              }
            ]
          })
        }
    }
</script>

<style lang="less" scoped>
.total-user-footer {
  display: flex;
  align-items: center;
  .month {
    margin-left: 10px;
  }
}
</style>