Vue使用Antv F2

F2是一个专注于移动，开箱即用的可视化解决方案，完美支持 H5 环境同时兼容多种环境（Node, 小程序，Weex）。在Vue中使用F2移动端图表，详细步骤如下：npm安装

npm install @antv/f2 --save

 在main.js中引用

impor F2 from '@antv/f2';
 
Vue.prototype.F2 = F2;

在页面中使用，首先创建一个容器，给定宽高，然后在js中渲染数据

<canvas id="boxCanvas" style="width: 100%;height: 300px;"></canvas>

   boxCanvas(){
      var data = [{
        year: '2015 年',
        sales: 145
      }, {
        year: '2016 年',
        sales: 121
      }, {
        year: '2017 年',
        sales: 100
      }, {
        year: '2018 年',
        sales: 97
      }, {
        year: '2019 年',
        sales: 85
      }];
      var chart = new this.F2.Chart({
        id: 'boxCanvas',
        pixelRatio: window.devicePixelRatio
      });
      chart.source(data, {
        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();
    },

效果如图

标签：F2,Vue,items,Antv,sales,chart,year,var
来源： https://blog.csdn.net/qq_43299703/article/details/120481410