creative6.github.io/vechart-test.html at master · Creative6/creative6.github.io · GitHub

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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="//unpkg.com/vue/dist/vue.js"></script>
    <script src="//unpkg.com/echarts/dist/echarts.min.js"></script>
    <script src="//unpkg.com/v-charts/lib/index.min.js"></script>
    <style>
        .ve-line {
            border: 2px solid red;
        }

        .ve-pie {
            border: 2px solid red;
        }

        .content {
            height: 800px;
            width: 400px;
            float: left;
            background: rgb(85, 121, 88);
            box-sizing: border-box;
            margin-left: 30px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="content">
            <ve-line :data="chartData" :settings="chartSettings" height="100%"></ve-line>
        </div>
        <div class="content">
            <ve-pie :data="chartData" :settings="chartSettings" height="100%"></ve-pie>
        </div>
        <div class="content">
            <ve-pie :data="chartData" :settings="chartSettings" :extend="chartExtend" height="100%"></ve-pie>
        </div>
        <div class="content">
            <ve-radar :data="chartData" :settings="chartSettings" :extend="chartExtend" height="100%"></ve-radar>
        </div>
    </div>

    <script>
        new Vue({
            el: '#app',
            created: function () {
                this.chartData = {
                    columns: ['日期', '销售额-1季度', '销售额-2季度', '占比', '其他'],
                    rows: [{
                            '日期': '1月1日',
                            '销售额-1季度': 1523,
                            '销售额-2季度': 1523,
                            '占比': 0.12,
                            '其他': 100
                        },
                        {
                            '日期': '1月2日',
                            '销售额-1季度': 1223,
                            '销售额-2季度': 1523,
                            '占比': 0.345,
                            '其他': 100
                        },
                        {
                            '日期': '1月3日',
                            '销售额-1季度': 2123,
                            '销售额-2季度': 1523,
                            '占比': 0.7,
                            '其他': 100
                        },
                        {
                            '日期': '1月4日',
                            '销售额-1季度': 4123,
                            '销售额-2季度': 1523,
                            '占比': 0.31,
                            '其他': 100
                        },
                        {
                            '日期': '1月5日',
                            '销售额-1季度': 3123,
                            '销售额-2季度': 1523,
                            '占比': 0.12,
                            '其他': 100
                        },
                        {
                            '日期': '1月6日',
                            '销售额-1季度': 7123,
                            '销售额-2季度': 1523,
                            '占比': 0.65,
                            '其他': 100
                        }
                    ]
                }
                this.chartSettings = {
                    areaStyle: {}
                }

                this.chartExtend = {
                    series: {
                        radius: '100%'
                    }
                }
            }
        })
    </script>
</body>

</html>