Echarts柱状图常用配置项

柱状图:

histogram={
    dataZoom:[ //用于区域缩放,从而能自由关注细节的数据信息,或者概览数据整体,或者去除离群点的影响
                type:'inside' //内置于坐标系中,使用户可以在坐标系上通过鼠标拖拽、鼠标滚轮、手指滑动(触屏上)来缩放或漫游坐标系
                     'slider' //有单独的滑动条,用户在滑动条上进行缩放或漫游
                     'select' //提供一个选框进行数据区域缩放。即 toolbox.feature.dataZoom,配置项在 toolbox 中。
             ],
            //dataZoom主要是对视图的操作,比如要拉动视图,鼠标滚动视图什么的,详情请看官网介绍
    title:{//柱状图title
                text:"柱状图title",
                textStyle:{
                                fontSize://title文字大小
                            },
                padding:[]//柱状图内边距
            },
    color://柱状图颜色,
    tooltip:{//提示框组件,即鼠标移动到指定位置会出现提示,类似img的alt属性
                trigger:'item' //数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用
                        'axis' //坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用
                         'none' //什么都不触发
                axisPointer:{//坐标轴指示器,显示当前鼠标移动的坐标
                                type:'shadow' //默认为直线,可选'line','shadow'
                            }
            },
    grid:{//视图x轴,y轴距离边界多远,就好像position的定位差不多
            left:'10%',坐标轴距离左边边界多远
            containLabel:true //只用当containLabel为true时,left才会生效
         },
    textStyle:{//全局的字体样式,注意区分title中的textStyle
                    ....
                },
    xAxis:[{
              type:'category',//类目轴,适用于离散的类目数据,为该类型时必须通过 data 设置类目数据---**此处使用category表示柱状图的x轴下坐标值**
                    'value' // 数值轴,适用于连续数据
                    'time' //时间轴,适用于连续的时序数据,与数值轴相比时间轴带有时间的格式化,在刻度计算上也有所不同,例如会根据跨度的范围来决定使用月,星期,日还是小时范围的刻度
                    'log' //对数轴。适用于对数数据
                data: [{
                        value: '周一',// 突出周一
                        textStyle: {
                                        fontSize: 20,
                                        color: 'red'
                                    }
                        }, '周二', '周三', '周四', '周五', '周六', '周日'],
                axisTick:{
                            show:true //是否显示坐标轴刻度,
                            alignWithLabel:true //类目轴中在 boundaryGap 为 true 的时候有效,可以保证刻度线和标签对齐
                        },
                axisLabel:{
                             show:true,//是否显示刻度标签
                             interval:0 //坐标轴刻度标签的显示间隔   0强制显示所有标签,1表示『隔一个标签显示一个标签』,如果值为 2,表示隔两个标签显示一个标签,以此类推
                             rotate:50 //x轴数据太多可以尝试旋转一定角度,不至于太难看
                                       //刻度标签旋转的角度,在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。旋转的角度从 -90 度到 90 度
                          }
          }]
    yAxis:[{ //与xAxis类似,表示在y轴显示,xAxis的type为category,所以yAxis的type应该为value
            type:'value'
          }],
    series:[{//图表类型,此配置项为重要配置项
                type:'bar',//表示柱状图,还有'line'折线图,'pie'饼状图,'Scatter'散点图,'GEO/Map'地理坐标/地图,'Candlestick'K线图,'Radar'雷达图,'Boxplot'盒须图,'Heatmap'热力图,'Graph'关系图,'Lines'路径图等等等
                name:'bar',//系列名称,用于tooltip的显示,legend 的图例筛选,在 setOption 更新数据和配置项时用于指定对应的系列
                barWidth:30,//状态图宽度
                data:[10, 20, 30, 40],//表示数据的数量,比如成绩90分的有10个人
                label:{//图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等
                            show:true,
                            position:'top'//显示的位置
                      }
           }]
}
原文地址:https://www.cnblogs.com/zzw-847776943/p/12531612.html