echarts 坐标自适应,实现 ECharts 图表自适应

数据可视化的需求越来越多,图表自动生成技术也日渐成熟

ECharts

ECharts 的功能十分强大,可以生成多种形式的图表,配置项十分灵活,可以根据实际需求自由定制

官方文档: https://www.echartsjs.com/examples/

但是ECharts绘制图表时无法获取到clientWidth，而 parseInt(stl.width, 10)) 将width: 100%;转为100，所以计算出的图表宽度为100px

所以设置width:100%对echarts是不起作用的

解决方法

思路：mounted时获取window对象的宽高，结合实际需要对window的宽高进行计算，然后将宽高经过计算赋给需要渲染图表的DOM节点，这样一来echarts节点渲染之前就获得了具体的宽高，大小就可以适应不同的屏幕了。

具体实现函数如下：

export default {

mounted: function () {

this.loadBugChart();

},

methods: {

loadBugChart() {

var domBugChart= this.$refs.mychart; //获取DOM节点

//自适应宽高

var bugChartContainer = function () {

if (domBugChart) {

domBugChart.style.width = 66+"vw";

domBugChart.style.height = 70+"vh";

// 相当于

// domBugChart.style.width = window.innerWidth * 0.66 + 'px';

// domBugChart.style.height = window.innerHeight * 0.7 + 'px';

}

};

bugChartContainer();

var bugChart = echarts.init(domBugChart);

let option = {...};

bugChart.setOption(option);

}

}

}

这样做有一个缺点，页面大小改变之后需要刷新，刷新之后图表自适应，不过实际使用中页面适配屏幕后大小改变的应用场景不多。

进阶版

echarts官方提供了获取图表宽高的API函数 getWidth() getHeight()，可以对其进行操作，在自适应的前提下，设置图表最小宽高

loadSheetChart() {

var domSheetChart = this.$refs.sheetChart;

this.sheetChart = echarts.init(domSheetChart);

let width =

this.sheetChart.getWidth() < 250 ? 250 : this.sheetChart.getWidth();

let height = this.sheetChart.getHeight();

},

使用官方API resize ()

barChartLoad() {

const barChart = echarts.init(document.getElementById('barChart'));

barChart.setOption(this.barChartOption);

window.onresize = function() {

barChart.resize();

};

},

推荐，使用起来方便简洁