vue 数据更新后,echarts图表不更新
用watch监听传递的数据,重新调用渲染图表,echarts中setOption这个方法有三个属性,有的情况下也需要修改
watch: {
datas: {
handler: function () {
console.log(1);
this.$nextTick(function () {
this.drawCharts(this.datas, this.text);
});
},
deep: true,
},
},
<template>
<div>
<div class="charts" :id="id"></div>
</div>
</template>
<script>
import echarts from "echarts";
export default {
props: ["id", "datas", "text"],
data() {
return {
myChart: null,
};
},
watch: {
datas: {
handler: function () {
console.log(1);
this.$nextTick(function () {
this.drawCharts(this.datas, this.text);
});
},
deep: true,
},
},
mounted() {
this.$nextTick(function () {
this.drawCharts(this.datas, this.text);
});
},
methods: {
drawCharts(a, b) {
var myChart = echarts.init(document.getElementById(this.id));
var option = {
tooltip: {
trigger: "item",
},
graphic: [
{
type: "text",
left: "center",
top: "35%",
style: {
text: b,
textAlign: "center",
fill: "#fff",
fontSize: 24,
fontFamily: "Microsoft YaHei",
},
},
],
series: [
{
name: "访问来源",
type: "pie",
radius: ["60%", "80%"],
avoidLabelOverlap: false,
label: {
show: false,
formatter: "{d}%",
},
labelLine: {
show: false,
},
itemStyle: {
borderRadius: 10,
borderColor: "raba(0,0,0,0)",
borderWidth: 1,
},
tooltip: {
trigger: "item",
formatter: "{b}:{c}%",
},
data: a,
},
],
};
myChart.setOption(option, true);
},
},
};
</script>
<style lang="less" scoped>
.charts {
width: 400px;
height: 250px;
}
</style>