ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

柱状图详情配置

2022-05-18 16:04:00  阅读:162  来源: 互联网

标签:bar name show type 配置 data 柱状图 详情 true


标准柱状图

 

var option = {
            title: { //设置标题
                text: '主标题',
                subtext: '副标题',
            },
            legend: {//设置图例
                type:'',//scroll设置为滚动图例,默认为plain
                orient: 'horizontal',//图例对齐方式为水平对齐,垂直对其:'vertical'
                data: []
            },
            tooltip: {//提示框组件
                trigger: 'axis',//设置提示框触发方式。'item',移动到数值上才会触发。'axis',移动到数值附近后自动提示并且有条贯穿数值的竖线
                formatter: "{a}<br/>{b}:{c}"//提示框显示内容
            },
            toolbox: {//工具箱
                feature: {
                    saveAsImage: {},//保存图片
                    restore: {},//配置还原
                    dataView: {},//数据视图
                    magicType: {//数据类型切换
                        type: ['line', 'bar', 'stack']
                    }

                }
            },
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    type: 'bar',
                    data: [150, 120, 250, 100, 70, 110, 130],
                }
            ]
        };

 

 

绘制堆积柱状图

 

 使用stack配置项把数值设置成一样的内容让'谷歌','必应','其他'三个柱状图堆积起来

 

var option = {
            tooltip:{
                trigger:"axis",
                // axisPointer:{
                //     type:'shadow'
                // },
            },
            legend:{
                data:['直接访问','搜索引擎','百度','谷歌','必应','其他']
            },
            toolbox:{
                show:true,
                orient:'vertical',
                x:'right',
                y:'center',
                feature:{
                    mark:{show:true},      
                    dataView:{show:true,readOnly:false},
                    magicType:{
                        show:true,
                        type:["bar","line","stack",'tiled']  
                    },
                    restore:{show:true},
                    saveAsImage:{show:true},
                }
            },
            calculable:true,
            xAxis:[
                {
                    type:"category",
                    data:['周一','周二','周三','周四','周五','周六','周日']
                }
            ],
            yAxis:[
                {
                    type:"value"
                }
            ],
            series:[
                {
                    name:'直接访问',
                    type:'bar',
                    data:[320,332,301,334,390,330,320]
                },

                {
                    name:'搜索引擎',
                    type:'bar',
                    data:[862,1018,964,1026,1679,1600,1570],
                    markLine:{  //从最小值到最大值用线连接起来
                        itemStyle:{
                            normal:{
                                lineStyle:{
                                    type:'dashed'
                                }
                            }
                        },
                        data:[
                            [
                                {type:'min'},
                                {type:'max'}
                        ]
                        ]
                    },

                },
                {
                    name:'百度',
                    type:'bar',
                    data:[620,732,701,734,1090,1130,1120]
                },
                {
                    name:'谷歌',
                    type:'bar',
                    stack:'搜索引擎',
                    data:[120,132,101,134,290,230,220]
                },
                {
                    name:'必应',
                    type:'bar',
                    stack:'搜索引擎',
                    data:[60,72,71,74,190,130,110]
                },
                {
                    name:'其他',
                    type:'bar',
                    stack:'搜索引擎',
                    data:[62,82,91,84,109,110,120]
                },       
            ]
        }

 

 

 

 

绘制条形图

 

条形图和柱状图一样的配置只不过xAxis和yAxis里面的内容相互互换了一下 

 

var mychart = echarts.init(document.getElementById("main"))
        var option = {
            title:{
                text:'世界人口总量',
                subtext:'数据来自网络',
            },
            tooltip:{
                trigger:"axis",
            },
            legend:{
                data:['2011年','2012年'],
            },
            toolbox:{
                show:true,
                feature:{
                    mark:{show:true},      
                    dataView:{show:true,readOnly:false},
                    magicType:{
                        show:true,
                        type:["line","bar"]  
                    },
                    restore:{show:true},
                    saveAsImage:{show:true},
                },
            },
            calculable:true,
            xAxis:[
                {
                    type:"value",
                    boundaryGap:[0,0.01],
                },
            ],
            yAxis:[
                {
                    type:"category",
                    data:['A国','B国','C国','D国','E国','世界人口(万)'],
                },
            ],
            series:[
                {
                    name:'2011年',
                    type:'bar',
                    data:[18203,23489,29034,104970,131744,630230],
                },
                {
                    name:'2012年',
                    type:'bar',
                    data:[19325,23438,31000,121594,134141,681807],
                },
            ]
        };

 

 

 

绘制瀑布图

 要想形成瀑布效果需要用到stack配置项,通过堆叠数值实现从上往下的瀑布效果,再把设置数值的柱子给透明化这样效果就出来了

 

      var option = {
            title:{
                text:'深圳月底最低生活费组成(单位:元)',
                subtext:'数据来自ExcelHome  ',
            },
            tooltip:{
                trigger:"axis",
                axisPointer:{
                    typr:'shadow'
                },
                formatter:function(params){
                    var tar = params[0];
                    return tar.name + '<br/>' +tar.seriesName+':'+tar.value;
                }
            },
            toolbox:{
                show:true,
                feature:{
                    mark:{show:true},      
                    dataView:{show:true,readOnly:false},
                    restore:{show:true},
                    saveAsImage:{show:true},
                },
            },
            xAxis:[
                {
                    type:'category',
                    splitLine:{show:false},
                    data:['总费用','房租','水电费','交通费','伙食费','日用品费用'],
                },
            ],
            yAxis:[
                {
                    type:"value",
                },
            ],
            series:[
                {
                    name:'辅助',
                    type:'bar',
                    stack:'总量',
                    itemStyle:{
                        normal:{//设置柱子的样式
                            barBorderColor:'rgba(0,0,0,0)',//设置柱子边框颜色
                            //barBorderColor:'rgba(20,20,0,0.5)',
                            barBorederWidth:5,//设置柱子边框宽度
                            color:'rgba(0,0,0,0)',//设置柱子颜色
                            //color:'rgba(0,220,0,0.8)',
                        },
                        emphasis:{//设置鼠标划过时柱子的样式
                            barBorderColor:'rgba(0,0,0,0)',
                            barBorderWidth:25,
                            color:'rgba(0,0,0,0)'
                        }
                    },
                    data:[0,1700,1400,1200,300,0],
                },
                {
                    name:'生活费',
                    type:'bar',
                    stack:'总量',
                    itemStyle:{
                        normal:{
                            label:{
                                show:true,
                                position:'inside'
                            }
                        }
                    },
                    data:[2900,1200,300,200,900,300],
                },
            ]
        };

 

 

 

标签:bar,name,show,type,配置,data,柱状图,详情,true
来源: https://www.cnblogs.com/lixianhui/p/16284995.html

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

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有