echarts柱状图---多维柱状图

 

<script type="text/javascript" src="../js/jquery-2.1.1.js"></script>
<script type="text/javascript" src="../echarts4.2.0/echarts.min.js"></script>

引入js

 

<div id="manyBar" style="width: 600px;height: 325px;">
</div>

确定容器

 

注：js中字体用了白色。如果你的背景是白色的话，看不到文字

/**
 * 画多维柱状图
 * @param container 容器
 * @param titleName 标题名称
 * @param legendData 菜单列表
 * @param xData x轴数据
 * @param seriesDatas 多维图表数据
 */
function drawManyBar(container, titleName, legendData, xData, seriesDatas) {
    var ticket = echarts.init(document.getElementById(container));
    ticketOption = {
        //标题样式
        title : {
            text : titleName,
            textStyle : {
                color : 'white',
            },
            left : 'left'
        },
        //提示框
        tooltip : {
            trigger : 'axis',
            backgroundColor : 'gray',
            axisPointer : {
                type : 'shadow'
            },
            //提示信息格式，支持html样式
            formatter : function(params) {
                var res = '<div style="color:#00C7FF">';
                res += '<strong>' + params[0].name + '（万元）</strong>';
                for ( var i = 0, l = params.length; i < l; i++) {
                    res += '<br/>' + ((i == 4) ? '&nbsp;&nbsp;' : '')
                            + params[i].seriesName + ' : '
                            + params[i].value;
                }
                res += '</div>';
                return res;
            }
        },
        //菜单
        legend : {
            //菜单字体样式
            textStyle : {
                color : 'white'
            },
            //菜单位置
            x : 'right',
            //菜单数据
            data : legendData
        },
 
        xAxis : [ {
            type : 'category',
            axisLine : {
                show : true,
                //x轴线样式
                lineStyle : {
                    color : '#17273B',
                    width : 1,
                    type : 'solid',
                }
            },
            //x轴字体设置
            axisLabel : {
                show : true,
                fontSize : 12,
                color : 'white'
            },
            data : xData
        } ],
        yAxis : [ {
            type : 'value',
            //y轴字体设置
            axisLabel : {
                show : true,
                color : 'white',
                fontSize : 12,
                formatter : function(value) {
                    return value + '万';
                }
            },
            //y轴线设置不显示
            axisLine : {
                show : false
            },
            //与x轴平行的线样式
            splitLine : {
                show : true,
                lineStyle : {
                    color : '#17273B',
                    width : 1,
                    type : 'dashd',
                }
            }
        } ],
        series : [ {
            name : '5A',
            type : 'bar',
            //柱子宽度
            barWidth : 8,
            //柱状图样式
            itemStyle : {
                color : 'red',
                barBorderRadius : [ 30, 30, 0, 0 ]
            },
            data : seriesDatas[0]
        }, {
            name : '4A',
            type : 'bar',
            barWidth : 8,
            itemStyle : {
                color : 'orange',
                barBorderRadius : [ 30, 30, 0, 0 ]
            },
            data : seriesDatas[1]
        }, {
            name : '3A',
            type : 'bar',
            barWidth : 8,
            itemStyle : {
                color : 'yellow',
                barBorderRadius : [ 30, 30, 0, 0 ]
            },
            data : seriesDatas[2]
        }, {
            name : '2A',
            type : 'bar',
            barWidth : 8,
            itemStyle : {
                color : 'green',
                barBorderRadius : [ 30, 30, 0, 0 ]
            },
            data : seriesDatas[3]
        }, {
            name : 'A',
            type : 'bar',
            barWidth : 8,
            itemStyle : {
                color : 'blue',
                barBorderRadius : [ 30, 30, 0, 0 ]
            },
            data : seriesDatas[4]
        } ]
    };
    ticket.setOption(ticketOption);
}

js方法

 

var titleName = '景区门票收入走势';
var legendData = [ '5A', '4A', '3A', '2A', 'A' ];
var xData = [ '一季度', '二季度', '三季度', '四季度' ];
var seriesDatas = [[ 83, 56, 77, 99 ], [ 62, 55, 67, 82 ], [ 71, 45, 62, 79 ], [ 78, 40, 58, 77 ], [ 76, 33, 52, 67 ]];
drawManyBar('manyBar', titleName, legendData, xData, seriesDatas);

js调用（写死参数）

 

预览

 

 

摘自：

https://blog.csdn.net/kzhzhang/article/details/124674343

 

标签：color,data,30,---,柱状图,seriesDatas,var,type,echarts
来源： https://www.cnblogs.com/rdchen/p/16575910.html