首页 前端知识 3、echarts配置项-xAxis

3、echarts配置项-xAxis

2024-06-18 22:06:44 前端知识 前端哥 328 938 我要收藏

直角坐标系 grid 中的 x 轴,一般情况下单个 grid 组件最多只能放上下两个 x 轴,多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠。

var option{
    xAxis:{
        id:'组件id',//组件 ID。默认不指定
        show:true/false,//是否显示 x 轴
        gridIndex:0,//x 轴所在的 grid 的索引,默认位于第一个 grid
        alignTicks:true/false,//在多个 x 轴为数值轴的时候,可以开启该配置项自动对齐刻度
        position:'top/bottom',//x 轴的位置
        offset:0,//X 轴相对于默认位置的偏移,在相同的position上有多个X轴的时候有用
        type:'value/category/time/log',//坐标轴类型。value:数值轴,适用于连续数据;category:类目轴,适用于离散的类目数据;time:时间轴,适用于连续的时序数据;log:对数轴。适用于对数数据
        name:'',//坐标轴名称
        nameLocation:'start/middle(center)/end',//坐标轴名称显示位置
        nameTextStyle{},//同legend配置项的textStyle
        nameGap:15,//坐标轴名称与轴线之间的距离
        nameRotate:0,//坐标轴名字旋转,角度值
        inverse:false,//是否是反向坐标轴
        boundaryGap:true,//坐标轴两边留白策略,类目轴和非类目轴的设置和表现不一样
        min:0,//坐标轴刻度最小值
        max:'dataMax',//坐标轴刻度最大值
        scale:false,//只在数值轴中(type: 'value')有效
        splitNumber:5,//坐标轴的分割段数
        minInterval:0,//自动计算的坐标轴最小间隔大小
        maxInterval:...,//自动计算的坐标轴最大间隔大小
        interval:...,//强制设置坐标轴分割间隔
        logBase:10,//对数轴的底数,只在对数轴中(type: 'log')有效
        silent:false,//坐标轴是否是静态无法交互
        triggerEvent:false,//坐标轴的标签是否响应和触发鼠标事件
        data:{
            value:...,//单个类目名称
            textStyle:{}
        },
        axisLine{
            show:true,//是否显示坐标轴轴线
            onZero:ture,//X 轴或者 Y 轴的轴线是否在另一个轴的0刻度上,只有在另一个轴为数值轴且包含0刻度时有效
            onZeroAxisIndex:...,//当有双轴时,可以用这个属性手动指定,在哪个轴的0刻度上
            symbol:'none/arrow',//轴线两边的箭头
            symbolSize:[10,15],//轴线两边的箭头的大小[宽度,高度]
            symbolOffset:[0,0]//轴线两边的箭头的偏移,如果是数组,第一个数字表示起始箭头的偏移,第二个数字表示末端箭头的偏移
        },
        axisTick:{
            show:true,//是否显示坐标轴刻度
            alignWithLabel:false,//类目轴中在 boundaryGap 为 true 的时候有效,可以保证刻度线和标签对齐
            interval:0/'auto',//坐标轴刻度的显示间隔,在类目轴中有效
            inside:false,//坐标轴刻度是否朝内,默认朝外
            length:5//坐标轴刻度的长度
        },
        lineStyle:{
            color:'#fff',//刻度线的颜色
            width:1,//坐标轴刻度线宽
            type:'solid/dashed/dotted/',//线的类型
            dasheOffset:0,//设置虚线的偏移量
            cap:'butt/round/square',//指定线段末端的绘制方式
            join:'bevel/round/miter',//设置2个长度不为0的相连部分如何连接在一起的属性
            miterLimit:10,//设置斜接面限制比例
            shadowBlur:0,//图形阴影的模糊大小
            shadowColor:'#fff',//阴影颜色
            shadowOffsetX:0,//阴影水平方向上的偏移距离
            shadowOffsetY:0,//阴影垂直方向上的偏移距离
            opacity:1//图形透明度
        },
        axisLabel:{
            show:true,//是否显示刻度标签
            interval:'auto'/0,//坐标轴刻度标签的显示间隔,在类目轴中有效
            inside:false,//刻度标签是否朝内,默认朝外
            rotate:0,//刻度标签旋转的角度
            margin:8,//刻度标签与轴线之间的距离
            hideOverlap:false,//是否隐藏重叠的标签
            color:'#fff'//刻度标签文字的颜色
        },
        splitLine:{
            show:true,//是否显示分隔线
            interval:'auto'//坐标轴分隔线的显示间隔
        },
    }
}

转载请注明出处或者链接地址:https://www.qianduange.cn//article/12650.html
标签
评论
发布的文章

@JsonSerialize注解的使用

2024-06-24 23:06:21

npm install报错

2024-06-24 23:06:56

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!