阿里AntV-G2plit绘制双轴数据表

这是我参与8月更文挑战的第3天，活动详情查看：8月更文挑战

vue项目中如何使用AntV-G2plit绘制工具, G2Plot 是一套简单、易用、并具备一定扩展能力和组合能力的统计图表库，基于图形语法理论搭建而成，"G2Plot"中的 G2 即意指图形语法 (the Gramma of Graphics)，同时也致敬了 ggplot2。

1.原本的g2的双轴线图表实例：

import { DualAxes } from '@antv/g2plot';
const data = [
{ year: '1991', value: 3, count: 10 },
{ year: '1992', value: 4, count: 4 },
{ year: '1993', value: 3.5, count: 5 },
{ year: '1994', value: 5, count: 5 },
{ year: '1995', value: 4.9, count: 4.9 },
{ year: '1996', value: 6, count: 35 },
{ year: '1997', value: 7, count: 7 },
{ year: '1998', value: 9, count: 1 },
{ year: '1999', value: 13, count: 20 },
];
const dualAxes = new DualAxes('container', {
     data: [data, data],
     xField: 'year',
     yField: ['value', 'count'],
     geometryOptions: [
         {
           geometry: 'line',
           color: '#5B8FF9',
         },
         {
           geometry: 'line',
           color: '#5AD8A6',
         },
     ],
});
dualAxes.render();

这个案例有个问题，就是他的数据展示是英文名，是个很头疼的问题，你也不可能要求后端下发数据用中文做key，这样问题更大，所以，经过尝试和改造，我发现了一种简单的数据结构可以实现数据label展示的是中文名称

2.改造后

1.组件html中定义绘制容器

<div id="trend" style="height:240px;padding:10px 32px;"></div>

2.js中定义绘制的数据结构

//data数据中定义数据结构，模拟接口下发数据
data1: [//左轴数据
    { year: "1991", type: '点击', count: 10 },
    { year: "1992", type: '点击', count: 4 },
    { year: "1993", type: '点击', count: 5 },
    { year: "1994", type: '点击', count: 5 },
],
data2: [//右轴数据
    { year: "1991", type: '曝光', value: 3},
    { year: "1992", type: '曝光', value: 6 },
    { year: "1993", type: '曝光', value: 3.5 },
    { year: "1994", type: '曝光', value: 9 },
],
//在method中定义执行函数，一般该函数会在mounted生命周期阶段执行绘制
initchart() {
   let option = {
      data: [this.data1, this.data2],
      xField: "year",
      yField: ["count", "value"],
      geometryOptions: [
         {//两条折线的参数配置
           geometry: "line",
           seriesField: 'type',
           color: "#5B8FF9",
         },
         {
           geometry: "line",
           seriesField: 'type',
           color: "#5AD8A6",
         },
       ],
   };
   //G2这个绘制工具相比较百度的echarts有个简单的地方就是不用单独去获取页面元素
   let myChart = new DualAxes("trend", option);
    myChart.render();
},

3.改造数据后绘制效果

3.G2操作指南：

1.可以脚本直接引入运用也可安装依赖包运用

<!-- 引入在线资源 -->
<script type="text/javascript"   src="https://unpkg.com/@antv/g2plot@latest/dist/g2plot.min.js"></script>
<script>
  const { Line } = G2Plot;
</script>

或者

// 推荐用法
npm install @antv/g2plot --save

//成功安装完成之后，即可使用 `import` 或 `require` 进行引用：

import { Line } from '@antv/g2plot';

2.项目经验总结

如果公司没有特殊项目要求，建议还是用百度开源的echarts，简单实用，就完全可以避免今天我遇到的这个数据名称的问题，因为他可以自己定义名称，即使你下发给我的是英文key，网上用例也多，出了问题，也好有参考，我用G2是阿里项目要求，不得已，出了问题只能自己看文档，自己测试，各种调试，网上的案例都很少，一旦遇到问题，解决起来很浪费时间。 不过也看个人喜好，也都只是一些建议，我的想法也不一定完全对！