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>