echarts與antV學習與實踐筆記

隨着可視化數據越來越流行，項目中時常用圖表來代替表格的顯示，這樣不僅更爲直觀，也可以將更多的數據簡潔的羅列出來。目前最流行的兩個畫圖工具，一個是echarts,一個是antV。在實際項目的開發中，這兩種工具都有使用，下面分別對這兩種的使用進行簡單的總結

一、兩者的選型

以目前的使用來看，兩者基本都能滿足普通的業務需求，實現上差不多。我自己在使用中，是一般會選擇echats,但是專門的移動端業務會選擇antv的F2。總的來說，有以下幾個大點：

1.成熟度

echats是非常老牌的庫了，文檔非常詳細，遇到問題的話網上搜到的解決辦法也會多一些

2.兼容移動端

antv下PC和H5是兩套引擎，PC是G2,另外有專門給移動端做的解決方案—F2，如果是僅在移動端顯示的圖表，用F2會更方便。echarts沒有區分移動和PC，可以寫一套統一的代碼，不過兼容可能有一些細節需要自己做一些處理。

3.入手速度

兩者文檔基本都比較全面。但是我自己個人感受來說，echarts文檔雖然全面，但是界面有點難看，可讀性比較差，一條條列出所有配置，有時候很難找到所需的內容；而antV的文檔頁面則非常直觀，且樣式好看，易上手。

4.默認樣式

antv的默認樣式比較好看

5.實際使用代碼編寫

1. echarts需要分別引入他的line模塊、pan模塊等用來畫線圖、餅圖等等，且它的很多配置在標籤上，代碼比較分散，但符合平時寫element組件的習慣。不足是如果想要一張圖顯示多種類型圖，會比較麻煩，如綜合顯示點圖、線圖、面積圖。
2. antv的F2是將數據綁定在一個canvas組件裏，標籤上沒有多餘配置，所有數據改動和配置綜合在一個方法裏，整體性更強，且綜合多圖比較方便靈活。

二、echarts

官網：https://www.echartsjs.com/zh/index.html
官方示例演示（可修改代碼實時查看效果）：https://www.echartsjs.com/examples/zh/index.html

1.使用

具體可查看官方文檔

2.示例（vue)-

基本是這種配置方式，data參數請忽略

<div>
<ve-line
:data="overviewData"
:settings="overviewParam.setting"
:extend="overviewParam.extend"
:colors="overviewParam.colors">
</ve-line>
</div>

...

import VeLine from 'v-charts/lib/line';

components: {
VeLine
}

computed: {
  overviewData () {
      const { surveryOverviewData } = this;
      let data = {
        columns: ['日期', '提交人次'],
        rows: surveryOverviewData.map(item => {
          return {
            '日期': utils.formatDate(new Date(item.gmtCreate), 'YYYY-MM-DD'),
            '提交人次': item.totalNum
          };
        })
      };
      return data;
    }
}
data () {
  return {
    overviewParam: {
        colors: ['#3E7FEE', '#77A5F3', '#F5A623'],
        extend: {
          // 系列列表
          series: {
            // 光滑曲線改爲折線
            smooth: false
          },
          // 圖例樣式
          legend: {
            // right: 200,
            textStyle: {
              color: '#34384B',
              fontSize: 14
            },
            icon: 'circle'
          },
          xAxis: {
            axisLine: {
              show: true,
              lineStyle: {
                color: '#3E7FEE'
              }
            },
            axisLabel: {
              color: '#8C9AB4',
              formatter: (value, index) => {
                return value.substr(5);
              }
            }
          },
          yAxis: {
            splitLine: {
              show: true,
              lineStyle: {
                color: '#E9EFFD',
                type: 'dashed'
              }
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              color: '#8C9AB4'
            }
          },
          // 彈窗自定義
          tooltip: {
            padding: 0,
            formatter: (params) => {
              if (!Array.isArray(params)) {
                params = [params];
              }
              let date = params[0].name || '';
              date = date.split('-');
              date = date[0] + '年' + date[1] + '月' + date[2] + '日';
        
              let str = `<div style="padding: 12px; border-radius:4px; background: #485465">
                        <div style="margin-bottom: 6px; color: #9AA2AB">${date}</div>`;
        
              params.forEach(item => {
                str += `<div>
                          <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color: ${item.color}"></span>
                          <span>${item.seriesName}: ${item.value[1]}</span>
                        </div>`;
              });
              str += '</div>';
              return str;
            }
          }
        },
        settings: {
        }
    },
  }
}

三、antv

AntV 是螞蟻金服全新一代數據可視化解決方案，我們常用到的，是其中的G2可視化引擎和F2移動可視化方案。
官網：https://antv.vision/zh

1.使用

具體可查看官方文檔

2.示例（vue）

<canvas id="myWeightChart" class="canvas" ref="myWeightChart" />
...
import F2 from '@antv/f2/lib/index'
...
// 在需要重新繪製圖片的時候，觸發事件，在事件內完成圖表各參數的定義
    drawPic (weightData) {
      // load the data
      chart.source(weightData, {
        measureTime: {
          ticks,
          range: [ 0.05, 0.95 ]
        },
        value: {
          nice: true,
          tickInterval: Math.ceil((max - min) / 4),
          min,
          max
          // tickCount: 4
        }
      })
      // Y軸樣式
      chart.axis('weight', {
        label: (text, index, total) => {
          const cfg = {
            fontSize: '20',
            fontFamily: 'dinbold',
            fontWeight: 'bold',
            fill: '#9FA5BA'
          }

          return cfg
        }
      })
      // 時間軸樣式
      chart.axis('measureTime', {
        label: (text, index, total) => {
          const cfg = {
            text: moment(ticks[index] * 1).format('MM.DD'),
            fontSize: '16',
            fontFamily: 'dinbold',
            fill: '#9FA5BA',
            fontWeight: '600'
          }
          // 第一個點左對齊，最後一個點右對齊，其餘居中，只有一個點時左對齊
          if (index === 0) {
            cfg.textAlign = 'start'
          }
          if (index > 0 && index === total - 1) {
            cfg.textAlign = 'end'
          }
          return cfg
        }
      })
      // 提示內容
      chart.tooltip({
        showCrosshairs: true, // 輔助線
        crosshairsStyle: {
          // 配置輔助線的樣式
          stroke: '#D0DFF7',
          lineWidth: 0
        },
        custom: true, // 允許自定義
        alwaysShow: true,
        triggerOn: ['touchstart'],
        background: {
          radius: 4,
          padding: [ 6, 10 ]
        }
      })
      // 面積樣式
      chart.area()
        .position('measureTime*weight')
        .color('l(90) 0:#3F86FF 1:#f7f7f7')
        .shape('smooth')
      // 線條樣式
      chart.line()
        .position('measureTime*weight')
        .color('#3F86FF')
        .size('4')
        .shape('smooth')
      chart.point()
        .position('measureTime*weight')
        .color('#fff')
        .style({
          lineWidth: 2,
          stroke: '#D0DFF7'
        })
        .size('4')
      chart.render()
      console.log('結束畫圖')
    }