UDN-企业互联网技术人气社区

板块导航

浏览  : 63382
回复  : 0

[文档] ECharts图表组件初级入门教程之splitNumber:如何设置Y轴刻度...

[复制链接]
刘莉莉11的头像 楼主
  [摘要]: echarts图表的y轴刻度分段默认为5,因为yAxis的splitNumber默认为5。 {number}splitNumber 5 分割段数,默认为5,为0时为线性渐变,calculable为true是默认均分100份 那么我们如何自己进行多个分段呢?让其出现小数或者让其刻度间隔变得更细更小呢? option = { title : { text: '未来一周气温变化', subtext: '纯属虚构' }, tooltip : { trigger: 'axis' }, le...

     echarts图表的y轴刻度分段默认为5,因为yAxis的splitNumber默认为5。
QQ截图20150813170439.png

  那么我们如何自己进行多个分段呢?让其出现小数或者让其刻度间隔变得更细更小呢?
  1. option = {
  2.     title : {
  3.         text: '未来一周气温变化',
  4.         subtext: '纯属虚构'
  5.     },
  6.     tooltip : {
  7.         trigger: 'axis'
  8.     },
  9.     legend: {
  10.         data:['最高气温','最低气温']
  11.     },
  12.     toolbox: {
  13.         show : true,
  14.         feature : {
  15.             mark : {show: true},
  16.             dataView : {show: true, readOnly: false},
  17.             magicType : {show: true, type: ['line', 'bar']},
  18.             restore : {show: true},
  19.             saveAsImage : {show: true}
  20.         }
  21.     },
  22.     calculable : true,
  23.     xAxis : [
  24.         {
  25.             type : 'category',
  26.             boundaryGap : false,
  27.             data : ['周一','周二','周三','周四','周五','周六','周日']
  28.         }
  29.     ],
  30.     yAxis : [
  31.         {
  32.             type : 'value',
  33.             axisLabel : {
  34.                 formatter: '{value} °C'
  35.             },
  36.             splitNumber:10
  37.         }
  38.     ],
  39.     series : [
  40.         {
  41.             name:'最高气温',
  42.             type:'line',
  43.             data:[11, 11, 15, 13, 12, 13, 10],
  44.             markPoint : {
  45.                 data : [
  46.                     {type : 'max', name: '最大值'},
  47.                     {type : 'min', name: '最小值'}
  48.                 ]
  49.             },
  50.             markLine : {
  51.                 data : [
  52.                     {type : 'average', name: '平均值'}
  53.                 ]
  54.             }
  55.         },
  56.         {
  57.             name:'最低气温',
  58.             type:'line',
  59.             data:[1, -2, 2, 5, 3, 2, 0],
  60.             markPoint : {
  61.                 data : [
  62.                     {name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}
  63.                 ]
  64.             },
  65.             markLine : {
  66.                 data : [
  67.                     {type : 'average', name : '平均值'}
  68.                 ]
  69.             }
  70.         }
  71.     ]
  72. };  
复制代码
  设置splitNumber为更大值即可。
  效果图如下所示:
a50a8893gw1ejdgi0czluj20d30993z9.jpg

  ECharts图表组件初级入门教程之splitNumber:如何设置Y轴刻度个数?

  其它推荐:
  ECharts数据图表使用介绍 超详细

相关帖子

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部