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