Blame view

src/views/dashboard/workbench/components/Week.vue 2.49 KB
1
<template>
2
  <CollapseContainer title="销售统计" :canExpan="false">
3
    <div ref="chartRef" :style="{ width: '100%' }"></div>
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
  </CollapseContainer>
</template>
<script lang="ts">
  import { defineComponent, Ref, ref, onMounted } from 'vue';

  import { CollapseContainer } from '/@/components/Container/index';
  import { useApexCharts } from '/@/hooks/web/useApexCharts';

  export default defineComponent({
    components: { CollapseContainer },
    setup() {
      const chartRef = ref<HTMLDivElement | null>(null);
      const { setOptions } = useApexCharts(chartRef as Ref<HTMLDivElement>);
      onMounted(() => {
        setOptions({
          series: [
20
21
            { name: 'Visits', data: [90, 50, 86, 40, 100, 20] },
            { name: 'Sales', data: [70, 75, 70, 76, 20, 85] },
22
23
24
          ],
          dataLabels: {
            style: {
25
              colors: ['#b9c3cd', '#b9c3cd', '#b9c3cd', '#b9c3cd', '#b9c3cd', '#b9c3cd'],
26
27
            },
          },
28
29
30
31
32
33
34
35
36
          chart: {
            height: 350,
            type: 'radar',
            dropShadow: {
              enabled: true,
              blur: 1,
              left: 1,
              top: 1,
            },
37
38
39
40
41
          },
          yaxis: {
            show: false,
          },
          grid: {
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
            show: false,
          },
          legend: { show: false },
          title: {
            show: false,
          },
          tooltip: {
            x: { show: false },
          },
          markers: {
            size: 0,
          },
          xaxis: {
            categories: ['2011', '2012', '2013', '2014', '2015', '2016'],
          },
          stroke: {
            width: 0,
          },
          colors: ['#9f8ed7', '#1edec5'],
          plotOptions: {
            radar: {
              polygons: {
                strokeColors: [
                  '#e8e8e8',
                  'transparent',
                  'transparent',
                  'transparent',
                  'transparent',
                  'transparent',
                ],
                connectorColors: 'transparent',
              },
            },
          },
          fill: {
            type: 'gradient',
            gradient: {
              shade: 'dark',
              gradientToColors: ['#8e9ad6', '#1fcadb'],
              shadeIntensity: 1,
              type: 'horizontal',
              opacityFrom: 1,
              opacityTo: 1,
              stops: [0, 100, 100, 100],
86
87
88
89
90
91
92
93
            },
          },
        });
      });
      return { chartRef };
    },
  });
</script>