antv G2Plot折线图+多个堆叠柱状图

1.首先是组件的一个安装:

npm install @antv/g2plot --save

2.dom的准备

<template>
  <div class="one" id="my-chart" ref="chartRef"></div>
</template>

<style scoped>
.one {
  width: 500px;
  height: 200px;
  border: 1px solid red;
}
</style>

3.初始化图表,页面的引用(这个里是vue3写法,vue2或者React也可以参考,差别不大)

<script>

//(1.)引用组件
import { onMounted, ref, nextTick } from "vue";
import { Mix } from "@antv/g2plot";

export default {
  setup() {
    const chartRef = ref(null);

    onMounted(async () => {

// // (2.)避免dom问题,可自己优化
      await nextTick(); // 等待下一个DOM更新周期

      const data = [
        {
          product_type: "办公用品",
          sex: "男",
          order_amt: 8,
          product_sub_type: "橡皮擦",
        },
        {
          product_type: "办公用品",
          sex: "男",
          order_amt: 10,
          product_sub_type: "书架",
        },

        {
          product_type: "办公用品",
          sex: "女",
          order_amt: 21,
          product_sub_type: "橡皮擦",
        },
        {
          product_type: "办公用品",
          sex: "女",
          order_amt: 21,
          product_sub_type: "书架",
        },
        {
          product_type: "家电家具",
          sex: "男",
          order_amt: 13,
          product_sub_type: "洗衣机",
        },
        {
          product_type: "家电家具",
          sex: "女",
          order_amt: 2,
          product_sub_type: "洗衣机",
        },
        {
          product_type: "家电家具",
          sex: "男",
          order_amt: 5,
          product_sub_type: "微波炉",
        },

        {
          product_type: "家电家具",
          sex: "女",
          order_amt: 23,
          product_sub_type: "微波炉",
        },

        {
          product_type: "电子产品",
          sex: "男",
          order_amt: 33,
          product_sub_type: "电脑",
        },
        {
          product_type: "电子产品",
          sex: "女",
          order_amt: 4,
          product_sub_type: "电脑",
        },
        {
          product_type: "电子产品",
          sex: "女",
          order_amt: 23,
          product_sub_type: "switch",
        },
        {
          product_type: "电子产品",
          sex: "男",
          order_amt: 20.9,
          product_sub_type: "switch",
        },
      ];

      const plot = new Mix(chartRef.value, {
        appendPadding: 8,
        tooltip: { shared: true },
        syncViewPadding: true,
        plots: [
          // (1.)柱状图配置
          {
            type: "column",
            options: {
              data,
              xField: "product_type",
              yField: "order_amt",
              isGroup: true,
              isStack: true,
              seriesField: "product_sub_type",
              groupField: "sex",
              columnWidthRatio: 0.3, // 设置柱状图的宽度为分组区域的60%
              marginRatio: 0.5, // 设置两个柱子之间的间距,可以根据需要调整
              tooltip: {
                formatter: (datum) => ({
                  name: `${datum.product_sub_type} ${
                    datum.sex === "男" ? "👦" : "👧"
                  }`,
                  value: datum.order_amt,
                }),
              },

              // 设置柱状图的颜色
              color: ({ product_sub_type }) => {
                if (
                  product_sub_type === "橡皮擦" ||
                  product_sub_type === "洗衣机" ||
                  product_sub_type === "电脑"
                ) {
                  return "#4c81ae";
                } else if (
                  product_sub_type === "书架" ||
                  product_sub_type === "微波炉" ||
                  product_sub_type === "switch"
                ) {
                  return "#80b5c5";
                } // 继续添加其他产品子类型的颜色映射
              },
            },
          },
// (1.)折线图配置
          {
            type: "line",
            options: {
              data: [
                { xCategory: "A", value: 30 },
                { xCategory: "B", value: 35 },
                { xCategory: "C", value: 38 },
                { xCategory: "D", value: 42 },
                { xCategory: "E", value: 50 },
              ],
              xField: "xCategory",
              yField: "value",
              xAxis: false,
              yAxis: false,
              smooth: true,
              color: "#62d9ab",
              lineStyle: {
                lineWidth: 4, // 设置折线的粗细,单位为像素
              },
              point: {
                size: 3, // 设置节点的大小
                shape: "circle", // 设置节点的形状为圆形
                style: {
                  fill: "#fff", // 设置节点的填充颜色
                  stroke: "#62d9ab", // 设置节点的边框颜色
                  lineWidth: 2, // 设置节点的边框宽度
                },
              },
            },
          },
        ],
      });

      plot.render();
    });

    return { chartRef };
  },
};
</script>

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
AntV G2Plot 是一款基于 G2 的专业可视化图表库,支持绘制多种类型的图表,包括柱状图折线图等。要绘制分组柱状图折线图混合的图表,并且加上 slider,可以使用 G2Plot 的 GroupedColumnLine 组件。 首先,需要定义数据源,并指定数据字段的类型(例如 x 轴、y 轴等)。接着,可以使用 GroupedColumnLine 组件来绘制混合的图表。在 GroupedColumnLine 中,可以分别指定柱状图折线图的样式、颜色等属性,如下所示: ```javascript import { GroupedColumnLine } from '@antv/g2plot'; const data = [ { year: '2010', sales: 450, profit: 200 }, { year: '2011', sales: 560, profit: 230 }, { year: '2012', sales: 620, profit: 250 }, { year: '2013', sales: 750, profit: 300 }, { year: '2014', sales: 800, profit: 350 }, ]; const plot = new GroupedColumnLine('container', { data, xField: 'year', yField: ['sales', 'profit'], columnWidthRatio: 0.4, line: { style: { lineWidth: 2, stroke: '#fdae6b', }, }, slider: { start: 0.2, end: 0.8, }, }); plot.render(); ``` 在上面的代码中,我们定义了一个数据源,并指定了 x 轴和 y 轴的数据字段。接着,创建一个 GroupedColumnLine 实例,并指定容器,然后设置数据源和坐标轴的样式。最后,使用 line 属性设置折线图的样式,并使用 slider 属性加上滑动条。 需要注意的是,GroupedColumnLine 组件还支持多种混合图表类型,包括折线图柱状图、面积图等,可以根据自己的需求选择适合的图表类型。同时,通过调整 slider 的配置,可以改变滑动条的样式和位置。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值