echarts的X轴的标题字多遮挡怎么办

2021-04-27 10:10:22

echarts的X轴的标题字多遮挡拥挤密集的解决办法又三种


  1. 让x轴字体倾斜

  2. 设置dataZoom滚动条

  3. 可以控制坐标轴分割间隔


  1. 让x轴字体倾斜,这个简单 ,可以查一下文档

2.设置dataZoom滚动条   参考实例 https://echarts.apache.org/examples/zh/editor.html?c=area-time-axis

var base = +new Date(1988, 9, 3);
var oneDay = 24 * 3600 * 1000;

var data = [[base, Math.random() * 300]];

for (var i = 1; i < 20000; i++) {
    var now = new Date(base += oneDay);
    data.push([
        [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
        Math.round((Math.random() - 0.5) * 20 + data[i - 1][1])
    ]);
}

option = {

    title: {
        left: 'center',
        text: '大数据量面积图',
    },

    xAxis: {
        type: 'time',
    },
    yAxis: {
        type: 'value',
    },
    dataZoom: [{
        type: 'inside',
        start: 0,
        end: 20
    }, {
        start: 0,
        end: 20
    }],
    series: [
        {
            name: '模拟数据',
            type: 'line',
            symbol: 'none',
            data: data
        }
    ]
};

3. 控制x轴间隔

xAxis.interval number
强制设置坐标轴分割间隔。
因为 splitNumber 是预估的值,实际根据策略计算出来的刻度可能无法达到想要的效果,这时候可以使用 interval 配合 min、max 强制设定刻度划分,一般不建议使用。
无法在类目轴中使用。在时间轴(type: 'time')中需要传时间戳,在对数轴(type: 'log')中需要传指数值。

  • 2017-01-16 15:22:30

    CommonJS规范

    CommonJS模块规范。 根据这个规范,每个文件就是一个模块,有自己的作用域。在一个文件里面定义的变量、函数、类,都是私有的,对其他文件不可见。

  • 2017-01-17 15:42:03

    vue-cli 发布(译)

    当我们真正开发一个应用的时候,我们不可避免的会用到一大堆的工具,模块化、预处理器、热模块加载、代码校验和测试。这些工具对于一个需要长期维护的大型应用是必须的,但是项目初始化将会是让人痛苦的事情。这就是为什么我们做了 vue-cli 。

  • 2017-01-19 00:45:56

    nodejs之process进程

    虽然node对操作系统做了很多抽象的工作,但是你还是可以直接和他交互,比如和系统中已经存在的进程进行交互,创建工作子进程。node是一个用于事件循环的线程,但是你可以在这个事件循环之外创建其他的进程(线程)参与工作。

  • 2017-01-19 01:05:32

    process对象

    process对象是Node的一个全局对象,提供当前Node进程的信息。它可以在脚本的任意位置使用,不必通过require命令加载。该对象部署了EventEmitter接口。

  • 2017-01-20 21:59:11

    WEBPACK DEV SERVER

    webpack-dev-server是一个小型的node.js Express服务器,它使用webpack-dev-middleware中间件来为通过webpack打包生成的资源文件提供Web服务。它还有一个通过Socket.IO连接着webpack-dev-server服务器的小型运行时程序。