Vue component for elegant, interactive and flexible mobile chart library
Original library - antvis/f2
✅ Basic functionality
✅ Chart instance settings
✅ Geometry
✅ Scale
✅ Coord
✅ Axis
✅ Legend
✅ Guide
✅ Scrollbar
✅ Rerender on data change
$ npm install f2-vueimport f2chart from "f2-vue";export default { components: { f2chart } },<f2chart />You can find full API for F2 chart here: API for F2
Pay attention to the Roadmap section of this page - there is actual list of working features.
<f2chart :data="data" :geometry="geometry" ref="chart" />export default { return { data: [ { year: "1951", sales: 38 }, { year: "1952", sales: 52 }, { year: "1956", sales: 61 } ], geometry: [ { type: "interval", position: ["year", "sales"], color: 'year' } ], } }
<f2chart :data="data" :geometry="geometry" :width="500" :height="200" :scale="scale" :coord="coord" :tooltip="tooltip" :legend="false" :guide="guide" :scrollBar="scrollBar" ref="chart" />export default { return { data: [ { year: "1951", sales: 38 }, { year: "1952", sales: 52 }, { year: "1956", sales: 61 }, { year: "1957", sales: 145 }, { year: "1958", sales: 48 }, { year: "1959", sales: 38 }, { year: "1960", sales: 38 }, { year: "1962", sales: 47 } ], geometry: [ { type: "interval", position: ["year", "sales"], color: 'year', animation: false }, { type: "line", position: ["year", "sales"], } ], scale: [ { field: "sales", config: { min: 0, max: 300 } } ], coord: { type: "rect", config: { transposed: false } }, axis: [ { field: "", config: {} } ], legend: false, tooltip: { alwaysShow: true, }, guide: [ { type: 'line', config: { start: ['min', 175], end: ['max', 175], style: { lineWidth: 2, stroke: 'red' } } } ], scrollBar: { mode: 'x', xStyle: { offsetY: -5 } } } }
Feel free to submit an issue or the PR