echarts 坐标轴问题

clipboard.png

我想实现这个图形距离Y 坐标轴有一段距离,请问有什么属性能实现吗? boundaryGap 是无效的下面是配置以及当前效果。

clipboard.png

const data = [{"aqi":58,"time":"2018-02-07T12:00:00.000Z","color":"#FEDE19","value":["2018-02-07T12:00:00.000Z",58],"itemStyle":{"color":"#FEDE19"},"day":"今天"},{"aqi":60,"time":"2018-02-07T13:00:00.000Z","color":"#FEDE19","value":["2018-02-07T13:00:00.000Z",60],"itemStyle":{"color":"#FEDE19"}},{"aqi":62,"time":"2018-02-07T14:00:00.000Z","color":"#FEDE19","value":["2018-02-07T14:00:00.000Z",62],"itemStyle":{"color":"#FEDE19"}},{"aqi":65,"time":"2018-02-07T15:00:00.000Z","color":"#FEDE19","value":["2018-02-07T15:00:00.000Z",65],"itemStyle":{"color":"#FEDE19"}},{"aqi":65,"time":"2018-02-07T16:00:00.000Z","color":"#FEDE19","value":["2018-02-07T16:00:00.000Z",65],"itemStyle":{"color":"#FEDE19"}}]
const option = {
  grid:{
    left: 0,
    top: 20,
    right: 5,
    bottom: 0,
    containLabel: true
  },
  dataZoom:[
    {
      type: 'inside',
      zoomLock: true,
      start: 0,
      end: 20
    }
  ],
  xAxis: {
    type: 'time',
    boundaryGap:['20%', '20%'],
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    splitLine: {
      show: false
    },
    axisLabel: {
      color: '#fff',
      margin: 0
    }
  },
  yAxis: {
    type: 'value',
    max: function(value) {
      return value.max*2;
    },
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    splitLine: {
      lineStyle:{
        type: 'dashed'
      }
    },
    axisLabel: {
      inside: true,
      color: '#fff',
      padding:[0, 20, 5, 0],
      verticalAlign: 'bottom',
      margin: 0
    },
    interval: 80,
    splitNumber: 2
  },
  series: [{
    type: 'bar',
    barWidth: 8,
    data: data,
    barGap: "100%"
  }]
};
阅读 3.4k
1 个回答

提问记得减小别人回答的成本,比如这里最好给一个直接可以运行的Option

解决方案是用offset属性

http://echarts.baidu.com/opti...

clipboard.png

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题