echarts-axis-hide-overlap

简单折线图

by tmtron

HTML

<script src="//unpkg.com/echarts/dist/echarts.min.js"></script>
<script src="https://underscorejs.org/underscore.js"></script>
<div id="main" style="width: 600px;height:200px;"></div>

JavaScript

/** 
 * bug-report: https://github.com/apache/echarts/issues/14266#issuecomment-795685550
 * pull-request https://github.com/apache/echarts/pull/15712 
 * - adds axisLabel.hideOverlap
 * - should work in version 5.2.1
 */
var myChart = echarts.init(document.getElementById('main'));


var option = {
  "yAxis": {
    "type": "value",
    "splitNumber": 4,
    "show": true,
  },
  "xAxis": [{
    "type": "time",
    "splitNumber": 5,
    "interval": 5,
    "axisLabel": {
      "interval": 5,
      formatter: () => 'longtext',
      "show": true,
      hideOverlap: true
    },
    "splitLine": {
      "show": true,
    },
    "axisLine": {
      "show": "auto",
    },
    "show": true,
  }],
  "series": [{
    "type": "line",
    "name": "lineA",
    "yAxisIndex": 0,
    "data": [
      [
        1602633600000,
        13.034444444444445
      ],
      [
        1606259700000,
        12.165
      ]
    ],
    "encode": {
      "x": [
        0
      ],
      "y": [
        1
      ]
    }
  }],
  "dataZoom": [{
      "show": true,
    },
    {
      "type": "inside",
      "filterMode": "weakFilter"
    }
  ]
};




myChart.setOption(option);

// 使用刚指定的配置项和数据显示图表。
//  myChart.setOption(option);