鍍金池/ 問(wèn)答/HTML/ echarts 坐標(biāo)軸問(wèn)題

echarts 坐標(biāo)軸問(wèn)題

clipboard.png

我想實(shí)現(xiàn)這個(gè)圖形距離Y 坐標(biāo)軸有一段距離,請(qǐng)問(wèn)有什么屬性能實(shí)現(xiàn)嗎? boundaryGap 是無(wú)效的下面是配置以及當(dāng)前效果。

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%"
  }]
};
回答
編輯回答
你的瞳

提問(wèn)記得減小別人回答的成本,比如這里最好給一個(gè)直接可以運(yùn)行的Option

解決方案是用offset屬性

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

clipboard.png

2018年2月22日 23:51