前端可视化 - 前端可视化框架对比 G2 Echarts - 《vscode》

基本数据思想，绘图思想的区别
- 如画两条线时，g2是 chart.line().position('timestamp*avgTime').color('carrier') ，想像成在图上按这些值在 xy 轴上画上点，然后连成线，然后再根据 carrier 着色
- G2是一种画图的思维
- Echarts是对每条线配置的思维，要在series中配置两条配置，即对每条线有一个series配置
- 好处在于，G2很多都具有可推测性，掌握这种思想，就可以自己绘制出各种图形。
- echarts则是要在各种配置中寻找，如果缺少案例，就难以实现，或要尝试调试不少。
在复杂的需求实现上，需要找一个之前的案例
- G2很多都具有可推测性
- echarts则是要在各种配置中寻找，如果缺少案例，就难以实现，或要尝试调试不少。
案例区别，echarts倾向用配置数据，g2倾向原始的data
- echarts的案例，都是从配置方式都是从老的字段配置，不是其dataset配置作为第一案例。
- dataset中的案例，也主要使用csv格式的数据，而非日常数据库查出的数据格式。
- 所以使用dataset负责的案例时，echarts就比较耗时调试
核心问题，G2和ECharts其实不在一个平面上
- G2是一种更底层的，绘制的语法
- G2有更大的想象空间和自由度
文档查询能力

有个核心问题，G2和ECharts其实不在一个平面上，对比不太合适的。如果我们使用G2实现了组件，再通过json配置方式来调用组件，是否就又跟ECharts差不多了。可以看看g2plot。

https://echarts.apache.org/examples/zh/editor.html?c=dataset-series-layout-by&theme=lite

https://g2.antv.vision/zh/examples/interaction/component#legend-visible-filter

https://g2.antv.vision/zh/examples/column/dodge#grouped

以一些需求为例子

思考和对比

柱状图的分组
折线图的分组

比如要画一个时间线图，展示网络的性能，并且按运营商进行分组

即图表的横轴是时间点，纵轴是网络性能的数值，

如我们通常的数据，一般从数据库中获取到的

const data = [{
     timestamp: $timestamp1,
  carrier: '电信',
  avgTime: $timestamp1AvgTime,
  httpErrorRate: 0.002
}, {
     timestamp: $timestamp1,
  carrier: '移动',
  avgTime: 500,
  httpErrorRate: 0.001
}, {
     timestamp: $timestamp2 
}]

g2的实现，g2中有一个DataSet可以做数据的转换


const chart = new Chart({
   container: 'container',
   autoFit: true,
   height: 500,
 });
chart.data(data);
// 如何绘制点，横轴
chart.line().position('timestamp*avgTime').color('carrier');

echarts的实现

1 对data做处理，转换为echarts需要的配置数据
{
  xAxis: {
       type: 'category',
    data: [timestamp1, timestamp2]
  },
  legend: {
    data: ['电信', '移动']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
       data: [$timestamp1TelecomAvgTime, $timestamp2TelecomAvgTime,],
    type: 'line',
    name: '电信'
  }, {
       data: [$timestamp1MobileAvgTime, $timestamp2MobilAvgTime],
    type: 'line',
    name: '移动'
  }]
}

从日常比较重要的场景，重度可视化需求，想对图表做统一的封装，接受一定的数据和参数配置，可以渲染出不同的图表。

	echarts	g2
数据集的处理，图形配置
图形的丰富度
功能的完整度
上手程度
API的易查询
可扩展，可编程能力

Echarts介绍

BizCharts等React组件系

CloudCharts 阿里云可视化配置

开眼界！阿里用这样的组件开发大屏（一）不少评论值得看，没什么内容
开眼界！阿里用这样的组件开发大屏（二）不少评论值得看，
开眼界！阿里用这样的组件开发大屏（三）不少评论值得看，低代码方案

折线图 - 可视化编辑 | Cloud Charts 图表库

一些重要场景的实现对比

基础的配置

常用的部分

数据的分组
添加标记
tooltip定制

高级的部分

图表联动

图表联动怎么做？G2Plot 多图层图表联手自定义交互来帮你 👏

BI，低代码场景，拖拽

现在出现了很多的数据BI平台，可视化搭建平台，如sugar，这里面就设计到

从零开发一款可视化大屏制作平台

上手简单和灵活扩展

技术选型

如何评价蚂蚁金服新一代数据可视化引擎 G2 ？ - 海蓝的回答 - 知乎中的回答

所以从技术选型的角度来看:

团队没有可视化基础,但是有普通的图表需求,那么 Echarts 猛糙快,什么数据往里面塞就行了,
团队是专业可视化团队,可视化需求千变万化,当然也不仅仅限于图表这种需求了,用d3,没有d3干不了的.
团队有一定的可视化基础或者有专业开发者坐镇,而Echarts 明显满足不了图表需求,需要定制图表,用g2,就是为你们准备的.

前端可视化框架对比 G2 Echarts

总览

信息源

可视化语法 可视化发展

G2和G2Plot

G2和Echarts的对比