ECharts浮動柱狀圖

function cityTimeCount(){
    var myChartOne = echarts.init(document.getElementById('cityTimeCount'));
    optionOne = {
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 座標軸指示器,座標軸觸發有效
                type : 'line'        // 默認爲直線,可選爲:'line' | 'shadow'
            },
            formatter:function(p){
                var text = p[0].name+'<br>'+p[0].seriesName+':'+p[0].value+'人'+'&nbsp;&nbsp;&nbsp;'+'12:20'+'<br>'+p[1].seriesName+':'+p[1].value+'人'+'&nbsp;&nbsp;&nbsp;'+'12:20'+'<br>'+p[2].seriesName+':'+p[2].value+'人'+'&nbsp;&nbsp;&nbsp;'+'12:20'+'<br>'+'最大值'+':'+parseFloat(parseFloat(p[3].value)+parseFloat(p[1].value))+'人'+'&nbsp;&nbsp;&nbsp;'+'12:20'+'<br>';
                return text;
            },
        },
        legend: {
            selectedMode:false,
            textStyle:{color:'#92b1d8',},
            bottom: '2.2%',
            x:'center',
            data:[{name:'上網用戶波動值',icon:'stack'},'區域歷史峯值','平均值']         
        },
        grid: {
                top:'6%',
                left: '2%',
                right: '2%',
                bottom: '10%',
                containLabel: true
           },
        calculable : true,
        xAxis : [
            {
                axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#92b1d8'
                        },
                },
    
                data : ['上海','北京','廣州','天津','合肥','長沙','湖北','鄭州','深圳','遼寧','甘肅','長春']
            }
        ],
        yAxis : [
            {
                splitLine: {
                    lineStyle: {
                        // 使用深淺的間隔色
                        color: ['#393e4c']
                    }
                },
                type : 'value',
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#92b1d8'
                    },
                },
            }
        ],
        series : [
            {
                name:'區域歷史峯值',
                type:'line',
                step: 'middle',
                showSymbol: false,
                itemStyle:{                
                    normal:{
                        color:'#35a165',
                    },
                    emphasis:{
                        color:'#35a165'
                    },
                },
                data:[82.0, 44.9, 47.0, 63.2, 35.6, 56.7, 125.6, 162.2, 72.6, 60.0, 46.4, 43.3],
             
            },
            {
                    name:'最低值',  
                    barWidth:15,  
                    type:'bar',  
                    stack: '浮動',  
                    itemStyle:{  
                        normal:{  
                            barBorderColor:'rgba(0,0,0,0)',  
                            color:'rgba(0,0,0,0)'  
                        },  
                        emphasis:{  
                            barBorderColor:'rgba(0,0,0,0)',  
                            color:'rgba(0,0,0,0)'  
                        }  
                    },  
                   data:[12.6, 15.9, 19.0, 26.4, 28.7, 70.7, 35.6, 102.2, 48.7, 18.8, 16.0, 12.3],
                },
                {
                     name:'平均值',
                    type: 'graph',
                    layout: 'none',
                    coordinateSystem: 'cartesian2d',
                    symbolSize: 8,
                    label: {
                            normal: {
                              textStyle:{fontSize:'0'},
                            },
                    },
                    itemStyle:{  
                        normal:{  
                            barBorderColor:'#ff8000',  
                            color:'#ff8000'
                        },  
                        emphasis:{  
                            barBorderColor:'#ff8000',  
                            color:'#ff8000'  
                        }  
                    },
                    data: [70, 60, 39.0, 36.4, 40.7, 70, 115.6, 122.2, 68.7, 28.8, 40.0, 37.3],
               },
                   
                 {
                    z:2,
                    barMinHeight:2,
                    barWidth:15,
                    stack: '浮動',
                    name:'上網用戶波動值',
                    type:'bar',
                    data:[43,34,50,26,42,28,39,80,29,22,53,34],
                    itemStyle:{  
                        normal:{  
                            barBorderColor:'#366fb6',  
                            color:'#366fb6'  
                        },  
                        emphasis:{  
                            barBorderColor:'#366fb6',  
                            color:'#366fb6'  
                        }  
                    },
    
                 },
        ]
    };    
    myChartOne.setOption(optionOne);    

}


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章