数据可视化的需求越来越多,图表自动生成技术也日渐成熟
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+"