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 = `
${date}
`; params.forEach(item => { str += `
${item.color}"> ${item.seriesName}: ${item.value[1]}
`
; }); str += '
'
; 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('结束画图')
    }

你可能感兴趣的:(【前端】工具类,javascript,数据可视化)