JavaScript数据可视化组件

1.自定义的toolbox以及自定义dataView

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
toolbox: {
    show: true,
    feature: {
        dataView: { //数据视图部分的配置
            optionToContent:function(opt){ 
                return divObj[0];
            },
            readOnly: true
        },
        saveAsImage: {//下载图片 的 配置
            type: 'png',
            name: '资金分析图',
            backgroundColor: '#f1f1f1',
            title: '资金分析图',
            pixelRatio: 2
        },
        myTool:{ //自定义方法 配置   我这是为了实现 饼图切换为柱状图
            show : true,
            title : '切换为柱状图',
            icon : 'image://images/inp-icon/zuzhut_03.png',
            onclick : function (){
                myChart.clear();
                myChart.setOption(option2);
            }
        }
    },
    right:50,
    top:36,
},

2.dataView的optionToContent函数

该javascript的opt.xAxis[0].data为x轴上的data数据
opt.series就是对应着series的数据，series.data，series.name对应的就是series中的data和name

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
optionToContent: function (opt) {
    var axisData = opt.xAxis[0].data;
    var series = opt.series;
    var table = '<table style="width:100%;text-align:center"><tbody><tr>'
        + '<td>类别/td>'
        + '<td>' + series[0].name + '</td>'
        + '</tr>';
    for (var i = 0, l = axisData.length; i < l; i++) {
        table += '<tr>'
            + '<td>' + axisData[i] + '</td>'
            + '<td>' + series[0].data[i] + '</td>'
            + '</tr>';
    }
    table += '</tbody></table>';
    return table;
}

以下是实现案例可以以此参考：

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="echarts.js"></script>
    <style>
        .box{
            width: 700px;
            height: 600px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script>
        let box = document.querySelector(".box")
        let myCharts = echarts.init(box)
        let option = {
            toolbox:{
                show:true,
                feature:{
                    dataView:{
                        show:true,
                        optionToContent: function (opt) {
                            var axisData = opt.xAxis[0].data;
                            var series = opt.series;
                            var table = '<table style="width:100%;text-align:center"><tbody><tr>'
                                + '<td>类别</td>'
                                + '<td>' + series[0].name + '</td>'
                                + '</tr>';
                            for (var i = 0, l = axisData.length; i < l; i++) {
                                table += '<tr>'
                                    + '<td>' + axisData[i] + '</td>'
                                    + '<td>' + series[0].data[i] + '</td>'
                                    + '</tr>';
                            }
                            table += '</tbody></table>';
                            return table;
                        }
                    }
                }
            },
            xAxis:{
                type:"category",
                data:["mon","tue","web"]
            },
            yAxis:{
                type:"value"
            },
            series:{
                name:"销售",
                type:"bar",
                data:[2,3,5]
            },
        }
        myCharts.setOption(option)
    </script>
</body>
</html>

3.时间轴

timeline中data的数据对应着options数组中一一对应着每一个元素
在options中的数据表示是会随着时间轴变化的数据

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
timeline:{
    data: ['2002-01-01', '2003-01-01', '2004-01-01'],
    loop:true,
    playInterval:3000,
},
options:[
    {
        title:{
            text:"2012"
        },
        series:{
            data:[5,4,3,6,3,2]
        }
    },
    {
        title:{
            text:"2013"
        },
        series:{
            data:[9,4,4,7,7,1]
        }
    },
    {
        title:{
            text:"2014"
        },
        series:{
            data:[5,8,4,7,3,2]
        }
    }
]

以下是实现案例可以以此参考：

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="echarts.js"></script>
    <style>
        .box{
            width: 700px;
            height: 600px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script>
        let box = document.querySelector(".box")
        let myCharts = echarts.init(box)
        let option = {
            timeline:{
                data:["2010","2011","2012"]
            },
            xAxis:{
                type:"category",
                data:["mon","tue","web"]
            },
            yAxis:{
                type:"value"
            },
            series:{
                type:"bar"
            },
            options:[
                {
                    title:{
                        text:"2010"
                    },
                    series:{
                        data:[2,3,4]
                    }
                },
                {
                    title:{
                        text:"2011"
                    },
                    series:{
                        data:[2,7,4]
                    }
                },
                {
                    title:{
                        text:"2012"
                    },
                    series:{
                        data:[2,3,8]
                    }
                }
            ]
        }
        myCharts.setOption(option)
    </script>
    
</body>
</html>

4.grid中实现一盒子多表

利用gridIndex将多余的x轴和y轴绑定到另一个grid中

这是图片

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="echarts.js"></script>
    <style>
        .box{
            width: 1500px;
            height: 600px;
        }
    </style>
</head>
<body>
    <div class = "box"></div>
    <script>
        let box = document.querySelector(".box")
        let myCharts = echarts.init(box)
        let option ={
            title:[
                {text:"图一",left:"25%",top:"1%"},
                {text:"图二",left:"75%",top:"1%"}
            ],
            grid:[
                {
                    left:"5%",
                    width:"45%"
                },{
                    left:"55%",
                    width:"45%"
                }
            ],
            yAxis:[
                {
                    type:"value"
                },
                {
                    gridIndex:1,
                    min:0,
                    max:120,
                    type:"value"
                }
            ],
            xAxis:[
                {
                    type:"category",
                    data:["Mon","Tue","Web","Thu","Fri","Sat","Sun"]
                },
                {
                    gridIndex:1,
                    type:"category",
                    data:["january","february","march"]
                }
            ],
            series:[
                {
                    type:'bar',
                    data:[120, 200, 150, 80, 70, 110, 130],
                },
                {
                    smooth:true,
                    type:'line',
                    data:[44, 20, 100, 80, 70, 40, 80],
                    yAxisIndex:1,
                    xAxisIndex:1
                }
            ]
        }
        myCharts.setOption(option)
    </script>
</body>
</html>