本文主要是介绍vue2中使用 antv/f2，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
效果：
代码：
导包：
npm install @antv/f2
注意：用 3.8.11 版本
<template><div id="app"><canvas id="myChart" style="width: 100%;height: 300px;"></canvas></div>
</template><script>// import F2 from '@antv/f2/lib/index-all'import * as F2 from '@antv/f2'// import { Chart } from '@antv/f2';export default {name: 'App',data() {return {sj: [{year: '2015 年',sales: 145}, {year: '2016 年',sales: 121}, {year: '2017 年',sales: 100}, {year: '2018 年',sales: 97}, {year: '2019 年',sales: 85}]}},methods: {drawChart() {var chart = new F2.Chart({id: 'myChart',pixelRatio: window.devicePixelRatio});// chart.source(this.sj);// chart.interval().position('year*sales');chart.source(this.sj, {sales: {tickCount: 5}});// chart.tooltip({// showItemMarker: false,// onShow: function onShow(ev) {// var items = ev.items;// items[0].name = null;// items[0].name = items[0].title;// items[0].value = '¥ ' + items[0].value;// }// });// 让柱状图的宽度适配不同的屏幕尺寸var barWidth = 36 * (window.innerWidth / 375);chart.interval().position('year*sales').color('l(90) 0:#1890ff 1:#70cdd0').size(barWidth); // 定义柱状图渐变色chart.render();}},mounted() {var v = this;// this.$nextTick(() => {// v.drawChart();// });v.drawChart();}}
</script><style></style>这篇关于vue2中使用 antv/f2的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
