百万级可视化开发进阶笔记———今日交易用户数

效果图：

TodayUser下 index.vue

<template>
  <common-card
  title="今日交易用户数"
  value="62,832"
  >
     <template>
       <div id="today-user-chart" :style="{width:'100%',height:'100%'}"></div>
     </template>
    <template v-slot:footer>
      <span>退货率</span>
      <span class="emphasis">5.06%</span>
    </template>
  </common-card>
</template>

<script>
import commonCardMixin from '@/mixins/commonCardMixin'
export default {
  name: 'today-user',
  mixins: [commonCardMixin],
  mounted () {
    const chartDom = document.getElementById('today-user-chart')
    const chart = this.$echarts.init(chartDom)
    const data = [220, 182, 191, 234, 290, 330, 310]
    chart.setOption({
      tooltip: {
        trigger: 'axis',
        formatter: '{b} : {c}',
        axisPointer: { // 坐标轴指示器，坐标轴触发有效
          show: false,
          type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        }
      },
      xAxis: {
        data: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
        axisLine: {
          show: false
        }
      },
      yAxis: {
        axisLine: {
          show: false
        },
        axisLabel: {
          show: false
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        }
      },
      series: [{
        name: 'a',
        tooltip: {
          show: false
        },
        type: 'bar',
        barWidth: 10,
        itemStyle: {
          normal: {
            color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
              offset: 0,
              color: '#0B4EC3' // 0% 处的颜色
            }, {
              offset: 0.6,
              color: '#138CEB' // 60% 处的颜色
            }, {
              offset: 1,
              color: '#17AAFE' // 100% 处的颜色
            }], false)
          }
        },
        data: data,
        barGap: 0
      }]
    })
  }
}
</script>