v-charts，点击页面按钮，不能二次重绘，解决方案

v-charts简介： 是基于 Vue2.0 和 Echarts 封装的图标组件，只需要统一提供一种对前后端都友好的数据格式设置简单的配置项，就可以生成常见的图表。

v-charts官方文档：v-charts

echarts官方文档：Documentation - Apache ECharts

安装

npm i v-charts echarts -S

在main.js中引用 

//全部引入

import VCharts from 'v-charts'

//按需引入v-charts（项目中一般是按需引用，v-charts中每个图表组件，都已单独打包到lib文件夹下面了）

import VeLine from 'v-charts/lib/line.common'

import VePie from 'v-charts/lib/pie.common'

页面使用

页面效果图

 在点击头部收起/打开的箭头时，会导致折线图的宽，不随着屏幕的改变而改变。echarts图，不能重绘，页面效果如下：

解决方案

一开始的思路，是监听DOM变化，于是在网上搜索了一些方法，但是由于本系统并不会大量地改变DOM，没有必要监听DOM宽高的变化。系统中只有折叠和展开两个状态，所以只需要简单的用一个flag表示，监听其true/false就可以了。我通过在store中创建变量isCollapse来管理折叠与展开。

import Vue from 'vue'

import Vuex from 'vuex'

import createPersistedstate from 'vuex-persistedstate'

Vue.use(Vuex)

export default new Vuex.Store({

  state: {

    token:"",//存储token

    isCollapse: false,// echact监听重绘变量

  },

  getters:{

    getToken(state){

      return state.token;

    }

  },

  mutations: {

    // 修改token，并将token存入localStorage

    setToken(state,token) {

      state.token = token;

      localStorage.setItem("token",token);

    },

    // echact监听重绘变量

    commitCollapse(state, bool) {

      state.isCollapse = bool;

    },

  },

  actions: {},

  modules: {},

  plugins: [

    new createPersistedstate({

      token: localStorage.getItem("token"),

    }),

  ],

})

最后在页面中，监听isCollapse值的变化，调用echarts的resize这个API，就可以了，上面写到的页面代码中加粗的注释代码就是监听isCollapse值的变化的代码，打开注释就好啦。

搜索文档：v-charts的简单使用_风如也的博客-CSDN博客_v-charts

以上dome操作，移入项目中，发现存在两个问题（一度回到解放前）：

1.点击头部箭头，echarts没有二次重绘，清空浏览器缓存，还是一样没有重绘。

项目背景：不是直接基于封装好了的vue-element-admin框架进行开发，头部的收起展开，是自定义的变量isActiveHead，isActiveHead值为true/false时，赋予不同的class类，来改变的。

最后的解决方法：（这样换一种方式解决后，问题二，也解决了）

// 在mian.js中  bus 总线传值

Vue.prototype.bus = new Vue();

 // 在页面created中，根据isActiveHead的改变，进行重绘，并在tab切换时，进行重绘

  created() {

    var localValue;

    this.bus.$on('isActiveHead', res => {

      this.$nextTick(() => {

        this.$refs.chartline.echarts.resize()

      })

    })

  },

 页面代码

2.在tab选中不是第一项切换时，切换至其他页面，再切换回来，发现echarts没有重新渲染。

原因：echarts重新渲染，监听的是isCollapse值的变化，切换页面时isCollapse的值并没有改变 ，所以echarts没有重新渲染。

每个项目的背景不同，解决方案也不同，一直都在填坑的路上，加油加油，哈哈！