Vue中给canvas画布,获取div样式,设置动态宽高
项目需求: 需要使用echarts进行图表展示。由于div宽高是不固定的,因此需要先获取父级的宽高再把值赋予到图表的div中。 需要使用this.$nextTick(() => {});方法,在mounted中,保证DOM渲染完全后,在进行echarts初始化。赋值操作:$("#chartLineBox").width($(".right").w...
·
项目需求:
需要使用echarts进行图表展示。由于div宽高是不固定的,因此需要先获取父级的宽高再把值赋予到图表的div中。
需要使用 this.$nextTick(() => { });方法,在mounted中,保证DOM渲染完全后,在进行echarts初始化。
赋值操作:
$("#chartLineBox").width($(".right").width());
$("#chartLineBox").height($(".right").height())
echarts表格不发生变化:
重新修改大小this.myChart.resize();
<template>
<div class="right">
<div id="chartLineBox" class="content" ></div>
</div>
</template>
<script>
import echarts from 'echarts'
export default {
name: "upechart",
props: ['linecontent', 'changeNumber'],
data() {
return {
echartData: {
rksj: [],
install: [],
},
myChart: Object,
}
},
methods: {
drawEcharts() {
this.myChart = echarts.init(document.getElementById('chartLineBox'))
this.set()
},
set() {
this.myChart.setOption({
tooltip: {
trigger: 'axis', //显示提示框
},
legend: {
},
grid: {
x: 50,
},
xAxis: {
},
yAxis: {
},
series: [
],
}, true)
this.myChart.resize()
}
},
mounted() {
this.echartData.rksj = this.linecontent.rksj
this.echartData.install = this.linecontent.install
this.$nextTick(() => { //使用nextTick为了保证dom元素都已经渲染完毕
$("#chartLineBox").width($(".right").width());
$("#chartLineBox").height($(".right").height());
});
this.drawEcharts()
this.set()
},
watch: {
},
'changeNumber'(newVal, oldVal){
}
}
}
</script>
<style scoped>
</style>
更多推荐
已为社区贡献2条内容
所有评论(0)