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

npm install @antv/f2 --save

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

　//模擬數(shù)據(jù)，也可以根據(jù)ajax進(jìn)行請求后臺(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對應(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();

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

 //模擬數(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
 }];
　　// 與上面的視圖層對應(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;
  }
 });
　　//配置對應(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();