Vue使用Antv F2

2021-09-26 09:04:31 阅读：214 来源： 互联网

标签：F2 Vue items Antv sales chart year var

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Vue使用Antv F2