Echarts 坐标轴

1.坐标轴组件配置项总览

坐标轴分为x轴和y轴，操作这两个轴的字段分别为xAxis和yAxis

var option = {
    xAxis:{
        name:"月份",
        axisTick:{},//刻度
        axisLabel:{},//刻度值文本
        axisLine:{},//坐标轴线
        splitLine:{},//网格线 竖直方向
    },
    yAxis:{
        name:"销量",
        axisTick:{},//刻度
        axisLabel:{},//刻度值文本
        axisLine:{},//坐标轴线
        splitLine:{},//网格线 水平方向
    }
}

2.x轴数据

x轴数据由xAxis.data进行配置（y轴数据在series中进行配置）,至于数据类型，默认category，一般的折线图，直方图直接设置为category即可

xAxis:{
     data: ['x1', 'x2', 'x3', 'x4', 'x5', 'x6', 'x7', 'x8']
},

3.刻度 axisTick

设置刻度的配置项是axisTick，它是一个对象，通过配置其不同属性的值达到不同的效果

xAxis: {
    type: 'category',
                    
    //x轴刻度
    axisTick:{
        show:false, //隐藏X轴刻度
    },
    data: []
},

4.刻度值文本 axisLabel

设置刻度值配置项是axisLabel，它是一个对象，通过配置其不同属性的值达到不同的效果，常用的属性如下：
color:文本颜色
rotate:文本旋转角度(number类型，从 -90 度到 90 度)
formatter:刻度标签的内容格式器,可用于给值添加单位，例如 '{value} kg'

5.坐标轴线 axisLine

设置坐标轴线配置项是axisLine，它是一个对象，通过配置其不同属性的值达到不同的效果
x轴默认展示axisLine,y轴默认隐藏

yAxis:{
    axisLine:{
        show: true
    },//坐标轴线
}

6.网格线 splitLine

设置刻度值配置项是splitLine，它是一个对象，通过配置其不同属性的值达到不同的效果
水平方向的网络线在yAxis中设置，竖直方向的网格线在xAxis中设置
常用的属性如下：
show:是否显示网格线，水平方向默认展示，竖直方向默认隐藏
lineStyle：值为对象，线条所有的属性都封装在他里面
lineStyle.color：线条颜色，可以是单个颜色（表示所有的线条都使用这个颜色），也可以是一个数组（为不同线条设置不同的颜色）
lineStyle.width：线条宽度,值为数字

7.双Y轴

yAxis的值通常是一个对象，如果要配个双Y轴，可以将其配置成一个数组，每个数组元素就代表一个Y轴
一般来说，第一个轴在左边，第二个轴在右边
series中的数据通过 yAxisIndex 选定Y轴
双Y轴有各自的网格线（水平方向），这些网格线很难重合，网格线的数量和距离都是自适应的，一般不建议修改，如果要强制合并网格线，可以设定max和interval

yAxis: [{
    name: '销量',
    max:800,
    interval：800/5
},
{
    name: '完成率',
    max:70,
    interval：800/5
}]

8.坐标轴的数值范围

使用下面的两个属性分别设置坐标轴和最小值和最大值：
min:最小值，默认0
max:最大值，默认是series中data里面最大的那个数值（要保证是整十）。

yAxis:{
    max:100,
    min:0
}

PS：一般情况下，要保证Y轴上的数值在最大值和最小值的范围内。如果超出了这个范围，则超出部分会隐藏，不予显示。

还可以通过缩放来隐藏某些区间的数据（通常这些区间无数据展示）
只在数值轴中（type: 'value'）有效。
是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。
在设置 min 和 max 之后该配置项无效。

yAxis:{
    scale:true
}

9.设置留白 boundaryGap

在没有设置max的情况下，坐标轴最大值等于series中data里面最大的那个数值，如果想让坐标轴最大值稍大于data中的最大值，可以使用留白。
非类目轴（数值连续，折线，时间日期）boundaryGap：[0，0]，数值是百分比，第一个是最小值留白，第二个是最大值留白

yAxis: {
    boundaryGap:[0,'50%']
},

10.坐标轴名称

name:坐标轴名称
nameLocation：名称位置
nameTextStyle：文本样式
nameGap：坐标轴名称与轴线之间的距离
nameRotate：坐标轴名称与轴线之间的距离

 xAxis: {
    name:'月份',
    nameTextStyle:{
        color:'red',//红字
    },
    data: ["2020-06", "2020-07", "2020-08", "2020-09", "2020-10", "2020-11"]
},
yAxis: {
    name:'销量',
    nameTextStyle:{
         fontStyle:'italic',//斜体
    },
},

posted @ 2021-01-18 17:01 ---空白--- 阅读(3732) 评论(0) 编辑收藏举报

刷新页面返回顶部

---空白---