zoukankan      html  css  js  c++  java
  • 浅谈 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("
    ");} // 设置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);
    
    
    
  • 相关阅读:
    [习题]输入自己的生日(年/月/日)#2 -- 日历(Calendar)控件的时光跳跃,一次跳回五年、十年前?--TodaysDate属性、VisibleDate属性
    Interesting effects
    kendoGrid methods方法
    kendoListBox 选择控件
    kendo format
    kendoGrid Event事件
    kendoGrid的一些基础配置
    kendoGrid edit功能
    kendoDatePicker日期选择控件
    Json与DataSet转化
  • 原文地址:https://www.cnblogs.com/liziyou/p/6408953.html
Copyright © 2011-2022 走看看