TIP

EAdmin集成了 chart.js,复杂的文档我们来看,只给你们留下最简单的调用,如需高级功能请查阅官网文档按需实现

chart.js官网

# api

Eadmin.chart

参数 说明 类型 默认值
dom 需要应用城市选择的input,例如:'#p1', '.p1'等等 string -
param 参数列表 object -

WARNING

dom 必须是一个 canvas 元素

# param参数内容

参数 说明 类型 默认值
type 图表类型:linebarpie string 'line'
labels 横坐标项 array []
datas 数据 array -
title 标题 object -
legend 图例 boolean true

# 线形图

<canvas id="p1"></canvas>
<script>
    (function(){
        Eadmin.chart('#p1', {
            labels : [
                '一月',
                '二月',
                '三月',
                '四月',
                '五月',
                '六月'
            ],
            datas : [
                {
                    label : '营业额',
                    data  : [
                        55, 323, 666, 51, 12, 412
                    ]
                },
                {
                    label : '纯利润',
                    data  : [
                        13, 123, 44, 234, 829, 443
                    ]
                }
            ],
            title : {
                // 如果不希望显示标题则设为false
                show : true,
                text : '上半年业绩'
            },
            // 如果不希望显示图例则设为false
            legend : true
        });
    })();
</script>
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

# 柱状图

<canvas id="p1"></canvas>
<script>
    (function(){
        Eadmin.chart('#p2', {
            type : 'bar',
            labels : [
                '一月',
                '二月',
                '三月',
                '四月',
                '五月',
                '六月'
            ],
            datas : [
                {
                    label : '营业额',
                    data  : [
                        55, 323, 666, 51, 12, 412
                    ]
                },
                {
                    label : '纯利润',
                    data  : [
                        13, 123, 44, 234, 829, 443
                    ]
                }
            ],
            title : {
                text : '上半年业绩'
            }
        });
    })();
</script>
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

# 饼状图

<canvas id="p1"></canvas>
<script>
    (function(){
        Eadmin.chart('#p3', {
            type : 'pie',
            labels : [
                '男性',
                '女性'
            ],
            datas : [
                55, 323
            ],
            title : {
                text : '性别比例'
            }
        });
    })();
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18