AntVF2和vue-cli構(gòu)建移動(dòng)端可視化視圖過程詳解

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

祁門網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)！從網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、成都響應(yīng)式網(wǎng)站建設(shè)公司等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營維護(hù)。創(chuàng)新互聯(lián)2013年開創(chuàng)至今到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)。

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

話不多說，直接進(jìn)入正題：

Antv F2官方比較友好，給我們提供了兩種方式方便我們使用，分別是cdn方式（引入在線資源 <script src="https://gw.alipayobjects.com/os/antv/assets/f2/3.3.8/f2.min.js"></script>）和npm安裝方式，因?yàn)轫?xiàng)目是vue-cli搭建的，同時(shí)CDN方式引入比較簡單，引入文件即可使用，所以在項(xiàng)目中使用的是npm安裝；

安裝命令（必須在項(xiàng)目對(duì)應(yīng)的文件夾路徑下運(yùn)行）：

npm install @antv/f2 --save

安裝完依賴之后接著就是需要引用到項(xiàng)目中，這里有個(gè)坑，官方提供的引用方式在vue里面是會(huì)報(bào)錯(cuò)的，官方提供的方式是下圖

如果在項(xiàng)目中是 import F2 from "@antv/f2" 這樣引用是會(huì)報(bào)語法錯(cuò)誤的，報(bào)錯(cuò)信息為：“chart.pieLabel is not a function”，所以安裝方式建議修改為

import F2 from "@antv/f2/lib/index-all"，這樣引用是可以正常使用不報(bào)錯(cuò)的，親測可用；

安裝完依賴和引用文件資源之后，就可以直接進(jìn)行圖表配置和開發(fā)了；我在項(xiàng)目中用到了環(huán)形圖，直接進(jìn)入環(huán)形圖Demo案例界面看看Demo，

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

首先使用的時(shí)候視圖層很簡單，一個(gè)大div包住canvas標(biāo)簽即可

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

接著就是數(shù)據(jù)邏輯層根據(jù)文檔介紹：

　//模擬數(shù)據(jù)，也可以根據(jù)ajax進(jìn)行請(qǐng)求后臺(tái)數(shù)據(jù) 
var data = [{
  const: 'const',
  type: '交通出行',
  money: 51.39
 }, {
  const: 'const',
  type: '飲食',
  money: 356.68
 }, {
  const: 'const',
  type: '生活日用',
  money: 20.00
 }, {
  const: 'const',
  type: '住房繳費(fèi)',
  money: 116.53
 }];
　　//配置視圖id與上面html對(duì)應(yīng)
 var chart = new F2.Chart({
  id: 'mountNode',
  pixelRatio: window.devicePixelRatio
 });
　　//定義渲染數(shù)據(jù)源
 chart.source(data);
　　//定義圖表類型樣式，其中radius和innerRadius可以更改環(huán)形的大小
 chart.coord('polar', {
  transposed: true,
  radius: 0.9,
  innerRadius: 0.5
 });
 chart.axis(false);
　//圖表圖例
 chart.legend(false);
　// 圖表提示信息
 chart.tooltip(false);
　//這里可以配置更改環(huán)形中心文字
 chart.guide().html({
  position: ['50%', '50%'],
  html: '<div >\n   <p  id="title"></p>\n   <p  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'
   };
  },
　　//點(diǎn)擊事件
  onClick: function onClick(ev) {
   var data = ev.data;
   if (data) {
    $('#title').text(data.type);
    $('#money').text(data.money);
   }
  }
 });
　// 最后渲染即可
 chart.render();

就這樣配置，就可以了，但是有個(gè)問題我們?cè)趘ue中是不能直接這么寫的，所以我們需要把這些代碼定義在一個(gè)方法里放在methods對(duì)象里面，然后掛載時(shí)執(zhí)行即可，效果圖如下：

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

再簡單介紹一個(gè)折線圖的使用方法：

HTML視圖層代碼：

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

js數(shù)據(jù)邏輯層代碼：

 //模擬數(shù)據(jù)
var data = [{
  day: '周一',
  value: 300
 }, {
  day: '周二',
  value: 400
 }, {
  day: '周三',
  value: 350
 }, {
  day: '周四',
  value: 500
 }, {
  day: '周五',
  value: 490
 }, {
  day: '周六',
  value: 600
 }, {
  day: '周日',
  value: 900
 }];
　　// 與上面的視圖層對(duì)應(yīng)
 var chart = new F2.Chart({
  id: 'mountNode',
  pixelRatio: window.devicePixelRatio
 });
　　//配置數(shù)據(jù)源
 chart.source(data, {、
　　//value和day都是根據(jù)模擬數(shù)據(jù)的屬性來配置的，所以這里的value和day是可以更改的，具體根據(jù)后臺(tái)數(shù)據(jù)屬性來
  value: {
   tickCount: 5,
   min: 0
  },
  day: {
   range: [0, 1]
  }
 });
　　// 配置文本提示信息以及觸發(fā)的方法
 chart.tooltip({
  showCrosshairs: true,
  showItemMarker: false,
  onShow: function onShow(ev) {
   var items = ev.items;
   items[0].name = null;
   items[0].value = '$ ' + items[0].value;
  }
 });
　　//配置對(duì)應(yīng)方式
 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();

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

最后我們來總結(jié)一下：

（1） 首先我們?cè)诠ぷ髦锌隙〞?huì)碰到各種各樣的問題或者說bug，一定要理性的分析和解決，不能鉆進(jìn)誤區(qū)不出來，如果多次嘗試還是沒辦法解決，那很大的概率就是你自己進(jìn)入了誤區(qū)，這個(gè)時(shí)候就需要冷靜下來分析和思考，我遇到的就是典型的案例；

（2）在使用這種可視化圖表的時(shí)候有些部分功能是不可使用的，比如環(huán)形圖的點(diǎn)擊展示圖例，這是因?yàn)锳ntV F2是用jquey實(shí)現(xiàn)的，你的項(xiàng)目中沒有引入的話是會(huì)報(bào)錯(cuò)（“$ is not defined”），如果確實(shí)需要使用引入jquery即可

（3）正是因?yàn)锳ntV F2是jquery開發(fā)的，需要操作DOM樹，所以有的時(shí)候會(huì)造成js已經(jīng)執(zhí)行了但是DOM元素還沒有渲染完成的情況，這個(gè)時(shí)候我們要想到換種思路比如setTimeout即可解決，考慮問題要多元化和全面，辦法總比困難多

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

網(wǎng)站名稱：AntVF2和vue-cli構(gòu)建移動(dòng)端可視化視圖過程詳解
標(biāo)題來源：http://muchs.cn/article0/gjsoio.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、網(wǎng)站改版、建站公司、微信小程序、自適應(yīng)網(wǎng)站、ChatGPT

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)