详解Echarts 绘制柱状图

Echarts是我们开发者绘制图表的利器，在我们入门Echarts的道路上，柱状图是新手必须掌握的，那么如何绘制柱状图呢，这里详细给大家讲解一下。 环境：Echarts 3.19  vs2013   实现方式：ajax+ashx+json 注意事项： 官网所需格式为：[5,6,7,9,34]   数组类型 具体代码，各位看官 请下移目光。 <!--js代码 --> <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.name);    //挨个取出类别并填入类别数组                            }                             for (var i = 0; i < result.length; i++) {                                 nums.push(result.values);    //挨个取出销量并填入销量数组                            }                             myChart.hideLoading();    //隐藏加载动画                             myChart.setOption({        //加载数据图表                               xAxis:{data: names},                                 series: [{ data: nums }]                             });                         }                     },                     error: function (errorMsg) {                         //请求失败时执行该函数                         alert("图表请求数据失败!");                         myChart.hideLoading();                     }                 })             }); 附上效果图吧： 　其实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.name);                                             } option = {     title: {         text: '部门人口比例',         subtext: '测试数据',         x: 'center'     },     tooltip: {         trigger: 'item',         formatter: "{a} <br/>{b} : {c} ({d}%)"     },     legend: {         orient: 'vertical',         left: 'left',         data:name     },     series: [         {             name: '2012年度',             type: 'pie',             radius: '55%',             center: ['50%', '60%'],             data: result,             itemStyle: {                 emphasis: {                     shadowBlur: 10,                     shadowOffsetX: 0,                     shadowColor: 'rgba(0, 0, 0, 0.5)'                 }             }         } }; }, error: function (errorMsg) { //请求失败时执行该函数 alert("图表请求数据失败!"); } }); 如果你是想学习这个 作为一个吃过亏的菜鸟告诉你 先还是好好看看 官方的例子 然后理清思路在下手 做到你自己脑子里面整个已经想清楚了 比如 需要的 格式、 这种类型的参数、 文件的版本、等等 文章来自：博客园/严芷云