ECharts.js 常见问题解决

1、问题描述

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

2、解决方法

2.1、使 ECharts 铺满布局

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

1
2
3
4

grid: {
    left: '8%',
    right: '8%'
}

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

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

关键代码如下：

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 对象名，一般在初始化部分会有类似代码：

1

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

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

2.3、解决图例和图表重合

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

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

1
2
3

legend: {
    top: '5%'
}

否则图例将与标题重合。

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

1
2
3

grid: {
    top: '15%'
}

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

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