數(shù)據(jù)可視化的需求越來越多,圖表自動生成技術(shù)也日漸成熟
ECharts
ECharts 的功能十分強(qiáng)大,可以生成多種形式的圖表,配置項十分靈活,可以根據(jù)實際需求自由定制
官方文檔: https://www.echartsjs.com/examples/
但是ECharts繪制圖表時無法獲取到clientWidth，而 parseInt(stl.width, 10)) 將width: 100%;轉(zhuǎn)為100，所以計算出的圖表寬度為100px
所以設(shè)置width:100%對echarts是不起作用的
解決方法
思路：mounted時獲取window對象的寬高，結(jié)合實際需要對window的寬高進(jìn)行計算弯汰，然后將寬高經(jīng)過計算賦給需要渲染圖表的DOM節(jié)點瓶摆，這樣一來echarts節(jié)點渲染之前就獲得了具體的寬高查牌，大小就可以適應(yīng)不同的屏幕了。
具體實現(xiàn)函數(shù)如下：
<template>
<div id="main" ref="mychart"></div>
</template>
<script>
export default {
mounted: function () {
this.loadBugChart();
},
methods: {
loadBugChart() {
var domBugChart= this.$refs.mychart; //獲取DOM節(jié)點
//自適應(yīng)寬高
var bugChartContainer = function () {
if (domBugChart) {
domBugChart.style.width = 66+"vw";
domBugChart.style.height = 70+"vh";
// 相當(dāng)于
// 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);
}
}
}
</script>
這樣做有一個缺點寂祥，頁面大小改變之后需要刷新顷啼，刷新之后圖表自適應(yīng)踏枣，不過實際使用中頁面適配屏幕后大小改變的應(yīng)用場景不多昌屉。
進(jìn)階版
echarts官方提供了獲取圖表寬高的API函數(shù) getWidth() getHeight()钙蒙，可以對其進(jìn)行操作，在自適應(yīng)的前提下间驮，設(shè)置圖表最小寬高
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();
};
},
推薦躬厌，使用起來方便簡潔
