Echarts柱状图案例

柱状图
数据通过对象从后台动态获取。

<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 1100px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        var option = {
            title: {                
                text: '订单柱状图'
            },  
            tooltip: {
                show: true              
            },
            dataZoom: [                       
                 {
                     type: 'inside',    //支持鼠标滚动缩放
                     start: 0,          //默认数据初始缩放范围为10%到90%
                     end: 100
                  }
              ],
            legend: {
                data:['订单数（个）']     //图例
            },
            toolbox: {
                show : true,
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    magicType : {show: true, type: ['line', 'bar']},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },           
            xAxis : [
                {                   
                    type : 'category',
                    data : ["采购单数","线下订单数","C端社区订单数","C端全网订单数","退货订单数"]
                }
            ],
            yAxis : [
                {   
                    name:'订单数                       ',      //Y轴提示
                    type : 'value',                    
                    //min: 0,
                    //max: 30,
                    interval: 1,   //Y轴数据跨度
             //下面是显示格式化，一般来说还是用的上的
                    axisLabel: {
                        formatter: '{value} 个'    //Y轴单位
                    }
                }
            ],
            series : [
                {
                 "name":"社区店订单数",
                 "type":"bar",
                 "barWidth":"70",      //柱子宽度
                 "data":[${orderCount.commCaiOrderCounts}, ${orderCount.commXianXiaOrderCounts}, ${orderCount.cCommOrderCounts}, ${orderCount.cCityOrderCounts},${orderCount.cZongTuiOrderCounts}],                 
                 itemStyle:{
                     normal:{
                         color: function(params) {
                             // build a color map as your need.
                             var colorList = [
                               '#228B22','#008B00','#00CD00','#00CD66','#32CD32','#7CCD7C','#9ACD32'
                             ];
                             return colorList[params.dataIndex]
                         },
                       //以下为柱状图顶部是否显示，显示位置和显示格式的设置了
                         label: {
                             show: true,
                             position: 'top',
                             formatter: '{b}\n{c}（个）'
                         }
                      }
                   }
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>