Closed coderJCWang closed 3 years ago
import F2 from "@antv/f2/lib/index"; import ScrollBar from '@antv/f2/lib/plugin/scroll-bar'; import Interaction from '@antv/f2/lib/interaction/';
chartData: any = [ { step: 427, time: "2021-04-19", index:0, }, { step: 1500, time: "2021-04-20", index:1, }, { step: 300, time: "2021-04-20", index:1, }, { step: 100, time: "2021-04-20", index:1, }, ];
kchartInit(data){ console.log('=====chartInit======');
// 在实例化前强制设置为单字体 F2.Global.fontFamily = 'sans-serif'; var dates = []; data.forEach(function(obj) { dates.push(obj.time) }) var newArr = dates.reduce((pre, cur) => { if (!pre.includes(cur)) { return pre.concat(cur) } else { return pre } }, []) // Step 1: 创建 Chart 对象 const chart = new F2.Chart({ id: 'step-trend', pixelRatio: window.devicePixelRatio, plugins: [ScrollBar, Interaction], }); console.log('=====chartInit1======'); chart.source(data, { time: { type: 'timeCat', mask: 'MM-DD', range: [0, 1], values: newArr.slice(0, 7) } }); console.log('=====chartInit2======'); chart.tooltip({ showCrosshairs: true, showItemMarker: false, background: { radius: 2, fill: '#1890FF', padding: [ 3, 5 ] }, nameStyle: { fill: '#fff' }, onShow: function onShow(ev) { const items = ev.items; items[0].name = items[0].title; } }); chart.line().position('time*step'); console.log('=====chartInit3======'); chart.point().position('time*step').style({ lineWidth: 1, fill: '#fff' }); console.log('=====chartInit4======'); chart.interaction('pan'); console.log('=====chartInit5======'); // 定义进度条 chart.scrollBar({ mode: 'x', xStyle: { offsetY: -10 } }); console.log('=====chartInit6======'); chart.render();
}
方法走了 但是图表却不显示。
import F2 from "@antv/f2/lib/index"; import ScrollBar from '@antv/f2/lib/plugin/scroll-bar'; import Interaction from '@antv/f2/lib/interaction/';
chartData: any = [ { step: 427, time: "2021-04-19", index:0, }, { step: 1500, time: "2021-04-20", index:1, }, { step: 300, time: "2021-04-20", index:1, }, { step: 100, time: "2021-04-20", index:1, }, ];
kchartInit(data){ console.log('=====chartInit======');
}
方法走了 但是图表却不显示。