vue中使用百度echart图表大小问题
在项目中需要通过百度echarts的仪表盘来展示测试的成功率,自己封装了个gauge的vue组件,展示出来的时候发现大小不对,整个图像被限制在了一个很矮的区间内,如下图所示: 组件文件如下:<template><!--单独生成id,避免实例化时使用同一个div--><div style="height:1
·
在项目中需要通过百度echarts的仪表盘来展示测试的成功率,自己封装了个gauge的vue组件,展示出来的时候发现大小不对,整个图像被限制在了一个很矮的区间内,如下图所示:
组件文件如下:
<template>
<!--单独生成id,避免实例化时使用同一个div-->
<div style="height:100%;width:100%;" :id="gaugeId"></div>
</template>
<script>
import echarts from 'echarts';
import util from '@/libs/util';
export default {
name: 'successRateGauge',
props: ['title', 'rate'],
data(){
return {
gaugeInstance: null,
gaugeId:util.uuid(),
gaugeTitle: this.title, // 避免直接使用prop属性导致改变父组件内容
gaugeRate: this.rate,
option: {
backgroundColor: '#1b1b1b',
tooltip: {
formatter: "{a} <br/>{c} {b}"
},
series: [
{
name: 'xxx',
type: 'gauge',
radius: "90%", //仪表大小
axisLine : {
show : true,
lineStyle : { // 属性lineStyle控制线条样式
color : [ //表盘颜色
[ 0.5, "#DA462C" ],//0-50%处的颜色
[ 0.7, "#FF9618" ],//51%-70%处的颜色
[ 0.9, "#FFED44" ],//70%-90%处的颜色
[ 1,"#20AE51" ]//90%-100%处的颜色
]
}
},
detail: {formatter:'{value}%'},
data: [{value: 0, name: '%'}]
}
]
}
}
},
methods: {
getChartInstance(){ // 获取图表实例
this.gaugeInstance = echarts.init(document.getElementById(this.gaugeId));
},
drawGauge(){ // 画图
this.option.series[0].data[0].value = this.gaugeRate;
this.option.series[0].name = this.gaugeTitle;
this.gaugeInstance.setOption(this.option);
let _this = this;
window.addEventListener('resize', function () {
_this.gaugeInstance.resize();
});
}
},
mounted(){
this.getChartInstance();
this.drawGauge();
},
watch: {
rate(){
// 这里没有直接监控gaugeRate,因为rate只在初始化的时候赋值给了gaugeRate,
// 之后rate的改变无法更新到gaugeRate。所以只能直接监听rate。
this.gaugeRate = this.rate;
this.drawGauge();
}
}
};
</script>
组件没有什么特殊的,就是把官网的例子改造成了vue组件,方便复用。之前以为是radiu参数设置不对,于是调大了radius,从90%调到了200%,效果就是仪表盘变大了,但是还是被限制在很矮的区间里。后来网上搜了得知,容器大小不能设置百分比,要设置具体的数值,于是将容器大小做了修改:
<template>
<!--单独生成id,避免实例化时使用同一个div-->
<div style="height:246px;width:347px;" :id="gaugeId"></div>
</template>
之后就好了,显示正常了。
更多推荐
已为社区贡献1条内容
所有评论(0)