问题描述
一次项目开发过程中, 需要做一些图表, 用的是百度开源的 echarts. vue 推荐组件化开发, 所以就把每个图表封装成子组件, 然后在需要用到该图表的父组件中直接使用.
实际开发中, 数据肯定都是异步获取的. 所以我们在 mounted 生命周期中获取数据. 对 vue 生命周期不熟悉的, 可以去看一下我之前写一篇文章 vue2.0 项目实战 (4) 生命周期和钩子函数详解
由于父组件请求的数据并不是一成不变的, 会根据不同的条件请求不同的数据, 此时需要图表进行更新.
代码示例
在父组件中
- // Main.vue
- <template>
- <div>
- ...
- <Pie :pieData="fullList"></Pie>
- ...
- </div>
- </template>
- <script>
- import Pie from 'components/SourcePie'
- export default {
- components: {
- Pie
- },
- data(){
- return {
- fullList:{}
- }
- },
- mounted() {
- this._fullQuantity()
- },
- methods: {
- _fullQuantity(){
- // axios...
- }
- }
- }
- </script>
在父组件中, 通过 api 接口获得的数据传递给子组件. 那么我们在子组件中:
- // SourcePie.vue
- <template>
- <div style="width:300px;height:260px" id="data_source_con" v-if="pieData"></div>
- </template>
- <script>
- import echarts from 'echarts';
- export default {
- name: 'dataSourcePie',
- data() {
- return {
- //
- };
- },
- props: {
- pieData: Object
- },
- mounted() {
- this.init()
- },
- methods: {
- init() {
- let _this = this;
- this.$nextTick(() => {
- var dataSourcePie = echarts.init(document.getElementById('data_source_con'));
- const option = {
- tooltip: {
- trigger: 'item',
- formatter: "{a} <br/>{b} : {c} ({d}%)",
- position: ['50%', '50%']
- },
- series: [{
- name: '实体统计',
- type: 'pie',
- radius: '50%',
- center: ['50%', '60%'],
- data: [{
- value: _this.pieData.videoNum,
- name: '影视数据'
- },
- {
- value: _this.pieData.albumNum,
- name: '专辑数据'
- },
- {
- value: _this.pieData.songNum,
- name: '歌曲数据'
- },
- {
- value: _this.pieData.novelNum,
- name: '小说数据'
- },
- {
- value: _this.pieData.presonNum,
- name: '人员数据'
- }
- ],
- itemStyle: {
- emphasis: {
- shadowBlur: 10,
- shadowOffsetX: 0,
- shadowColor: 'rgba(0, 0, 0, 0.5)'
- }
- }
- }]
- };
- dataSourcePie.setOption(option);
- window.addEventListener('resize', function() {
- dataSourcePie.resize();
- });
- });
- }
- }
- };
- </script>
我们发现第一次图表能正常显示, 但是页面一刷新或者跳转到其它页面, 再返回到该页面, 图表就不显示了.
原因
自己当时没有想那么多为什么无法加载, 因此在另一个父组件进行应用的时候, 他是首屏就加载, 数据不变动.
但是当数据变动之后, 无法自动的更新图表.
由于 mounted 只会在挂载的时候执行一次, 因此无法后续进行更新
解决办法
通过 watch 进行图表的更新
- watch: {
- pieData() {
- this.$nextTick(() => {
- if (this.pieData) {
- this.init()
- }
- })
- }
- },
这样就能解决我们的问题了.
来源: https://www.cnblogs.com/zhouyangla/p/9435461.html