echarts数据变了不重新渲染，以及重新渲染了前后数据会重叠渲染的问题
1.echarts數據變了但是視圖不重新渲染
新建Chart.vue文件
<template>
?<p :id="id" :style="style"></p>
</template>
<script>
export default {
?name: "Chart",
?data() {
??return {
???//echarts實例
???chart: ""?
??};
?},
?props: {
??//父組件需要傳遞的參數：id，width，height，option
??id: {
???type: String
??},
??width: {
???type: String,
???default: "100%"
??},
??height: {
???type: String,
???default: "300px"
??},
??option: {
???type: Object,
???//Object類型的prop值一定要用函數return出來，不然會報錯。原理和data是一樣的，
???//使用閉包保證一個vue實例擁有自己的一份props
???default() {
????return {
?????title: {
??????text: "vue-Echarts"
?????},
?????legend: {
??????data: ["銷量"]
?????},
?????xAxis: {
??????data: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子","tuoxie"]
?????},
?????series: [
??????{
???????name: "銷量",
???????type: "line",
???????data: [5, 20, 36, 10, 10, 70]
??????}
?????]
????};
???}
??}
?},
?computed: {
??style() {
???return {
????height: this.height,
????width: this.width
???};
??}
?},
?mounted() {
??this.init();
?},
?methods: {
??init() {
???this.chart = this.$echarts.init(document.getElementById(this.id));
???this.chart.setOption(this.option);
??}
?}
};
</script>
新建App.vue文件，chart在App.vue中簡單渲染出來
<template>
?<p id="app">
??<Chart id="test"/>
?</p>
</template>
<script>
import Chart from "./components/Chart";
export default {
?name: "App",
?data() {},
?components: {
??Chart
?}
}
</script>
支持數據自動刷新
//在Chart.vue中加入watch
?watch: {
??//觀察option的變化
??option: {
???handler(newVal, oldVal) {
????if (this.chart) {
?????if (newVal) {
??????this.chart.setOption(newVal);
?????} else {
??????this.chart.setOption(oldVal);
?????}
????} else {
??????this.init();
????}
???},
???deep: true //對象內部屬性的監聽，關鍵。
??}
?}
2.重新渲染了前后數據會重疊渲染的問題
chart.setOption(option, notMerge, lazyUpdate);將notMerge設置為true就可以echarts畫布刪除歷史數據重新渲染數據
notMerge是可選項，是否不跟之前設置的option進行合并，默認為false，即合并。轉載于:https://www.cnblogs.com/xiaoleilei123/p/10730709.html
總結
以上是生活随笔為你收集整理的echarts数据变了不重新渲染，以及重新渲染了前后数据会重叠渲染的问题的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 丽江到大理怎么坐车，丽江到大理需要多久
- 下一篇： 团队任务2-8组