Echarts 、Antv 数据可视化图表库， 实现图表渲染和数据交互

ECharts 和 AntV 都是功能强大的数据可视化图表库，可以用于创建各种类型的图表，例如折线图、柱状图、饼图、散点图等等。它们都提供了丰富的 API 和配置选项，可以满足不同场景下的定制需求。

ECharts

ECharts 是一个由百度开发的开源 JavaScript 图表库，具有以下特点：

• 支持多种图表类型
• 支持丰富的配置选项
• 支持主题定制
• 拥有活跃的社区

AntV

AntV 是一个由蚂蚁集团开发的开源数据可视化解决方案，具有以下特点：

• 提供丰富的图表组件
• 支持多平台渲染
• 支持与其他 AntV 产品无缝衔接
• 拥有完善的文档和教程

图表渲染

使用 ECharts 和 AntV 渲染图表都需要先定义图表配置，然后使用 API 将配置渲染到页面中。

ECharts

JavaScript

// 定义图表配置
var option = {
  title: {
    text: 'ECharts 示例'
  },
  xAxis: {
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {},
  series: [{
    type: 'line',
    data: [12, 14, 16, 18, 20, 22, 24]
  }]
};

// 将图表渲染到页面中
var myChart = echarts.init(document.getElementById('chart'));
myChart.setOption(option);

AntV

JavaScript

// 定义图表配置
const data = [
  { genre: 'Sports', sold: 200 },
  { genre: 'Music', sold: 180 },
  { genre: 'Movies', sold: 150 },
  { genre: 'Books', sold: 120 },
  { genre: 'Others', sold: 80 }
];

const chart = new G2.Chart({
  container: 'chart',
  forceFit: true,
  height: 500
});

chart.source(data, {
  genre: {
    alias: '类别',
  },
  sold: {
    alias: '销量',
  },
});

chart.interval().position('genre*sold');
chart.render();

数据交互

ECharts 和 AntV 都提供了丰富的数据交互功能，例如：

• 缩放
• 拖动
• 点击
• 悬停

ECharts

JavaScript

myChart.on('click', function(params) {
  console.log(params);
});

AntV

JavaScript

chart.on('click', (ev) => {
  console.log(ev.data);
});

        

总结

        ECharts 和 AntV 都是功能强大的数据可视化图表库，可以满足不同场景下的需求。选择哪个库取决于个人喜好和项目需求。