首页 > 程序开发 > web前端 > JavaScript >

ECharts浮动柱状图

2017-01-10

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+&#39;<br>&#39;+p[0].seriesName+&#39;:&#39;+p[0].value+&#39;人&#39;+&#39;&nbsp;&nbsp;&nbsp;&#39;+&#39;12:20&#39;+&#39;<br>&#39;+p[1].seriesName+&#39;:&#39;+p[1].value+&#39;人&#39;+&#39;&nbsp;&nbsp;&nbsp;&#39;+&#39;12:20&#39;+&#39;<br>&#39;+p[2].seriesName+&#39;:&#39;+p[2].value+&#39;人&#39;+&#39;&nbsp;&nbsp;&nbsp;&#39;+&#39;12:20&#39;+&#39;<br>&#39;+&#39;最大值&#39;+&#39;:&#39;+parseFloat(parseFloat(p[3].value)+parseFloat(p[1].value))+&#39;人&#39;+&#39;&nbsp;&nbsp;&nbsp;&#39;+&#39;12:20&#39;+&#39;<br>&#39;;
                return text;
            },
        },
        legend: {
            selectedMode:false,
            textStyle:{color:&#39;#92b1d8&#39;,},
            bottom: &#39;2.2%&#39;,
            x:&#39;center&#39;,
            data:[{name:&#39;上网用户波动值&#39;,icon:&#39;stack&#39;},&#39;区域历史峰值&#39;,&#39;平均值&#39;]         
        },
        grid: {
                top:&#39;6%&#39;,
                left: &#39;2%&#39;,
                right: &#39;2%&#39;,
                bottom: &#39;10%&#39;,
                containLabel: true
           },
        calculable : true,
        xAxis : [
            {
                axisLabel: {
                        show: true,
                        textStyle: {
                            color: &#39;#92b1d8&#39;
                        },
                },
    
                data : [&#39;上海&#39;,&#39;北京&#39;,&#39;广州&#39;,&#39;天津&#39;,&#39;合肥&#39;,&#39;长沙&#39;,&#39;湖北&#39;,&#39;郑州&#39;,&#39;深圳&#39;,&#39;辽宁&#39;,&#39;甘肃&#39;,&#39;长春&#39;]
            }
        ],
        yAxis : [
            {
                splitLine: {
                    lineStyle: {
                        // 使用深浅的间隔色
                        color: [&#39;#393e4c&#39;]
                    }
                },
                type : &#39;value&#39;,
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: &#39;#92b1d8&#39;
                    },
                },
            }
        ],
        series : [
            {
                name:&#39;区域历史峰值&#39;,
                type:&#39;line&#39;,
                step: &#39;middle&#39;,
                showSymbol: false,
                itemStyle:{                
                    normal:{
                        color:&#39;#35a165&#39;,
                    },
                    emphasis:{
                        color:&#39;#35a165&#39;
                    },
                },
                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:&#39;最低值&#39;,  
                    barWidth:15,  
                    type:&#39;bar&#39;,  
                    stack: &#39;浮动&#39;,  
                    itemStyle:{  
                        normal:{  
                            barBorderColor:&#39;rgba(0,0,0,0)&#39;,  
                            color:&#39;rgba(0,0,0,0)&#39;  
                        },  
                        emphasis:{  
                            barBorderColor:&#39;rgba(0,0,0,0)&#39;,  
                            color:&#39;rgba(0,0,0,0)&#39;  
                        }  
                    },  
                   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:&#39;平均值&#39;,
                    type: &#39;graph&#39;,
                    layout: &#39;none&#39;,
                    coordinateSystem: &#39;cartesian2d&#39;,
                    symbolSize: 8,
                    label: {
                            normal: {
                              textStyle:{fontSize:&#39;0&#39;},
                            },
                    },
                    itemStyle:{  
                        normal:{  
                            barBorderColor:&#39;#ff8000&#39;,  
                            color:&#39;#ff8000&#39; 
                        },  
                        emphasis:{  
                            barBorderColor:&#39;#ff8000&#39;,  
                            color:&#39;#ff8000&#39;  
                        }  
                    },
                    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: &#39;浮动&#39;,
                    name:&#39;上网用户波动值&#39;,
                    type:&#39;bar&#39;,
                    data:[43,34,50,26,42,28,39,80,29,22,53,34],
                    itemStyle:{  
                        normal:{  
                            barBorderColor:&#39;#366fb6&#39;,  
                            color:&#39;#366fb6&#39;  
                        },  
                        emphasis:{  
                            barBorderColor:&#39;#366fb6&#39;,  
                            color:&#39;#366fb6&#39;  
                        }  
                    }, 
    
                 },
        ]
    };    
    myChartOne.setOption(optionOne);    
}
\
相关文章
最新文章
热点推荐