今天在制作ECharts图表时遇到一个问题，需要在一个页面里放入十个ECharts图表，使用的是vue框架进行制作，为了避免在一个文件里写入过多的代码，于是每一个ECharts图表我都单独的写到另一个文件里，再通过组件的形式插入到主文件里。 但是在制作折线图时因为这三个折线图在浏览器窗口里占的比例比较大，所以我就希望这些折线图能够在浏览器窗口缩放时进行自适应。
1. 当只有一个图表需要进行自适应时 html:
<div class="bottombox"> <!-- 图表 --> <div id="chartLine1" class="linebottom" /> </div>JS:
// 生命周期 - 挂载完成（可以访问DOM元素） mounted() { this.drawLineChart() }, methods: { drawLineChart() { const myChart = this.$echarts.init(document.getElementById('chartLine1')) const option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, legend: { data: [{ name: '邮件营销', icon: 'rect' }, { name: '联盟广告', icon: 'rect' }] }, series: [{ name: '邮件营销', data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line' }, { name: '联盟广告', data: [320, 432, 501, 534, 290, 330, 320], type: 'line' }] } // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option) window.onresize = myChart.resize } }可以直接添加window.onresize = this.myChart8.resize这行代码实现自适应宽高。同时这种方法也支持写在写在含有ECharts图表的组件里
2. 当有多个图表需要进行宽高自适应时
这种情况我本来也想将resize方法单独和图表一起写在组件里，但是无论我怎么修改都无法实现多个图表同时进行自适应，最后没办法就只能将那三个折线图写到了主文件里（当然这也导致主文件的代码量大大的增加了），当将折线图的代码添加到同一个文件后就可以通过以下代码实现多个图表同时实现自适应了
drawLineChart1() { this.myChart8 = this.$echarts.init(document.getElementById('chartLine8')) this.myChart9 = this.$echarts.init(document.getElementById('chartLine9')) this.myChart10 = this.$echarts.init(document.getElementById('chartLine10')) const colorList = ['#9E87FF', '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF'] const option = { ... } const option2 = { ... } const option3 = { ... } // 使用刚指定的配置项和数据显示图表。 this.myChart8.setOption(option) this.myChart9.setOption(option2) this.myChart10.setOption(option3) const self = this window.addEventListener('resize', function() { self.myChart8.resize() self.myChart9.resize() self.myChart10.resize() }) },这是三个图表进行自适应的我的的示例代码，记得区分变量名
3. 最后如果看官有可以通过组件插入图表，并且也能实现多个图表同时进行自适应的方法，欢迎留言探讨啊
