天天看點

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();

};

},

推薦,使用起來友善簡潔