AntV-Charts基础图表配置及功能定义实现（持续更新）

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

配置来源

• 目前本人都在做基于前端的可视化图表大屏项目，所以会使用到各种图表，当前主要使用的是AntV-Charts。（当然，其实Echarts的图表基本配置也大同小异，大部分可以相同）。
• 这里主要分享一些基本的不常见的自定义功能的配置。虽然官方文档都会写，但是真正实践到我们自己的项目的时候，却总是发现运行不出来啊。
• 我会从各种图表的不常见配置写法，分享给大家
• 后续会将用到的其他配置不定期的加入当中，同时大家也需要参考官方文档，

1、 Column

更改图例的形状、位置、间距等

  const legend = {
    layout: 'horizontal',
    position: 'right-top',
    margin: [10, 10, 10, 0],
    marker: {
      symbol: 'circle',
    },
  };

更改图形标注位置，字体大小

  // 柱状图图例文字
  const label = {
    position: 'middle',
    style: {
      fill: '#FFFFFF',
      fontSize: 13,
      cursor: 'pointer',
    },
    rotate: 0,
  };

X轴点击事件注册

• 参考文档描述事件名称类型

        onReady={(plot) => {
              plot.on('axis-label:click', () => {
                modalRef.current.handleChangeVisible();
              });
            }}

柱状图根据变量进行颜色设置

  // 柱状图间距
  const marginRatio = [0.2];
  const setColor = {
    legend: false,  // 这里需要设置为false
    colorField: 'rank',
    // 部分图表使用 seriesField
    color: ({ rank }) => {
      if (rank === 1) {
        return '#fc7275';
      }
      return '#31bff5';
    },
  };

怎么去添加柱状图辅助标注

• 这个需求在柱状图上可能不太常见，就是在柱状图上显示相应数据的平均值或者其他什么数据。添加相应的辅助线标志。
• 当然，官方API有相应的API配置，这里主要分享实践，该怎么去应用到我们的代码上去。

这里的案例是展示两条平均线配置，详情可查看代码 代码数据具体看情况而定，

  annotations={[
                      {
                        type: 'line',
                        start: ['min', total[1].y],
                        end: ['max', total[1].y],
                        text: {
                          content: `${total[1].x}：${total[1].y}${titleUnit}`,
                          offsetY: -2,
                          offsetX: 700,
                          style: {
                            textAlign: 'left',
                            fontSize: 16,
                            fill: '#ba997e',
                            textBaseline: 'bottom',
                          },
                        },
                        style: {
                          stroke: '#ba997e',
                        },
                      },
                    ]}

2、 Line

折线图设置Y轴刻度

  yAxis={{
          min: 0,
         // minLimit: 10,
         tickCount: 7,
         nice: true,
        }}