antv g2plot可视化图表在vue中的使用之三：图表皮肤主题theme配置

文章目录参考资料参考资料https://www.yuque.com/antv/g2-docs/tutorial-theme语雀AntV/G2 文档https://zhuanlan.zhihu.com/p/60812943知乎antv 修改主题背景色https://github.com/antvis/G2Plot/issues/1226

Darren.P

4432人浏览 · 2020-09-22 16:28:39

Darren.P · 2020-09-22 16:28:39 发布

文章目录

简介
修改图表皮肤主题theme
自定义背景颜色
全局主题配置源码common.ts
G2Plot 继承 G2 自定义主题机制
讨论
参考资料

简介

接前一篇文章，本文使用antv g2plot对vue中的图表皮肤主题theme进行配置。

修改图表皮肤主题theme

以折线图为例，原始代码为

//src/views/Line.vue
<template>
    <div id="linechart"></div>
</template>
<script>
import { Line } from '@antv/g2plot'
export default {
    mounted () {
    const data = [
      { year: '1991', value: 3 },
      { year: '1992', value: 4 },
      { year: '1993', value: 3.5 },
      { year: '1994', value: 5 },
      { year: '1995', value: 4.9 },
      { year: '1996', value: 6 },
      { year: '1997', value: 7 },
      { year: '1998', value: 9 },
      { year: '1999', value: 13 },
    ];

    const linePlot = new Line('linechart', {
      title: {
        visible: true,
        text: '折线图',
      },
      description: {
        visible: true,
        text: '用平滑的曲线代替折线。',
      },
      data,
      xField: 'year',
      yField: 'value',
    });

    linePlot.render();
  }
}
</script>

修改主题为暗黑风格，在参数中添加theme: 'dark’即可。参照文档https://github.com/antvis/G2Plot/blob/master/docs/common/theme.zh.md。主题支持 light、 dark 两种模式，当然也可以自己指定，默认使用 light。

//src/views/Line.vue
<template>
    <div id="linechart"></div>
</template>
<script>
import { Line } from '@antv/g2plot'
export default {
    mounted () {
    const data = [
      { year: '1991', value: 3 },
      { year: '1992', value: 4 },
      { year: '1993', value: 3.5 },
      { year: '1994', value: 5 },
      { year: '1995', value: 4.9 },
      { year: '1996', value: 6 },
      { year: '1997', value: 7 },
      { year: '1998', value: 9 },
      { year: '1999', value: 13 },
    ];

    const linePlot = new Line('linechart', {
      title: {
        visible: true,
        text: '折线图',
      },
      description: {
        visible: true,
        text: '用平滑的曲线代替折线。',
      },
      data,
      theme: 'dark', //设置为暗黑主题。主题支持 light、 dark 两种模式，当然也可以自己指定， 默认使用 light。
      xField: 'year',
      yField: 'value',
    });

    linePlot.render();
  }
}
</script>

或者将渲染图表放在函数showLine里：

//src/views/Line.vue
<template>
    <div id="linechart"></div>
</template>
<script>
import { Line } from '@antv/g2plot'
export default {
    data(){
      return { 
        linePlot: null,
        data: [{ year: '1991', value: 3 },
        { year: '1992', value: 4 },
        { year: '1993', value: 3.5 },
        { year: '1994', value: 5 },
        { year: '1995', value: 4.9 },
        { year: '1996', value: 6 },
        { year: '1997', value: 7 },
        { year: '1998', value: 9 },
        { year: '1999', value: 13 },
        ]
      }
    },
    mounted () {
      this.showLine();
    },
    methods: {
        showLine(){
          let data = this.data
          this.linePlot = new Line('linechart', {
            title: {
            visible: true,
            text: '折线图',
            },
            description: {
              visible: true,
              text: '用平滑的曲线代替折线。',
            },
            data,
            theme: 'dark',
            xField: 'year',
            yField: 'value',
          });

          this.linePlot.render();
        }
    }
}
</script>

暗黑风格效果如图：

在这里插入图片描述

自定义背景颜色

也可以对theme设置自己喜欢的颜色backgroundStyle：

//src/views/Line.vue
<template>
    <div id="linechart"></div>
</template>
<script>
import { Line } from '@antv/g2plot'
export default {
    mounted () {
    const data = [
      { year: '1991', value: 3 },
      { year: '1992', value: 4 },
      { year: '1993', value: 3.5 },
      { year: '1994', value: 5 },
      { year: '1995', value: 4.9 },
      { year: '1996', value: 6 },
      { year: '1997', value: 7 },
      { year: '1998', value: 9 },
      { year: '1999', value: 13 },
    ];

    const linePlot = new Line('linechart', {
      title: {
        visible: true,
        text: '折线图',
      },
      description: {
        visible: true,
        text: '用平滑的曲线代替折线。',
      },
      data,
      theme: {
        backgroundStyle: {
          fill: '#FFD6E7',
        },
      },
      xField: 'year',
      yField: 'value',
    });

    linePlot.render();
  }
}
</script>

效果如下：

在这里插入图片描述

全局主题配置源码common.ts

g2plot的github源码地址https://github.com/antvis/G2Plot/blob/master/src/adaptor/common.ts

//https://github.com/antvis/G2Plot/blob/master/src/adaptor/common.ts
/**
 * 设置全局主题配置
 * @param params
 */
export function theme<O extends Pick<Options, 'theme'>>(params: Params<O>): Params<O> {
  const { chart, options } = params;
  const { theme } = options;

  // 存在主题才设置主题
  if (theme) {
    chart.theme(theme);
  }
  return params;
}

在各个图表源码下引用了theme，如：

import { theme, scale, animation, annotation, tooltip } from '../../adaptor/common';

G2Plot 继承 G2 自定义主题机制

G2Plot 继承 G2 的自定义主题机制，见详细文档。
G2 提供了自定义主题机制以允许用户切换、定义图表主题。包括：

定义全新的主题结构
使用主题样式表，实现主题的快速定制

可参考https://github.com/antvis/G2Plot/tree/master/examples/general/theme
https://github.com/antvis/G2Plot/blob/master/examples/general/theme/API.zh.md

//G2自定义主题机制
import { registerTheme, Chart } from '@antv/g2';

// Step 1: 注册主题
registerTheme('newTheme', {
  defaultColor: 'red',
});

// Step 2: 使用
chart.theme('newTheme');
chart.render();

本文使用g2plot，参照github源码examples/general/theme/demo/register-theme.ts样例进行改造

//https://github.com/antvis/G2Plot/blob/master/examples/general/theme/demo/register-theme.ts
import { Pie, G2 } from '@antv/g2plot';

const { registerTheme } = G2;

registerTheme('custom-theme', {
  colors10: ['#FACDAA', '#F4A49E', '#EE7B91', '#E85285', '#BE408C', '#BE408C'],
  /** 20色板 */
  colors20: ['#FACDAA', '#F4A49E', '#EE7B91', '#E85285', '#BE408C', '#BE408C', '#942D93'],
});

const data = [
  { type: '分类一', value: 27 },
  { type: '分类二', value: 25 },
  { type: '分类三', value: 18 },
  { type: '分类四', value: 15 },
  { type: '分类五', value: 10 },
  { type: '其他', value: 5 },
];

const piePlot = new Pie('container', {
  appendPadding: 10,
  data,
  angleField: 'value',
  colorField: 'type',
  radius: 0.8,
  label: {},
  interactions: [{ type: 'element-active' }],
  theme: 'custom-theme',
});

piePlot.render();

改造如下，views文件夹下新建Pie.vue，并在路由文件index.js配置路由地址。

//src/views/Pie.vue改造前
<template>
    <div id="piechart"></div>
</template>
<script>
import { Pie } from '@antv/g2plot';

export default {
    mounted () {
    const data = [
      { type: '分类一', value: 27 },
      { type: '分类二', value: 25 },
      { type: '分类三', value: 18 },
      { type: '分类四', value: 15 },
      { type: '分类五', value: 10 },
      { type: '其他', value: 5 },
    ];
    const piePlot = new Pie('piechart', {
      appendPadding: 10,
      data,
      angleField: 'value',
      colorField: 'type',
      radius: 0.8,
      label: {},
      interactions: [{ type: 'element-active' }],
    });

    piePlot.render();

  }
}
</script>

改造前效果：

在这里插入图片描述
在上述代码中添加新的theme主题颜色配置：colors10: [‘blue’, ‘red’, ‘yellow’, ‘lightgreen’, ‘lightblue’, ‘pink’],

//src/views/Pie.vue改造后
<template>
    <div id="piechart"></div>
</template>
<script>
import { Pie } from '@antv/g2plot';

export default {
    mounted () {
    const data = [
      { type: '分类一', value: 27 },
      { type: '分类二', value: 25 },
      { type: '分类三', value: 18 },
      { type: '分类四', value: 15 },
      { type: '分类五', value: 10 },
      { type: '其他', value: 5 },
    ];
    const piePlot = new Pie('piechart', {
      appendPadding: 10,
      data,
      angleField: 'value',
      colorField: 'type',
      radius: 0.8,
      label: {},
      interactions: [{ type: 'element-active' }],
      theme: {
        colors10: ['blue', 'red', 'yellow', 'lightgreen', 'lightblue', 'pink'],
      },
    });

    piePlot.render();

  }
}
</script>

改造后效果：

在这里插入图片描述

讨论

关于dark主题的参数设置，在g2plot源码中未找到，如有知晓的同学还请在评论中留言告知。自定义机制中使用registerTheme未能成功，但是在g2plot-v2-beta中使用line.chart.theme(‘dark’);成功切换暗黑主题，详见
https://g2plot-v2-beta.antv.vision/zh/examples/line/basic#line插入

line.chart.theme('dark');

如本文对您有帮助，欢迎点赞或评论😄!!!

参考资料

https://www.yuque.com/antv/g2-docs/tutorial-theme (语雀AntV/G2 文档)
https://www.yuque.com/antv/g2plot/zok1sq (G2Plot 2.0 规划)
https://zhuanlan.zhihu.com/p/60812943 (知乎antv 修改主题背景色)
https://github.com/antvis/G2Plot/issues/1226
https://github.com/antvis/G2Plot/issues/444
https://github.com/antvis/G2Plot/issues/1199
https://github.com/antvis/G2Plot/pull/1143/commits/9085d4fd6a7f92de3c1c83cb73314d590a24a067
https://g2.antv.vision/en/docs/manual/developer/registertheme
https://github.com/antvis/G2Plot/pull/1143
https://github.com/antvis/G2Plot/issues/1546
https://github.com/antvis/G2Plot/pull/1143/files/5c88e2c1ae414a9e20abe5c217c8bbeabbca11fb

Vue

前往低代码交流专区

更多推荐

Vue里echarts根据页面大小动态调整/自适应

Vue

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^