ECharts.js 常见问题解决

1、问题描述

在为哪吒面板最近更新的网络监控页面写 mdui 主题适配时,由于强迫症犯了追求完美,总是觉得 ECharts 渲染的位置不完美,监控数量一多图例又和图重合了,最后发现屏幕尺寸改变(如:手机从横屏变为竖屏)时 ECharts 居然不会重新设置宽度。遂查找资料解决了这些问题。

2、解决方法

2.1、使 ECharts 铺满布局

默认是固定宽度的,因此原作者给div设置了max-width: 95vw来让图表左右的空白至少看起来对称些,但是更完美的解决方案是设置grid的左右间隔:

JavaScript
1
2
3
4
grid: {
    left: '8%',
    right: '8%'
}

8%是我试出来的数字,如果觉得看着还是不舒服可以再改改。目前发现 2%~3%会导致图表边缘被遮住一些(如果设置了overflow: hidden)。

2.2、在页面宽度改变时自动重新设置 ECharts 宽度

关键代码如下:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
mounted() {
    window.addEventListener('resize', this.resizeHandle);
},
destroyed () {
    window.removeEventListener('resize', this.resizeHandle);
},
methods () {
    resizeHandle () {
    this.myChart.resize(); // 替换 myChart 为初始化时定义的值
    },
}

如果 mounted()destroyed ()methods ()里面已经有代码了可以加在原有内容的下面。

注意在resize那一行要替换 ECharts 对象名,一般在初始化部分会有类似代码:

JavaScript
1
this.myChart = echarts.init(this.$refs.chartDom);

其中的this.myChart就是之后调用的对象。

2.3、解决图例和图表重合

我使用的图表是图例在上方、图表是折线,如果图表类型不同的话可能配置会有略微区别。

首先如果有标题的话,设置图例与顶部的间隔:

JavaScript
1
2
3
legend: {
    top: '5%'
}

否则图例将与标题重合。

然后设置图表与顶部间隔:

JavaScript
1
2
3
grid: {
    top: '15%'
}

这个值至少要是标题与顶部距离的两倍(恰好是两倍即当图例只有一行,且标题与图例高度相同时),否则图表还是会与图例重合。这种方法适合图例数量固定的情况,如果图例数量不固定,或者设置了图表宽度自适应,此时就无法确定图例到底占了几行,需要动态设置1

动态设置图例、图表与顶部间隔

由于我不是用 React,也看不懂这段代码,因此具体写法请自行摸索。

ECharts.js 常见问题解决

https://blog.tsinbei.com/tw/archives/1496/

文章作者
Hsukqi Lee
发布于

2024-03-17

修改于

2024-03-17

许可协议

CC BY-NC-ND 4.0

评论

昵称
邮箱
网址
暂无