浅谈 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>

js

 

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);