echarts图表x,y轴的设置

xAxis属性代表echarts图表的x轴设置代码如下

xAxis : [
    {
      type : 'category',   
     // type:坐标轴类型。
     // [ default: 'category' ]
     /*可选:
     1.'value' 数值轴,适用于连续数据;
     2.'category' 类目轴,适用于离散的类目数据,为该类型时必须通过 data 设置类目数据; 
     3.'time' 时间轴,适用于连续的时序数据,与数值轴相比时间轴带有时间的格式化,在刻度计算上也有所不同,例如会根据跨度的范围来决定使用月,星期,日还是小时范围的刻度;
     4.'log' 对数轴。适用于对数数据。*/
    data : ['上海','北京'], //x轴下面的数据
    axisTick: {
        show: false,  //是否显示网状线 默认为true
        alignWithLabel: true
    },
       //用于设置x下面的字体
    axisLabel:{
            show:true,  //这里的show用于设置是否显示x轴下的字体 默认为true
       interval:0,  //可以设置成 0 强制显示所有标签。如果设置为 1,表示『隔一个标签显示一个标签』,如果值为 2,表示隔两个标签显示一个标签,以此类推。
  
       textStyle:{   //textStyle里面写x轴下的字体的样式
               color:'#333',
               fontSize:13
            }
       },
    axisLine:{
           show:true,  //这里的show用于设置是否显示x轴那一条线 默认为true
           lineStyle:{ //lineStyle里面写x轴那一条线的样式
             color:'#6FC6F3',
             width:2,    //轴线的粗细 我写的是2 最小为0,值为0的时候线隐藏
           }
       }
    },
]

yAxis属性代表echarts图表的y轴,样式设置方式与x轴的方式是一样,就是设置的属性会有所差异

yAxis:[{
    min:0, //y轴的最小值
    max:100, //y轴最大值 
    interval:20, //值之间的间隔
    //上面的三个值可以根据自己需求随意设置 不设置时会根据图中的值自动生成相应的值
   
   type:'value',
  /* type坐标轴类型:[ default: 'value' ]
    可选:1.'value' 数值轴,适用于连续数据。
    2.'category' 类目轴,适用于离散的类目数据,为该类型时必须通过 data 设置类目数据。
       3.'time' 时间轴,适用于连续的时序数据,与数值轴相比时间轴带有时间的格式化,在刻度计算上也有所不同,例如会根据跨度的范围来决定使用月,星期,日还是小时范围的刻度。
       4.'log' 对数轴。适用于对数数据。*/
    splitLine:{show:false}, //去除网状线 默认为true
    //用于设置y轴的字体
    axisLabel:{
            show:true,  //这里的show用于设置是否显示y轴下的字体 默认为true
            textStyle:{   //textStyle里面写y轴下的字体的样式
               color:'#333',
               fontSize:13
            }
       },
     //用于设置y轴的那一条线
    axisLine:{
           show:true,  //这里的show用于设置是否显示y轴那一条线 默认为true
           lineStyle:{ //lineStyle里面写y轴那一条线的样式
             color:'#6FC6F3',
             width:2,    //轴线的粗细 我写的是2 最小为0,值为0的时候线隐藏
           }
       }
}]
  • 8
    点赞
  • 56
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
当我们使用ECharts制作图表时,Y轴数值通常是图表的核心部分,因为它们描述了数据的大小和变化。要设置Y轴的值,我们可以通过以下步骤进行操作。 首先,我们需要创建一个基础的ECharts图表实例,并设置一个X轴和一个Y轴。可以使用如下代码初始化一个基础的ECharts图表: ```javascript var myChart = echarts.init(document.getElementById('main')); var option = { xAxis: {}, yAxis: {} }; myChart.setOption(option); ``` 在这个例子中,我们创建了一个ECharts实例,并将其绑定到一个名为“main”的DOM元素上。” 然后,我们需要设置Y轴的最小值和最大值。要实现这一点,我们可以在Y轴的选项中添加“min”和“max”属性。例如,将Y轴最小值设置为0,最大值设置为100: ```javascript var option = { xAxis: {}, yAxis: { min: 0, max: 100 } }; myChart.setOption(option); ``` 我们可以使用其他属性来改变Y轴的外观和行为,例如设置刻度线的数量、更改轴线的颜色等等。此外,我们还可以将Y轴标签设置为特定格式的数字或字符串。此处提供的只是最基础的设置方法,更多高级的设置可以在ECharts官方文档中找到。 总之,在ECharts设置Y轴数值需要经过多个步骤。首先,我们需要初始化一个基础的ECharts图表实例,然后设置Y轴的最小和最大值,以及其他属性和标签。这样,我们就可以创建具有定制化Y轴数值的图表了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值