javascript - echarts add padding between line chart and y-axis label - Stack Overflow

admin管理员组

文章数量:1335423

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

Share Improve this question Follow asked Aug 20, 2020 at 12:38 north.inhalenorth.inhale 51133 gold badges99 silver badges2121 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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>

本文标签： javascriptecharts add padding between line chart and yaxis labelStack Overflow