标签：color data 30 --- 柱状图 seriesDatas var type 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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。