12-30 10:52 阅读 1408

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,         }}

作者：前端设计狮
链接：https://juejin.cn/post/7046949022128406542