echars

/**
 * 充电卡统计分析
 * */
htmlObj.getCarNumberInfo = function(){
    var myChartCount = echarts.init(document.getElementById('count'));

    var option = {
        title: {
            //text: '堆叠区域图',
            subtext:'数量（个）'
        },
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:['近一周充电卡新增数量']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'category',
                boundaryGap : false,
                splitLine:false,
                axisTick:false,
                axisLine:{//坐标轴轴线相关设置。
                    lineStyle:{
                        color:'#ccc',
                        width:'1'
                    }
                },
                data : ['周一','周二','周三','周四','周五','周六','周日']
            }
        ],
        yAxis : [
            {
                type : 'value',
                splitLine:false,
                axisTick:false,
                axisLine:{
                    lineStyle:{
                        color:'#ccc',
                        width:'2'
                    }
                }
            }
        ],
        series : [
            {
                name:'近一周充电卡新增数量',//用于tooltip的显示
                type:'line',
                smooth:'true',//平滑过渡
                label: {
                    normal: {
                        show: true,
                        position: 'top'
                    }
                },
                itemStyle:{//折线拐点标志的样式。
                    normal:{
                        borderColor:'#B38FFB',//圆圈表框颜色
                        borderWidth:'2'
                        //color:"#000"
                    },
                    emphasis:{//获取焦点时数据圆圈颜色
                        color: '#9669F8',
                        borderColor:'#FDFEFF',
                        borderWidth:'3'
                    }
                },
                lineStyle:{//线条样式
                    normal:{
                        width:'0'
                    }
                },
                areaStyle: {//区域填充样式。
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{//填充的颜色
                            offset: 0, color: '#9967FF' // 0% 处的颜色
                        }, {
                            offset: 1, color: '#B4C7FF' // 100% 处的颜色
                        }], false)
                    }
                },
                data:[53, 36, 59, 71, 56, 84, 42]
            }
        ]
    };

    myChartCount.setOption(option);
};

/**
 * 充电金额
 * */
htmlObj.getCarMoneyInfo = function(){
    var myChartCount = echarts.init(document.getElementById('menoy'));

    var option = {
        title: {
            //text: '堆叠区域图',
            subtext:'数量（个）'
        },
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:['近一周充电卡充值金额']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'category',
                boundaryGap : false,
                splitLine:false,
                axisTick:false,
                axisLine:{//坐标轴轴线相关设置。
                    lineStyle:{
                        color:'#ccc',
                        width:'1'
                    }
                },
                data : ['周一','周二','周三','周四','周五','周六','周日']
            }
        ],
        yAxis : [
            {
                type : 'value',
                splitLine:false,
                axisTick:false,
                axisLine:{
                    lineStyle:{
                        color:'#ccc',
                        width:'2'
                    }
                }
            }
        ],
        series : [
            {
                name:'近一周充电卡充值金额',//用于tooltip的显示
                type:'line',
                //animationDuration:'2000',//动画时间
                smooth:'true',//平滑过渡
                label: {
                    normal: {
                        show: true,
                        position: 'top'
                    }
                },
                itemStyle:{//折线拐点标志的样式。
                    normal:{
                        borderColor:'#FE7600',//圆圈表框颜色
                        borderWidth:'2'
                        //color:"#000"
                    },
                    emphasis:{//获取焦点时数据圆圈颜色
                        color: '#FE7600',
                        borderColor:'#FDFEFF',
                        borderWidth:'3'
                    }
                },
                lineStyle:{//线条样式
                    normal:{
                        width:'0'
                    }
                },
                areaStyle: {//区域填充样式。
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{//填充的颜色
                            offset: 0, color: '#FF7803' // 0% 处的颜色
                        }, {
                            offset: 1, color: '#F6B98C' // 100% 处的颜色
                        }], false)
                    }
                },
                data:[530, 360, 590, 710, 560, 804, 420]
            }
        ]
    };

    myChartCount.setOption(option);
};

/**
 * 充电卡消费
 * */
htmlObj.getCarConsumptionInfo = function(){
    var myChartCount = echarts.init(document.getElementById('consumption'));

    option = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            //data:['次数','金额']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                splitLine:false,
                axisTick:false,
                axisLine:{//坐标轴轴线相关设置。
                    lineStyle:{
                        color:'#ccc',
                        width:'1'
                    }
                },
                data: ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30']
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '次数（次）',
                splitLine:false,
                axisTick:false,
                axisLabel: {
                    formatter: '{value}'
                },
                axisLine:{//坐标轴轴线相关设置。
                    lineStyle:{
                        color:'#ccc',
                        width:'1'
                    }
                }
            },
            {
                type: 'value',
                name: '金额（元）',
                splitLine:false,
                axisTick:false,
                axisLabel: {
                    formatter: '{value}'
                },
                axisLine:{//坐标轴轴线相关设置。
                    lineStyle:{
                        color:'#ccc',
                        width:'1'
                    }
                }
            }
        ],
        series: [
            {
                name:'充电次数',
                type:'bar',
                itemStyle:{
                    normal:{
                        color:'#667CF3'
                    },
                    emphasis:{
                        color:'#ACBBFF'
                    }
                },
                //animationDuration:'2000',//动画时间
                data:[499, 7, 23, 25, 76, 1305, 162, 302, 2990, 688, 3, 25, 796, 135, 1602, 32, 2880, 690, 367, 200, 65, 3, 265, 766, 1365, 1662, 362, 260, 886, 73]
            },
            {
                name:'充电收费',
                type:'line',
                animationDuration:'2000',//动画时间
                smooth:'true',//平滑过渡
                yAxisIndex: 1,
                lineStyle:{//线条样式
                    normal:{
                        width:'2',
                        color:'#48E179'
                    }
                },
                itemStyle:{//折线拐点标志的样式。
                    normal:{
                        borderColor:'#48E179',//圆圈表框颜色
                        borderWidth:'2'
                    },
                    emphasis:{//获取焦点时数据圆圈颜色
                        color: '#48E179',
                        borderColor:'#FDFEFF',
                        borderWidth:'3'
                    }
                },
                data:[4000, 70, 230, 250, 760, 1350, 1620, 320, 200, 60, 30, 25, 760, 1350, 1602, 302, 920, 6, 389, 290, 6, 376, 235, 756, 135, 1672, 392, 240, 644, 366]
            }
        ]
    };

    myChartCount.setOption(option);
};