Echarts是我们开发者绘制图表的利器，在我们入门Echarts的道路上，柱状图是新手必须掌握的，那么如何绘制柱状图呢，这里详细给大家讲解一下。


Echarts 3.19  vs2013  

ajax+ashx+json

[5,6,7,9,34]   数组类型

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

代码 -->

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

 <div>

按钮触发--%>

去吧 皮卡丘" />
      </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: {
异步数据加载示例' //图片标题                    },
                     tooltip: {},
                     legend: {
部门人口']  
                     },
                     xAxis: {
                         data: []
                     },
                     yAxis: {},
                     series: [{
                         name: '2015',
可以更改为 line（折线）
此处给空 后面用ajax给他赋值                    
                 });


ajax 部分了 ：


数据加载完之前先显示一段简单的loading动画


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

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

隐藏加载动画
加载数据图表                               xAxis:{data: names},
                                series: [{ data: nums }]

                            });

                        }

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


附上效果图吧：



option的设置是可以放在ajax里面的 一样会出效果 而且容易更看


$.ajax({

                type: "get",

异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）

                url: "../Handler/DepartmentHandler.ashx",   

没加条件

返回数据形式为json

success: function (result) {                  for (var i = 0; i < result.length; i++)
                     {
.name);                        
                    }
}, error: function (errorMsg) { //请求失败时执行该函数 alert("图表请求数据失败!"); } });


如果你是想学习这个 作为一个吃过亏的菜鸟告诉你 先还是好好看看 官方的例子 然后理清思路在下手

做到你自己脑子里面整个已经想清楚了 比如 需要的 格式、 这种类型的参数、 文件的版本、等等


option = {
     title: {
部门人口比例',
测试数据',
         x: 'center'
     },
     tooltip: {
         trigger: 'item',
         formatter: "{a} <br/>{b} : {c} ({d}%)"
     },
     legend: {
         orient: 'vertical',
         left: 'left',
         data:name
     },
     series: [
         {
年度',
             type: 'pie',
             radius: '55%',
             center: ['50%', '60%'],
             data: result,
             itemStyle: {
                 emphasis: {
                     shadowBlur: 10,
                     shadowOffsetX: 0,
                     shadowColor: 'rgba(0, 0, 0, 0.5)'
                 }
             }
         }
 };