需求：
vue-echarts放子组件里
父组件传值调用它
当父组件的数据变更了
子组件里的echart重绘
思路：
子组件watch监听 props数据的变更
当监听到变更
重新定义 options的值
父组件
正常传值即可
子组件
<template>
<chart style="width:160px; height:190px;"
ref="yibiaopan"
:options="orgOptions"
:auto-resize="true"></chart>
</template>
<script>
import echarts from 'echarts'
export default {
name: 'barChart2',
props: ['titleName', 'useage'],
data () {
return {
orgOptions: {
}
}
},
methods: {
getInfoSucc () {
this.orgOptions = {
tooltip: {
formatter: '{a} <br/>{b} : {c}%'
},
toolbox: {
feature: {
restore: {
},
saveAsImage: {
}
}
},
title: [{
//主机使用率的样式
x: 'center',
y: '80%',
text: this.titleName,
textStyle: {
fontSize: 14,
color: '#0fd0ff',
},
}],
toolbox: {
show: false
},
series: [
{
name: '业务指标',
type: 'gauge',
detail: {
//【90%】的样式
formatter: '{value}%',
offsetCenter: [0, "75%"],
textStyle: {
color: 'white',
fontSize: 16
},
},
pointer: {
width: 5, // 指针的宽度
length: "60%", // 指针长度，按照半圆半径的百分比
},
splitLine: {
// 分割线
length: 10, // 分割线长度
lineStyle: {
width: 1, // 分割线宽度
color: 'auto' // 分割线颜色，跟着仪表盘走
}
},
axisTick: {
// 刻度线
length: 8, // 刻度线长度
lineStyle: {
width: 1, // 分割线宽度
color: 'auto', // 分割线颜色，跟着仪表盘走
}
},
axisLine: {
lineStyle: {
color: [[0.2, '#3dccae'], [0.8, '#207ae8'], [1, '#f06e23']], // 改表盘颜色
width: 6, // 表盘粗细
}
},
axisLabel: {
//文字样式（及“10”、“20”等文字样式）
distance: 1, //文字离表盘的距离
fontSize: 9,
},
data: [{
value: this.useage }],
title: {
// 设置仪表盘中间显示文字样式
show: false
},
}
]
}
}
},
watch: {
useage: {
handler (newValue, oldValue) {
this.useage = newValue
alert('监听到了')
this.getInfoSucc() //监听到了，重新定义数据，即重绘
},
deep: true
}
},
mounted () {
this.getInfoSucc()
}
}
</script>