BizCharts柱状图、折线图混合展示数据

代码

import React, { useState } from "react";
import {
  Axis,
  Chart,
  Tooltip,
  Interval,
  View,
  Line,
  Legend,
  Point,
  getTheme,
} from "bizcharts";

const theme = getTheme();

const data = [
  {
    name: "orderCount",
    date: "2021-07-23",
    value: 150,
  },
  {
    name: "refundCount",
    date: "2021-07-23",
    value: 131,
  },
  {
    name: "orderCount",
    date: "2021-07-24",
    value: 180,
  },
  {
    name: "refundCount",
    date: "2021-07-24",
    value: 121,
  },
];
const data2 = [
  {
    name: "orderAmount",
    date: "2021-07-24",
    amount: 1000,
  },
  {
    name: "refundAmount",
    date: "2021-07-24",
    amount: 888,
  },
  {
    name: "orderAmount",
    date: "2021-07-23",
    amount: 250,
  },
  {
    name: "refundAmount",
    date: "2021-07-23",
    amount: 46,
  },
];

const _aiChartDoc = {
  "order-count": "订单数",
  "refund-count": "退单数",
  "order-amount": "订单金额",
  "refund-amount": "退单金额",
};

const colors = theme.colors10;
/**
 * 图例开关状态
 */
let legendMap = {};
/**
 * 图表实例
 */

let chartIns;
function Grouped() {
  const formatTitle = (title) => {
    return title + "（数量看左侧Y轴；金额看右侧Y轴；）";
  };

  const formatName = (name) => {
    // 英换中
    let formatName = name;
    if (name == "orderCount") {
      formatName = _aiChartDoc["order-count"];
    } else if (name == "refundCount") {
      formatName = _aiChartDoc["refund-count"];
    } else if (name == "orderAmount") {
      formatName = _aiChartDoc["order-amount"];
    } else if (name == "refundAmount") {
      formatName = _aiChartDoc["refund-amount"];
    }
    return formatName;
  };

  const scale = {
    date: {
      sync: true,
    },
    amount: {
      min: 0,
      tickCount: 5,
      type: "linear-strict",
    },
    value: {
      min: 0,
      tickCount: 5,
      type: "linear-strict",
    },
    name: {
    	formatter: (name) => formatName(name),
    },
  };
  return (
    <Chart
      padding={[50, 60]}
      scale={scale}
      data={data}
      height={240}
      autoFit
      onGetG2Instance={(c) => (chartIns = c)}
    >
      <Tooltip shared crosshairs={{ type: "line" }} />
      {/* 分组柱状图 */}
      <Interval
        adjust={[
          {
            type: "dodge",
            marginRatio: 0,
          },
        ]}
        color={["name", colors]}
        position="date*value"
        tooltip={[
          "date*name*value",
          (date, name, value) => {
            return {
              title: formatTitle(date),
              name: formatName(name),
              value: value,
            };
          },
        ]}
      />
      <Axis name="date*value" position="left" />

      <View data={data2} scale={scale} padding={0}>
        <Axis name="amount" position="right" />
        {/*折线图*/}
        <Line
          position="date*amount"
          color={["name", colors]}
          size={3}
          shape="smooth"
        />
        <Point
          position="date*amount"
          color={["name", colors]}
          size={3}
          shape="circle"
        />
      </View>

      <Legend
        custom={true}
        items={[
          {
            name: "订单数",
            value: "orderCount",
            marker: {
              symbol: "square",
              style: { fill: colors[0] },
            },
          },
          {
            name: "退单数",
            value: "refundCount",
            marker: {
              symbol: "square",
              style: { fill: colors[1] },
            },
          },
          {
            name: "订单金额",
            value: "orderAmount",
            marker: {
              symbol: "hyphen",
              style: { stroke: colors[3], lineWidth: 2 },
            },
          },
          {
            name: "退单金额",
            value: "refundAmount",
            marker: {
              symbol: "hyphen",
              style: { stroke: colors[4], lineWidth: 2 },
            },
          },
        ]}
        onChange={(ev) => {
          const { item } = ev;
          const { value } = item;
          const checked = !item.unchecked;
          // 设置图例项状态
          legendMap[value] = checked;
          if (
            // value === "interactiveamount" ||
            value === "orderAmount" ||
            value === "refundAmount"
          ) {
            // 通过filter控制元素显示隐藏
            const view = chartIns.views[0];
            view.filter("name", (val) => {
              return legendMap[val] !== false;
            });
            // 重新渲染，触发filter
            view.render(true);
          } else {
            // 通过filter控制元素显示隐藏
            chartIns.filter("name", (val) => {
              return legendMap[val] !== false;
            });
            // 重新渲染，触发filter
            chartIns.render(true);
          }
        }}
      />
    </Chart>
  );
}

ReactDOM.render(<Grouped />, mountNode);

展示：

鼠标移入效果：