1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
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
86
87
88
89
90
91
92
93
94
95
96
| <template>
| <div class="card-radar">
| <Card>
| <p slot="title" class="card-title">订单分析</p>
| <div class="wrap">
| <div class="chart">
| <apexchart type="radar" height="350" :options="chartOptions" :series="series" />
| </div>
| </div>
| </Card>
| </div>
| </template>
|
| <script>
| export default {
| name: "bar",
| components: {},
| props: {},
| data() {
| return {
| series: [
| {
| name: "",
| data: []
| }
| ],
| chartOptions: {
| colors: ["#5088de", "#55c2d6", "#f1633b"],
| chart: {
| toolbar: {
| show: false
| }
| },
| stroke: {
| width: 0
| },
| fill: {
| opacity: 0.4
| },
| markers: {
| size: 0
| },
| labels: ["2015年", "2016年", "2017年", "2018年", "2019年", "2020年"],
| yaxis: {
| labels: {
| show: true,
| style: {
| color: "#999"
| }
| }
| },
| legend: {
| show: true
| },
| dataLabels: {
| enabled: true
| }
| }
| };
| },
| methods: {
| init() {
| this.series = [
| {
| name: "PC端",
| data: [80, 50, 30, 40, 100, 20]
| },
| {
| name: "手机端",
| data: [20, 30, 40, 80, 20, 80]
| },
| {
| name: "平板端",
| data: [44, 76, 78, 13, 43, 10]
| }
| ];
| }
| },
| mounted() {
| this.init();
| }
| };
| </script>
| <style lang="less">
| .card-radar {
| .ivu-card-head {
| border-bottom: none !important;
| }
| .card-title {
| color: #67757c;
| }
| .wrap {
| height: 350px;
| }
| }
| </style>
|
|
