I use echarts plugin to build line chart at a some web pages. It works good but I can't find out inside documentation how to add padding between line chart and y-axis label and move y-axis label to the center between y-axis split lines?

Current line echarts plugin instance view:

Expected line echarts plugin instance view:

The screenshot above mean that I mentally shifted the graph away from the internal label so that they would not intersect and moved the labels along the y-axis of the game below exactly in the center between the split lines

What settings in the plugin do I need to change to achieve the same result as in the screenshot with the expected result?

I use echarts plugin to build line chart at a some web pages. It works good but I can't find out inside documentation how to add padding between line chart and y-axis label and move y-axis label to the center between y-axis split lines?

Current line echarts plugin instance view:

Expected line echarts plugin instance view:

The screenshot above mean that I mentally shifted the graph away from the internal label so that they would not intersect and moved the labels along the y-axis of the game below exactly in the center between the split lines

What settings in the plugin do I need to change to achieve the same result as in the screenshot with the expected result?

• javascript
• echarts

2 Answers 2

You can achieve this in the different ways, but most of the them are costly to support and harden to implement. It one of safety and ease way but you will need to keep an eye that xAxis have a little bit more points than series data to show gap.

var myChart = echarts.init(document.getElementById('main'));
var option = {
  tooltip: {
    trigger: 'axis'
  },
  grid: {
    left: '3%',
    right: '10%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: [1, 2, 3, 4, 5, 6, 7, 8, 9]
  },
  yAxis: {
    type: 'value',
    position: 'right',
    axisLabel: {
      inside: true,
      margin: 50,
      fontSize: 18
    }
  },
  series: [{
    type: 'line',
    areaStyle: {
      color: 'rgba(104, 216, 214, 0.4)'
    },
    lineStyle: {
      width: 2,
      color: 'rgba(104, 216, 214, 1)'
    },
    data: [120, 132, 101, 134, 90, 230, 210]
  }, ]
};

myChart.setOption(option);

<script src="https://cdn.jsdelivr/npm/[email protected]/dist/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>

var myChart = echarts.init(document.getElementById('main'));
    var seriesData = Array.from({length: 100}, () => Math.floor(Math.random() * 5000));
    var option = {
      tooltip: {
        trigger: 'axis'
      },
      grid: {
        left: '3%',
        right: '10%',
        bottom: '15%',
      },
      xAxis: [{
        id: 'xAxis1',
        type: 'category',
        boundaryGap: false,
        data: Array.from({length: seriesData.length}, () => Math.floor(Math.random() * 100)),
        axisLine: {
          lineStyle: {
            shadowOffsetX: 60,
          },
        },
      }],
      yAxis: [{
        type: 'value',
        axisLine: { onZero: false },
        position: 'right',
        show: true,
        axisLine: {
          lineStyle: {
            color: 'rgba(255,255,255,0)',
          },
        },
        splitLine: {
          lineStyle: {
            shadowOffsetX: 60,
            shadowColor: '#ccc'
          }
        },
        axisLabel: {
          interval: 0,
          inside: true,
          margin: -45,
          fontSize: 16,
          padding: [-50, 0, 0, 0],
          color: 'black',
          showMinLabel: false,
          showMaxLabel: false,
        },
      },{
          type: 'value',
          position: 'right',
          show: true,
          offset: 59,
        }
      ],
  dataZoom: [{
    type: 'inside'
  }, {
    type: 'slider',
    show: true,
    bottom: 0
  }],
  series: [{
    id: 'series1',
    type: 'line',
    yAxisIndex: [0,1],
    lineStyle: {
      width: 1,
    },
    label: {},
    data: seriesData,
  }],
};

myChart.setOption(option);

<script src="https://cdn.jsdelivr/npm/[email protected]/dist/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>