<s id="0oyqk"></s>
  • <option id="0oyqk"><optgroup id="0oyqk"></optgroup></option>
  • <source id="0oyqk"><bdo id="0oyqk"></bdo></source>
  • AntV F2和vue-cli構建移動端可視化視圖過程詳解

     更新時間:2019-10-08 14:01:54   作者:佚名   我要評論(0)

    AntV F2是螞蟻金服旗下的一個專注于移動,開箱即用的可視化解決方案,完美支持 H5 環境同時兼容多種環境(Node, 小程序,Weex),完備的圖形語法理論,滿足你

    AntV F2是螞蟻金服旗下的一個專注于移動,開箱即用的可視化解決方案,完美支持 H5 環境同時兼容多種環境(Node, 小程序,Weex),完備的圖形語法理論,滿足你的各種可視化需求,專業的移動設計指引為你帶來最佳的移動端圖表體驗。

    AntV F2官方文檔地址:https://antv.alipay.com/zh-cn/f2/3.x/

    話不多說,直接進入正題:

    Antv F2官方比較友好,給我們提供了兩種方式方便我們使用,分別是CDN方式(引入在線資源 <script src="http://files.jb51.net/file_images/article/201910/2019108110624221.png?20199811646" alt="" /> 

    如果在項目中是 import F2 from "@antv/f2" 這樣引用是會報語法錯誤的,報錯信息為:“chart.pieLabel is not a function”,所以安裝方式建議修改為

    import F2 from "@antv/f2/lib/index-all",這樣引用是可以正常使用不報錯的,親測可用;

    安裝完依賴和引用文件資源之后,就可以直接進行圖表配置和開發了;我在項目中用到了環形圖,直接進入環形圖Demo案例界面看看Demo,

    https://antv.alipay.com/zh-cn/f2/3.x/demo/index.html#_%E9%A5%BC%E5%9B%BE,

    首先使用的時候視圖層很簡單,一個大div包住canvas標簽即可

     <div class="chart-wrapper">
      <canvas id="mountNode"></canvas>
     </div>

    接著就是數據邏輯層根據文檔介紹:

     //模擬數據,也可以根據ajax進行請求后臺數據 
    var data = [{
      const: 'const',
      type: '交通出行',
      money: 51.39
     }, {
      const: 'const',
      type: '飲食',
      money: 356.68
     }, {
      const: 'const',
      type: '生活日用',
      money: 20.00
     }, {
      const: 'const',
      type: '住房繳費',
      money: 116.53
     }];
      //配置視圖id與上面html對應
     var chart = new F2.Chart({
      id: 'mountNode',
      pixelRatio: window.devicePixelRatio
     });
      //定義渲染數據源
     chart.source(data);
      //定義圖表類型樣式,其中radius和innerRadius可以更改環形的大小
     chart.coord('polar', {
      transposed: true,
      radius: 0.9,
      innerRadius: 0.5
     });
     chart.axis(false);
     //圖表圖例
     chart.legend(false);
     // 圖表提示信息
     chart.tooltip(false);
     //這里可以配置更改環形中心文字
     chart.guide().html({
      position: ['50%', '50%'],
      html: '<div style="text-align: center;width:150px;height: 50px;">\n   <p style="font-size: 12px;color: #999;margin: 0" id="title"></p>\n   <p style="font-size: 18px;color: #343434;margin: 0;font-weight: bold;" id="money"></p>\n   </div>'
     });
     // 配置圖表顏色樣式和定位
     chart.interval().position('const*money').adjust('stack').color('type', ['#1890FF', '#13C2C2', '#2FC25B', '#FACC14']);
      //配置一些基本的文本信息及樣式
     chart.pieLabel({
      sidePadding: 30,
      activeShape: true,
      label1: function label1(data) {
       return {
        text: '¥' + data.money,
        fill: '#343434',
        fontWeight: 'bold'
       };
      },
      label2: function label2(data) {
       return {
        text: data.type,
        fill: '#999'
       };
      },
      //點擊事件
      onClick: function onClick(ev) {
       var data = ev.data;
       if (data) {
        $('#title').text(data.type);
        $('#money').text(data.money);
       }
      }
     });
     // 最后渲染即可
     chart.render();

    就這樣配置,就可以了,但是有個問題我們在vue中是不能直接這么寫的,所以我們需要把這些代碼定義在一個方法里放在methods對象里面,然后掛載時執行即可,效果圖如下:

    這里有個坑,就是我們用AntV F2的時候不能跟之前的習慣一樣直接放在mounted函數中執行,不然會造成圖表處空白,刷新一下才能好這種bug,出現這個問題的原因昨天下午想了很久沒想通沒有得到解決,早上來公司的時候突然恍然大悟:造成這種bug的原因其實很簡單,就是因為Ant F2是jquery方式寫的,并且還有操作DOM,我們直接在mounted上直接執行方法就會帶來一個問題就是js已經執行了,但是DOM元素還沒渲染完成,圖表沒有數據,所以才會空白,并且mounted方法是加載完成再次進入會存入緩存的,所以才會刷新一下才能好;我這里的解決方案是直接設置個定時器setTimeout,直接延遲1秒左右執行方式就可以解決;

    再簡單介紹一個折線圖的使用方法:

    HTML視圖層代碼:

     <div class="chart-wrapper">
      <canvas id="mountNode"></canvas>
     </div>

    js數據邏輯層代碼:

     //模擬數據
    var data = [{
      day: '周一',
      value: 300
     }, {
      day: '周二',
      value: 400
     }, {
      day: '周三',
      value: 350
     }, {
      day: '周四',
      value: 500
     }, {
      day: '周五',
      value: 490
     }, {
      day: '周六',
      value: 600
     }, {
      day: '周日',
      value: 900
     }];
      // 與上面的視圖層對應
     var chart = new F2.Chart({
      id: 'mountNode',
      pixelRatio: window.devicePixelRatio
     });
      //配置數據源
     chart.source(data, {、
      //value和day都是根據模擬數據的屬性來配置的,所以這里的value和day是可以更改的,具體根據后臺數據屬性來
      value: {
       tickCount: 5,
       min: 0
      },
      day: {
       range: [0, 1]
      }
     });
      // 配置文本提示信息以及觸發的方法
     chart.tooltip({
      showCrosshairs: true,
      showItemMarker: false,
      onShow: function onShow(ev) {
       var items = ev.items;
       items[0].name = null;
       items[0].value = '$ ' + items[0].value;
      }
     });
      //配置對應方式
     chart.axis('day', {
      label: function label(text, index, total) {
       var textCfg = {};
       if (index === 0) {
        textCfg.textAlign = 'left';
       } else if (index === total - 1) {
        textCfg.textAlign = 'right';
       }
       return textCfg;
      }
     });
      // 配置定位
     chart.line().position('day*value');
      //配置圖表樣式
     chart.point().position('day*value').style({
      stroke: '#fff',
      lineWidth: 1
     });
      //渲染
     chart.render();

    配置完之后我們就可以看到效果了,效果圖如下:

    最后我們來總結一下:

    (1) 首先我們在工作中肯定會碰到各種各樣的問題或者說bug,一定要理性的分析和解決,不能鉆進誤區不出來,如果多次嘗試還是沒辦法解決,那很大的概率就是你自己進入了誤區,這個時候就需要冷靜下來分析和思考,我遇到的就是典型的案例;

    (2)在使用這種可視化圖表的時候有些部分功能是不可使用的,比如環形圖的點擊展示圖例,這是因為AntV F2是用jquey實現的,你的項目中沒有引入的話是會報錯(“$ is not defined”),如果確實需要使用引入jquery即可

    (3)正是因為AntV F2是jquery開發的,需要操作DOM樹,所以有的時候會造成js已經執行了但是DOM元素還沒有渲染完成的情況,這個時候我們要想到換種思路比如setTimeout即可解決,考慮問題要多元化和全面,辦法總比困難多

    以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

    您可能感興趣的文章:

    • vue cli3 調用百度翻譯API翻譯頁面的實現示例
    • Vue使用Clipboard.JS在h5頁面中復制內容實例詳解
    • vue-cli3配置與跨域處理方法
    • Vue-cli3.X使用px2 rem遇到的問題及解決方法
    • Vue CLI2升級至Vue CLI3的方法步驟
    • vue-cli+axios實現文件上傳下載功能(下載接收后臺返回文件流)
    • 詳解vue-cli3多環境打包配置

    相關文章

    最新評論

    种子磁力搜索器