echarts+ajax+ashx+json调用数据库数据实现饼图和柱状图

实现方式：ajax+ashx+json

注意事项： 官网所需格式为   [{value:23,name:'xxxx' }]    请将key 的名字不要写错

具体代码，各位看官 请下移目光。

 
   
页面部分就设置一个div 就好了

   
接下来就是js部分了  其实Echarts 跟HTML5中的 Canvans 还是有联系的 想知道的可以查资料哟

$("#btngo").click(function () { //这里用的是点击事件下面 当然这也是模仿你有条件查询的时候咯
            var dom = document.getElementById('contanis');
            var mycharts = echarts.init(dom);
            option = {
                title: {
                    text: '部门人口比例',
                    subtext: '测试数据',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a}
{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: []
                },
                series: [
                    {
                        name: '2012年度',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: [],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)' //这怎么会有个.5呢？ 看来还是要看看H5哟
                            }
                        }
                    }
                ]
            };
            mycharts.setOption(option);

接下来就是 ajax部分了 动态加载数据才是根本的 数据固定多没意思

$.ajax({
                type: "get",
                async: true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
                url: "../Handler/DepartmentHandler.ashx",   
                data: {},//demo 没加条件
                dataType: "json",        //返回数据形式为json
                success: function (result) {
                    for (var i = 0; i < result.length; i++)
                    {
                        name.push(result[i].name);                       
                    }                  
                    mycharts.setOption({ //加载数据图表
                        legend:{data:name },
                        series: [{
                            data:result
                        }]
                    });
 
                },
                    error: function (errorMsg) {
                        //请求失败时执行该函数
                        alert("图表请求数据失败!");
                        
                    }
 
            });

ashx部分就简单多了 单纯的序列化数据

DataTable result = BLL.Department.GetDeptNumber();         
            List