使用Echarts+Ajax制作动态统计图表

1.使用Echats有两个比较方便的网站

1.https://echarts.baidu.com/echarts2/doc/example.html    (统计图的样式)

2.https://echarts.baidu.com/builder.html                               (在线js定制生成)

2.引入ECharts

直接在官网下载所需ECharts文件,或者去上面定制生成js文件然后像引入普通JavaScript库一样用script标签引入即可。代码:

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ECharts入门</title>
</head>
<body>
   <!-- 引入ECharts文件 -->
    <script src='echarts.min.js'></script>
</body>
</html>

3.制作统计图(列举一个饼图和柱图)

1
2
3
4
<!-- 查看饼状图 -->
<div id="main" style="width: 600px;height:400px;"></div>                    
<!-- 查看柱状图 -->
<div id="main2" style="width: 600px;height:400px;"></div>

4.初始化,指定图表配置和使用Ajax动态绑定数据

后台写方法查询数据是返回json格式,前台使用ajax调用解析,然后填充数据到Echaets里面就可以了

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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
//饼状图绑定数据    <script type="text/javascript">
        // 基于准备好的dom,初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        $.ajax({
            url: "../../wxInterface/yqwxRepair.asmx/WXTJ",                //后台方法路径(返回json格式)
            type: "POST",
            async: false,
            dataType: "json",
            data: "",
            contentType: "application/json",
            cache: false,
            timeout: 30000,
            success: function (json) {
                json = eval("(" + json.d + ")");                       //对后台json解析,根据返回的格式不同自行修改
                
                var data = json.data;
                if (json) {                    var servicedata = [];
                    for (var i = 0; i < data.length; i++) {
                        var obj = new Object();
                        obj.name = data[i].YQMC;                         //循环取你想要显示的名称,对应数据库字段
                        obj.value = data[i].CiShu;                       //循环取你想要显示的值
                        servicedata[i] = obj;                            //待会要填充的数据(包含名称和值)
                    }
                    
 
                    myChart.setOption({
                        title: {
                            text: '仪器维修次数',
                            subtext: '饼图',
                            x: 'center'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: "{b} <br/>{c} : {d} %"      //a 系列名称,b 数据项名称,c 数值,d 百分比
                        },
                        legend: {
                            orient: 'vertical',
                            x: 'left',
                            data: data.YQMC                                //绑定名称
                        },
                        toolbox: {
                            show: true,
                            feature: {
                                mark: { show: true },
                                dataView: { show: true, readOnly: false },
                                magicType: {
                                    show: true,
                                    type: ['pie', 'funnel'],
                                    option: {
                                        funnel: {
                                            x: '25%',
                                            width: '50%',
                                            funnelAlign: 'left',
                                            max: 1548
                                        }
                                    }
                                },
                                restore: { show: true },
                                saveAsImage: { show: true }
                            }
                        },
                        calculable: true,
                        series: [
                            {
                                name: '点击量',
                                type: 'pie',
                                radius: '55%',//饼图的半径大小 
                                center: ['50%', '60%'],//饼图的位置 
                                data: servicedata                               //填充数据        
                            }
                        ]
                    })
                }
            },
            error: function (errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
                myChart.hideLoading();
            }
        });
    </script>
//柱状图
    <script type="text/javascript">   
        var myChart2 = echarts.init(document.getElementById('main2'));
        // 显示标题,图例和空的坐标轴
        myChart2.setOption({
            title: {
                text: '仪器维修次数'
            },
            tooltip: {},
            legend: {
                data: ['仪器']
            },
            xAxis: {
                data: []
            },
            yAxis: {},
            series: [{
                name: '仪器',
                type: 'bar',
                data: []
            }]
        });
        var names = [];    //类别数组(实际用来盛放X轴坐标值)
        var nums = [];    //销量数组(实际用来盛放Y坐标值)
      
        $.ajax({
            url: "../../wxInterface/yqwxRepair.asmx/WXTJ",
            type: "POST",
            async: false,
            dataType: "json",
            data: "",
            contentType: "application/json",
            cache: false,
            timeout: 30000,
            success: function (json) {
                json = eval("(" + json.d + ")");
                var Data = json.data;
                        if (json) {
                            for (var i = 0; i < Data.length; i++) {
                        names.push(Data[i].YQMC);    //挨个取出类别并填入类别数组
                    }
                            for (var i = 0; i < Data.length; i++) {
                        nums.push(Data[i].CiShu);    //挨个取出销量并填入销量数组
                    }
                    myChart2.setOption({        //加载数据图表
                        xAxis: {
                            data: names
                        },
                        series: [{
                            // 根据名字对应到相应的系列
                            name: '仪器',
                            data: nums
                        }]
                    });
                }
            },
            error: function (errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
                myChart2.hideLoading();
            }
        });
       
    </script>

 

posted @   奶茶先生  阅读(1961)  评论(0编辑  收藏  举报
点击右上角即可分享
微信分享提示