填充 Apache ECharts 中的空白区域

Question

is possible in apache echarts to fill space from left and right?

When i'm use boundaryGap: false it looks like that (first and last value are partially hidden):

i need to fill left and right empty spaces and i have no idea how... Thanks

heres my code:

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

Option 1: You can modify the grid.left and grid.right options to set the left and right spacing of the chart to accommodate the cropped values,

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

Result:

Option 2: You can align the first and last element's xaxis label and data label to 'left' and 'right' to avoid cropping.

Modified xAxis option,

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

Modified Series data option,

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

Chart Option,

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,
      }