資料可視化的需求越來越多,圖表自動生成技術也日漸成熟
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();
};
},
推薦,使用起來友善簡潔