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')中需要传指数值。

  • 2018-01-20 20:33:58

    PHP中session_cache_limiter() 是什么意思啊

    session_cache_limiter('public'); session_cache_expire(30); session_start();第三个我晓得 前两个 网络上没找着资料 手册上全是英文的 翻译后 还是看不懂主要是没翻译正确

  • 2018-01-23 02:22:17

    andorid,把控件置于最顶端。bringToFront的意外发现

     bringToFront方法在SDK中的说明是“Change the view's z order in the tree, so it's on top of other sibling views”,翻译过来就是改变view的z轴,使其处在他父view的顶端。关于bringToFront的实现,网上有很多资料介绍,大体来说就是将这个view从父view中移除,然后再加入父view的顶端。具体实现如何呢?