antV F2 利用changeSize在windowResize时重绘

antV f2 windowResize
思路：①注册全局总线 提起监听事件；
②在app.vue的入口页写下监听事件，顺便带上防抖；
③在组件里面用f2的chart changeSize事件让视图重绘

注册总线 mian.js

Vue.prototype.$eventBus = new Vue();
Vue.config.productionTip = false;

App.vue 入口页 监听注册总线

---

tool.js 封装 changeSize方法

const fixWindowSize = (canvas, chart) => {
  canvas.style.width = '100%';
  canvas.style.height = '100%';
  canvas.removeAttribute('width');
  canvas.removeAttribute('height');
  const w = canvas.offsetWidth;
  const h = canvas.offsetHeight;
  chart.changeSize(w, h);
};

export {
  fixWindowSize,
};

---

利用antV f2封装的绘画组件 同时在mounted周期里面添加eventBus['windowResize']

视图组件引用

    
    
    
    

数据json
listData: [
          {
            label: '城区',
            value: 58,
            unit: '万人',
          },
          {
            label: '陆丰市',
            value: 188,
            unit: '万人',
          },
          {
            label: '海丰县',
            value: 85,
            unit: '万人',
          },
          {
            label: '陆河县',
            value: 36,
            unit: '万人',
          },
        ],
        uncertainData: [
          {
            name: '城区',
            val: 58,
            str: '万人',
            status: '严重',
          },
          {
            name: '陆丰市',
            val: 188,
            str: '万人',
            status: '重度',
          },
          {
            name: '海丰县',
            val: 85,
            str: '万人',
            status: '中度',
          },
          {
            name: '陆河县',
            val: 36,
            str: '万人',
            status: '轻度',
          },
        ],
        manyData: [
          {
            years: '2008',
            name: '城区',
            val: 50,
            str: '万人',
          },
          {
            years: '2008',
            name: '陆丰市',
            val: 94,
            str: '万人',
          },
          {
            years: '2008',
            name: '海丰县',
            val: 102,
            str: '万人',
          },
          {
            years: '2008',
            name: '陆河县',
            val: 51,
            str: '万人',
          },
          {
            years: '2018',
            name: '城区',
            val: 58,
            str: '万人',
          },
          {
            years: '2018',
            name: '陆丰市',
            val: 188,
            str: '万人',
          },
          {
            years: '2018',
            name: '海丰县',
            val: 85,
            str: '万人',
          },
          {
            years: '2018',
            name: '陆河县',
            val: 36,
            str: '万人',
          },
        ],
        barProps: {
          label: 'name',
          value: 'val',
          unit: 'str',
          latitude: 'years',
          status: 'status',
        },
        colorData: [
          {
            label: '城区',
            value: 58,
            unit: '万人',
            color: '#687DF6',
          },
          {
            label: '陆丰市',
            value: 188,
            unit: '万人',
            color: '#687DF6',
          },
          {
            label: '海丰县',
            value: 85,
            unit: '万人',
            color: '#687DF6',
          },
          {
            label: '陆河县',
            value: 36,
            unit: '万人',
            color: '#687DF6',
          },
        ],