Echarts 3.19 .net<ajax+json>绘制柱状图 非静态

当你看到这篇文章的时候 说明 你已经又看过 Echarts官网 了 ，自己做这个的时候走了很多的弯路 说出来不怕你们笑话
1.想到是数组形式的 先在C#中做了行列转换 ，又用string做拼接。
2.看到别人的例子 差不多很多是前端做的 没有动态 静态页面 下载，一看是静态写死的 自己都想撞墙。
3.做转换的时候蒙住了，用某度查实例。。。。。。
话不多说
先前你要准备好文件 ：Echarts文件下载页面
做的是demo 所以引入单个 文件咯

 <script src="../Scripts/jquery-1.8.2.min.js"></script>
  <script src="../Scripts/echarts/echarts.min.js"></script>

接下来就是书写图片部分

<div>
         <%--按钮触发--%>
         <input type="button" id="btncanv" value="去吧 皮卡丘" /> 
     </div>
        <%--声明一个DIV 用来装Canvas绘制的图片--%>
    <div id="contanis" style="width:1000px;height:800px" >
        <script type="text/javascript">           
            $("#btncanv").click(function () {
                //获取到绘制dom
                var dom = document.getElementById("contanis");
                var myChart = echarts.init(dom);
                myChart.setOption({
                    title: {
                        text: '异步数据加载示例' //图片标题
                    },
                    tooltip: {},
                    legend: {
                        data: ['部门人口']  
                    },
                    xAxis: {
                        data: []
                    },
                    yAxis: {},
                    series: [{
                        name: '2015',
                        type: 'bar',//可以更改为 line（折线）
                        data: [] //此处给空 后面用ajax给他赋值
                    }]
                });

ajax上菜来了

 myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画

                var names = [];    //类别数组（实际用来盛放X轴坐标值）
                var nums = [];    //销量数组（实际用来盛放Y坐标值）

                $.ajax({
                    type: "post",
                    async: true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
                    url: "../Handler/DepartmentHandler.ashx",    //请求发送到../Handler/DepartmentHandler处
                    data: {},
                    dataType: "json",        //返回数据形式为json
                    success: function (result) {                       
                        //请求成功时执行该函数内容，result即为服务器返回的json对象
                        if (result) {
                            for (var i = 0; i < result.length; i++) {
                                names.push(result[i].name);    //挨个取出类别并填入类别数组
                            }

                            for (var i = 0; i < result.length; i++) {
                                nums.push(result[i].values);    //挨个取出销量并填入销量数组
                            }

                            myChart.hideLoading();    //隐藏加载动画
                            myChart.setOption({        //加载数据图表
                               xAxis:{data: names},
                                series: [{ data: nums }]

                            });

                        }

                    },
                    error: function (errorMsg) {
                        //请求失败时执行该函数
                        alert("图表请求数据失败!");
                        myChart.hideLoading();
                    }
                })
            });

在ashx 部分就是简单了
随你是用DataTable 转为json 还是用 实体 还是多个实体 那就看你自己的造化了

  DataTable result= BLL.Department.GetDeptNumber();
  List<object> list = new List<object>();
            foreach (DataRow dr in result.Rows)
            {
                var obj = new { values = dr["number"], name = dr["D_Name"]};               
                list.Add(obj);               

            }           
            JavaScriptSerializer jss = new JavaScriptSerializer();
            string json = jss.Serialize(list);
            context.Response.Write(json);

附上运行结果吧：

做饼图时请注意 不要加上

 myChart.showLoading();    

这样会报组件加载异常的哟 还有解析values 时 官方给的是 数值类型的。