12.1 VChart 插件机制

分数：5

12.2 VChart 插件功能源码详解

分数：5

代码入口: packages/vchart/src/plugin

解读重点：

插件的不同类型
插件机制与实现原理

插件系统概念

在VChart中提供了一系列插件扩展支持，本文只讲述插件系统的概念和简单用法示例，深入源码探索放在12.2章节分析并介绍；

VChart的插件不同类型

格式化插件

VChart中的格式化插件支持使用formatter更新数据展示样式，通过简单的配置丰富数据展示风格：

  const spec = {
    data: [
      {
        id: "barData",
        values: [
          { month: "Monday", sales: 22.324 },
          { month: "Tuesday", sales: 13.663 },
          { month: "Wednesday", sales: 25.342 },
          { month: "Thursday", sales: 29.3257 },
          { month: "Friday", sales: 12.999 },
        ],
      },
    ],
    type: "bar",
    xField: "month",
    yField: "sales",
    label: {
      visible: true,
      position: "top",
      formatter: "￥{sales:.2t}",
      **//格式化：销售额指定保留两位小数但不四舍五入**
    },
    legends: {
      visible: true,
    },
  };

格式化效果如图

media-query

media-query插件模块实现了媒体查询功能，为了方便理解，可以借助官网的一个demo来解释：

const getSpec = () => ({
  type: 'pie',
  data: [
    //...
  ],
  //query-media配置流程
  media: [
    {
      query: {
        maxHeight: 200
      },
      action: [
        {
          filterType: 'legends',
          filter: [{ orient: 'top' }, { orient: 'bottom' }],
          spec: { orient: 'left', padding: 0 }
        },
        {
          filterType: 'title',
          spec: { visible: false }
        },
        {
          filterType: 'chart',
          spec: { padding: 10 }
        }
      ]
    }
  ]
});

观察这个实例不难发现，在媒体查询的作用下，通过声明媒体查询逻辑，实现了图表在不同高度下动态的布局的样式变化：

当图表高度 ≤ 200px 时：
图例方向改为左侧，内边距为 0。
标题隐藏。
图表内边距为 10。
当图表高度 > 200px 时：
恢复默认样式。

简单的说，VChart的media-query插件支持我们触发动作（action）的情况下，执行对图表布局的重新排布，实现了图表的响应式设计，提升了用户体验和开发效率。

下一章节我将围绕插件的具体实现机制，做更深入的解读：

本文档由以下人员修正整理