Question

我使用echarts plugin在某些网页上构建折线图。效果很好，但我无法在documentation内找到如何在折线图和y轴标签之间添加填充，以及如何将y轴标签移动到y轴分割线之间的中心？

当前行echarts插件实例视图：

预期的echarts插件实例行视图：

上面的屏幕截图表示我在思维上将图形从内部标签上移开，以使它们不会相交并将标签沿游戏的y轴移动到正好位于分割线之间的中心

我需要更改插件中的哪些设置才能获得与屏幕截图相同的结果并达到预期效果？

Answer 1

您可以通过不同的方法来实现这一目标，但是其中大多数方法的支持和实施成本都很高。这是一种安全便捷的方法，但是您需要注意xAxis比系列数据要多一些点以显示间隙。

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.net/npm/echarts@4.8.0/dist/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>

Answer 2

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.net/npm/echarts@4.8.0/dist/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>

echarts在折线图和y轴标签之间添加填充

2 个答案: