填充 Apache ECharts 行中的空白

Question

在 apache echarts 中可以从左右填充空间吗？

当我使用 boundingGap: false 时，它​​看起来像这样（第一个和最后一个值被部分隐藏）：

我需要填充左右空白，我不知道如何...谢谢

这是我的代码：

option = {
    xAxis: {
      type: 'category',
        boundaryGap: false,
      data: ['a', 'b','c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l'],
      axisTick: {
        show: false,
      },
      axisLine: {
        show:false,
      },

    },
    grid:{
        height: 200,
        left: 0,
        right: 0,
    },
    yAxis: {
      min: -10,
      type: 'value',
      silent: false,
      axisLine:false,
      axisLabel: false,
      axisTick: false,
      minorSplitLine: {
        show: false
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#EAEEF6",
          opacity: "1",
          width: "1",
        },
      }
    },
    series: [
        {
      label: {
        normal: {
          show: true,
           position: 'top',
          color: '#474646',
          fontSize:12,
          fontWeight: 'bold'
        }
      },
      data: [2,1,-4,-4,-3,-3,-5,-4,0,1,1.5,2],
      type: 'line',
      smooth: true,

    }
    ],
  }

https://jsfiddle.net/zm8whknr/

Answer 1

选项 1：您可以修改 grid.left 和 grid.right 选项以设置图表的左右间距以适应裁剪后的值，

grid:{
            height: 200,
            left: 10,
            right: 10,
},

结果：

选项 2：您可以将第一个和最后一个元素的 xaxis 标签和数据标签对齐到“左”和“右”以避免裁剪。

修改了 xAxis 选项，

 xAxis.data = [{value:'a', textStyle:{'align': 'left'}}, ... ,{value:'l', textStyle:{'align': 'right'}}],

修改系列数据选项，

series[0].data = [{value:2, label:{'align': 'left'}}, ... , {value:2, label:{'align': 'right'}}],

图表选项，

option = {
        xAxis: {
          type: 'category',
            boundaryGap: false,
          data: [{value:'a', textStyle:{'align': 'left'}},'b','c','d','e','f','g','h','i','j','k',{value:'l', textStyle:{'align': 'right'}}],
          axisTick: {
            show: false,
          },
          axisLine: {
            show:false,
          },
    
        },
        grid:{
            height: 200,
            left: 0,
            right: 0,
        },
        yAxis: {
          min: -10,
          type: 'value',
          silent: false,
          axisLine:false,
          axisLabel: false,
          axisTick: false,
          minorSplitLine: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#EAEEF6",
              opacity: "1",
              width: "1",
            },
          }
        },
        series: [
            {
          label: {
            normal: {
              show: true,
               position: 'top',
              color: '#474646',
              fontSize:12,
              fontWeight: 'bold'
            }
          },
          data: [{value:2, label:{'align': 'left'}},1,-4,-4,-3,-3,-5,-4,0,1,1.5, {value:2, label:{'align': 'right'}}],
          type: 'line',
          smooth: true,
          animationDelay: idx => idx * 100,
          lineStyle: {
            normal: {
              width: 4,
              color:'#29d9c9',
              shadowColor: 'rgba(41, 217, 201, 0.5)',
              shadowOffsetX: 0,
              shadowOffsetY: 8,
              shadowBlur: 10
            },
          },
          areaStyle: {
            origin: 'start',
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(0, 214, 143, 0.3)',
            }, {
              offset: 1,
              color: 'rgba(0, 214, 143, 0)',
            }]),
            opacity: 1,
          },
          itemStyle:{
            color: '#29d9c9',
            borderWidth: 5
          },
          symbolSize: 5
        }
        ],
        animationEasing: 'elasticOut',
        animationDelayUpdate: idx => idx * 5,
      }