浅谈 echarts 用法

对于服务型的公司来说，需要了解用户的使用趋势，来帮助分析市场的走向，所以说统计在一个管理后台中是必不可少的。

会用到echarts插件，其官网网址 http://echarts.baidu.com/

比如我想了解一段时间内所有停车场对于使用某一个功能的使用量，如做到下图的效果

要引入的文件

<script type="text/javascript" src="/../js/echarts.min.js"></script>

前端页面

<div id="totalPicture" class="col-sm-8"  style="height: 600px;"></div>

var list = {

    name : [],

    count : []

};

for(var i = 0; i< data.data.length; i++) {

    var item = data.data[i];

    list.name.push(item._id); //后台得到的数据 push到自己定义的数组中去

    list.count.push(item.count);

}

var statisticsEcharts = echarts.init(document.getElementById("totalPicture"));  //渲染到前端页面id为totalPicture

//指定图表的配置项和数据

var option = {

    title: {

        text: $scope.StartDate+'～'+$scope.EndDate+'时间内各停车场月卡续费总数统计图',  //设置统计图的名称

        x:'center'

    },

    tooltip : {

        trigger: 'axis',

        axisPointer : {

            type : 'line'

        }

    },

    grid: {

        left: '3%',

        right: '4%',

        bottom: '3%',

        containLabel: true

    },

    toolbox: {

        feature: {

            saveAsImage: {}  //设置是否下载图片

        }

    },

    xAxis: {

        type : 'category',

        name:'名称',  //设置X轴的名称

        axisLine: {

            lineStyle: { color: 'blue' }

        },

        splitLine: {

            lineStyle: {

                opacity: 0.45

            }

        },

        axisTick: {

            show: false

        },

        data : list.name,

        axisLabel:{

            formatter:function(val){return val.split("").join("\n");} // 设置X轴坐标名称的方向（纵向）

        }

    },

    yAxis: {

        name:'使用量',//设置y轴的名称

        axisLine: {

            lineStyle: { color: 'blue' } //设置y的颜色

        }

    },

    series: [

        {

            name: '使用量',

            type: 'bar',

            stack: '总量',

            label: {

                normal: {

                    show: true,

                    position: 'top'

                }

            },

            data:list.count

        }

    ]

};

statisticsEcharts.setOption(option);

巴特西

浅谈 echarts 用法

最新文章

热门文章