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',
},
],