antV G2 柱状图 示例

antV G2柱状图-渐变色

vue中使用antV G2 渐变色柱状图

话不多说，直接上代码

1. 引入Chart

import { Chart } from '@antv/g2';

2. 添加数据,这里按着实际数据设置，我这里通过name区分柱状图类别，月份为X轴数据。月平均温度为Y轴数据

const data = [
  { name: '石家庄', 月份: '一月', 月平均温度: 3.3 },
  { name: '石家庄', 月份: '二月', 月平均温度: 3.8 },
  { name: '石家庄', 月份: '三月', 月平均温度: 10.2 },
  { name: '石家庄', 月份: '四月', 月平均温度: 15.5 },
  { name: '石家庄', 月份: '五月', 月平均温度: 20.2 },
  { name: '石家庄', 月份: '六月', 月平均温度: 28.1 },
  { name: '石家庄', 月份: '七月', 月平均温度: 35.4 },
  { name: '石家庄', 月份: '八月', 月平均温度: 35.1 },

  { name: '天津', 月份: '一月', 月平均温度: 4.2 },
  { name: '天津', 月份: '二月', 月平均温度: 3.8 },
  { name: '天津', 月份: '三月', 月平均温度: 10.3 },
  { name: '天津', 月份: '四月', 月平均温度: 16.2 },
  { name: '天津', 月份: '五月', 月平均温度: 19.4 },
  { name: '天津', 月份: '六月', 月平均温度: 30.2 },
  { name: '天津', 月份: '七月', 月平均温度: 36.2 },
  { name: '天津', 月份: '八月', 月平均温度: 36.7 },
  
  { name: '上海', 月份: '一月', 月平均温度: 14.2 },
  { name: '上海', 月份: '二月', 月平均温度: 13.8 },
  { name: '上海', 月份: '三月', 月平均温度: 20.3 },
  { name: '上海', 月份: '四月', 月平均温度: 26.2 },
  { name: '上海', 月份: '五月', 月平均温度: 29.4 },
  { name: '上海', 月份: '六月', 月平均温度: 35.2 },
  { name: '上海', 月份: '七月', 月平均温度: 38.2 },
  { name: '上海', 月份: '八月', 月平均温度: 38.7 },

  { name: '苏州', 月份: '一月', 月平均温度: 16.2 },
  { name: '苏州', 月份: '二月', 月平均温度: 15.8 },
  { name: '苏州', 月份: '三月', 月平均温度: 21.3 },
  { name: '苏州', 月份: '四月', 月平均温度: 27.2 },
  { name: '苏州', 月份: '五月', 月平均温度: 32.4 },
  { name: '苏州', 月份: '六月', 月平均温度: 36.2 },
  { name: '苏州', 月份: '七月', 月平均温度: 39.2 },
  { name: '苏州', 月份: '八月', 月平均温度: 39.7 },
];

3. 新建new Chart实例，并将数据传入

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

4. 设置相关样式

chart.scale('月平均温度', {
  nice: true,
});
chart.tooltip({
  showMarkers: false,
  shared: true,
});

5. 添加柱状图相关样式

interval：为柱状图，

position：(X轴 * Y轴）pass:这里可以随意调换位置,

style：每个柱体的样式设置

color: 柱体颜色，可接受数组，也可以是单独颜色，或者是函数，针对特殊状况设置特殊颜色

adjust: 设置柱状图的堆叠样式， type参数:stack：堆叠 dodge:平铺 marginRatio:单项柱体之间的距离 取值0-1

chart
  .interval()
  .position('月份*月平均温度')
  .style({ radius: [10, 10, 0, 0] })
  .color('name',[
    'l(90) 0:#ffe60a 0.5:#ffef0a 1:#fffbd7', 
    'l(90) 0:35a110 0.5:#5cdb31 1:#e3ffda', 
    'l(90) 0:#154598 0.5:#5885d4 1:#c3d9ff',
    'l(90) 0:#b31043 0.5:#e16088 1:#fcc3d4'
  ])
  .adjust([
    {
      type: 'dodge',
      marginRatio: 0.1,
    },
  ]);

6. 样式设置完毕，渲染

chart.interaction('element-highlight-by-x');
// 这一步必不可少，不然图表不会被渲染出来
chart.render();

最后的最后展示效果