@cainiaofe/cn-ui-charts/dist/storybook-docs/main.4e182e7b.iframe.bundle.js

菜鸟图表组件

window.storyCodes={"基础使用":'import { CnStatisticCard, CnTile } from "@alife/cn-ui-charts";\nimport { Col, Row, CnList, CnButton } from "@alife/cn-ui";\n\n// @ts-ignore\n\n// @ts-ignore\nconst CnListItem = CnList.Item;\nexport const App = () => (\n  <div>\n    <Row>\n      <Col span="12">\n        <CnStatisticCard\n          style={{\n            marginRight: "8px",\n          }}\n          icon={{\n            src: "https://img.alicdn.com/imgextra/i2/O1CN01MAkJYr1TN37iF51KW_!!6000000002369-2-tps-104-104.png",\n          }}\n          statistic={{\n            title: "当天订单收入",\n            tip: "每天 9 点产出 t-1 的数据",\n            value: 82236.32,\n            suffix: "元",\n            prefix: "测试",\n          }}\n        />\n      </Col>\n    </Row>\n  </div>\n);\n',"数据更新":'import { CnChart, CnTile } from "@alife/cn-ui-charts";\nimport { CnAsyncSelect, CnButton } from "@alife/cn-ui";\nimport "./index.scss";\nconst colorRange = [\n  "#355bd5",\n  "#79c8f9",\n  "#a12d7c",\n  "#eec31a",\n  "#0aceac",\n  "#258E4F",\n  "#E98C4A",\n  "#A12D9C",\n  "#F08E9B",\n  "#717498",\n];\nconst subColorRange = [\n  "#355BD5",\n  "#B4C2EF",\n  "#42B1F6",\n  "#A3D9FB",\n  "#0ACEAC",\n  "#96FAE9",\n  "#EEC31A",\n  "#F9E8A8",\n  "#A85BEF",\n  "#D9B8F8",\n];\nconst baseOptions = {\n  theme: "classic",\n  type: "interval",\n  autoFit: true,\n  coordinate: {\n    type: "theta",\n  },\n  scale: {\n    color: {\n      range: colorRange,\n    },\n  },\n  angleField: "value",\n  colorField: "name",\n  encode: {\n    y: "value",\n    color: "name",\n  },\n  transform: [\n    {\n      type: "stackY",\n    },\n  ],\n  style: {\n    stroke: "white",\n  },\n  animate: {\n    enter: {\n      type: "waveIn",\n    },\n  },\n  data: [\n    {\n      name: "图例1",\n      value: 37,\n    },\n    {\n      name: "图例2",\n      value: 49,\n    },\n    {\n      name: "图例3",\n      value: 14,\n    },\n    {\n      name: "图例4",\n      value: 20,\n    },\n    {\n      name: "图例5",\n      value: 12,\n    },\n  ],\n};\nconst multiOptions = {\n  ...baseOptions,\n  angleField: "amount",\n  colorField: "feeName",\n  encode: {\n    y: "amount",\n    color: "feeName",\n  },\n  data: [\n    {\n      feeName: "4PL",\n      ratio: "10%",\n      amount: 100,\n    },\n    {\n      feeName: "其他",\n      ratio: "20%",\n      amount: 200,\n    },\n    {\n      feeName: "国际",\n      ratio: "30%",\n      amount: 300,\n    },\n    {\n      feeName: "快速订单",\n      ratio: "10%",\n      amount: 100,\n    },\n    {\n      feeName: "猫超运营",\n      ratio: "10%",\n      amount: 100,\n    },\n    {\n      feeName: "裹裹",\n      ratio: "20%",\n      amount: 200,\n    },\n  ],\n};\nconst multiOptions2 = {\n  ...baseOptions,\n  angleField: "amount",\n  colorField: "feeName",\n  encode: {\n    y: "amount",\n    color: "feeName",\n  },\n  data: [\n    {\n      feeName: "4PL",\n      ratio: "60%",\n      amount: 60,\n    },\n    {\n      feeName: "其他",\n      ratio: "20%",\n      amount: 20,\n    },\n    {\n      feeName: "国际",\n      ratio: "10%",\n      amount: 10,\n    },\n    {\n      feeName: "快速订单",\n      ratio: "5%",\n      amount: 5,\n    },\n    {\n      feeName: "猫超运营",\n      ratio: "3%",\n      amount: 3,\n    },\n    {\n      feeName: "裹裹",\n      ratio: "2%",\n      amount: 2,\n    },\n  ],\n};\nexport const App = () => {\n  const [data, setData] = React.useState("1");\n  const data1 = [\n    {\n      name: "图例1",\n      value: 37,\n    },\n    {\n      name: "图例2",\n      value: 49,\n    },\n    {\n      name: "图例3",\n      value: 14,\n    },\n  ];\n  const data2 = [\n    {\n      name: "图例1",\n      value: 88,\n    },\n    {\n      name: "图例2",\n      value: 20,\n    },\n    {\n      name: "图例3",\n      value: 30,\n    },\n  ];\n  return (\n    <div className="container">\n      <CnTile className="storyTile" title="切换数据源查看数据更新效果">\n        <CnAsyncSelect\n          style={{\n            width: "200px",\n          }}\n          mode="single"\n          onChange={(val) => {\n            setData(val);\n          }}\n          hasClear\n          value={data}\n          dataSource={[\n            {\n              label: "数据1",\n              value: "1",\n            },\n            {\n              label: "数据2",\n              value: "2",\n            },\n          ]}\n        />\n        <CnChart\n          {...{\n            ...baseOptions,\n            legend: {\n              color: {\n                position: "right",\n                size: 100,\n              },\n            },\n            data: data === "1" ? data1 : data2,\n          }}\n        />\n      </CnTile>\n    </div>\n  );\n};\n',"展示数据标签":'import { CnChart } from "@alife/cn-ui-charts";\nimport { Row, CnAsyncSelect } from "@alife/cn-ui";\nimport dayjs from "dayjs";\nexport const App = () => {\n  const data = [\n    {\n      genre: "Sports",\n      sold: 22,\n    },\n    {\n      genre: "Strategy",\n      sold: 1,\n    },\n    {\n      genre: "Action",\n      sold: 33,\n    },\n    {\n      genre: "Shooter",\n      sold: 44,\n    },\n    {\n      genre: "Other",\n      sold: 55,\n    },\n  ];\n  return (\n    <div>\n      <Row>\n        <div\n          style={{\n            width: "100%",\n            height: 400,\n          }}\n        >\n          <CnChart\n            type="line"\n            autoFit\n            data={data}\n            encode={{\n              x: "genre",\n              y: "sold",\n            }}\n            labels={[\n              {\n                text: "sold",\n                transform: [\n                  {\n                    type: "overlapDodgeY",\n                  },\n                ],\n                style: {\n                  fontSize: 10,\n                },\n              },\n            ]}\n          />\n        </div>\n      </Row>\n    </div>\n  );\n};\n',"分组柱状图":'import { CnChart, CnTile, ChartProps } from "@alife/cn-ui-charts";\nimport { Row, CnAsyncSelect } from "@alife/cn-ui";\n\n// @ts-ignore\n\nimport { DualAxes, G2 } from "@antv/g2plot";\nconst { registerTheme } = G2;\nregisterTheme("custom-theme", {\n  colors10: ["#355BD5", "#79C8F9"],\n  colors20: [\n    "#025DF4",\n    "#DB6BCF",\n    "#2498D1",\n    "#BBBDE6",\n    "#4045B2",\n    "#21A97A",\n    "#FF745A",\n    "#007E99",\n    "#FFA8A8",\n    "#2391FF",\n    "#FFC328",\n    "#A0DC2C",\n    "#946DFF",\n    "#626681",\n    "#EB4185",\n    "#CD8150",\n    "#36BCCB",\n    "#327039",\n    "#803488",\n    "#83BC99",\n  ],\n});\nexport const App = () => {\n  const data = [\n    {\n      type: "a",\n      genre: "Sports",\n      sold: 275,\n    },\n    {\n      type: "a",\n      genre: "Strategy",\n      sold: 115,\n    },\n    {\n      type: "a",\n      genre: "Action",\n      sold: 120,\n    },\n    {\n      type: "a",\n      genre: "Shooter",\n      sold: 350,\n    },\n    {\n      type: "a",\n      genre: "Other",\n      sold: 150,\n    },\n    {\n      type: "b",\n      genre: "Sports",\n      sold: 22,\n    },\n    {\n      type: "b",\n      genre: "Strategy",\n      sold: 1,\n    },\n    {\n      type: "b",\n      genre: "Action",\n      sold: 33,\n    },\n    {\n      type: "b",\n      genre: "Shooter",\n      sold: 44,\n    },\n    {\n      type: "b",\n      genre: "Other",\n      sold: 55,\n    },\n  ];\n  return (\n    <div>\n      <Row>\n        <div\n          style={{\n            width: "100%",\n            height: 400,\n          }}\n        >\n          <CnChart\n            type="interval"\n            autoFit\n            data={data}\n            encode={{\n              x: "genre",\n              y: "sold",\n              series: "type",\n              color: "type",\n            }}\n            interaction={{\n              tooltip: {\n                shared: true,\n              },\n              elementHighlightByColor: {\n                background: true,\n              },\n            }}\n            style={{\n              maxWidth: 50,\n            }}\n            scale={{\n              color: {\n                range: ["#355BD5", "#79C8F9", "#A85BEF", "#EEC31A", "#EEC31A", "#0ACEAC"],\n              },\n            }}\n          />\n        </div>\n      </Row>\n    </div>\n  );\n};\n',"混合图":'import { CnChart, CnTile, ChartProps } from "@alife/cn-ui-charts";\nimport { Row, CnAsyncSelect } from "@alife/cn-ui";\n\n// @ts-ignore\n\nimport { DualAxes, G2 } from "@antv/g2plot";\nconst { registerTheme } = G2;\nregisterTheme("custom-theme", {\n  colors10: ["#355BD5", "#79C8F9"],\n  colors20: [\n    "#025DF4",\n    "#DB6BCF",\n    "#2498D1",\n    "#BBBDE6",\n    "#4045B2",\n    "#21A97A",\n    "#FF745A",\n    "#007E99",\n    "#FFA8A8",\n    "#2391FF",\n    "#FFC328",\n    "#A0DC2C",\n    "#946DFF",\n    "#626681",\n    "#EB4185",\n    "#CD8150",\n    "#36BCCB",\n    "#327039",\n    "#803488",\n    "#83BC99",\n  ],\n});\nexport const App = () => {\n  const chartRef = React.useRef<ChartProps>();\n  const data = [\n    {\n      type: "图例1",\n      genre: "Sports",\n      sold: 275,\n    },\n    {\n      type: "图例1",\n      genre: "Strategy",\n      sold: 115,\n    },\n    {\n      type: "图例1",\n      genre: "Action",\n      sold: 120,\n    },\n    {\n      type: "图例1",\n      genre: "Shooter",\n      sold: 22,\n    },\n    {\n      type: "图例1",\n      genre: "Shooter1",\n      sold: 11,\n    },\n    {\n      type: "图例1",\n      genre: "Shooter2",\n      sold: 33,\n    },\n    {\n      type: "图例1",\n      genre: "Shooter3",\n      sold: 11,\n    },\n    {\n      type: "图例2",\n      genre: "Sports",\n      sold: 22,\n    },\n    {\n      type: "图例2",\n      genre: "Strategy",\n      sold: 1,\n    },\n    {\n      type: "图例2",\n      genre: "Action",\n      sold: 33,\n    },\n    {\n      type: "图例2",\n      genre: "Shooter",\n      sold: 44,\n    },\n    {\n      type: "图例2",\n      genre: "Shooter1",\n      sold: 12,\n    },\n    {\n      type: "图例2",\n      genre: "Shooter2",\n      sold: 11,\n    },\n    {\n      type: "图例2",\n      genre: "Shooter3",\n      sold: 21,\n    },\n  ];\n  React.useEffect(() => {\n    console.log("chartRef", chartRef);\n    const chart = chartRef.current;\n    // 隐藏 tooltip 方法 chart.emit(\'tooltip:hide\');\n    // 隐藏 tooltip 方法 chart.emit(\'tooltip:hide\');\n    chart.on("element:click", (event: any) => {\n      console.log("hahhahha");\n      chart.emit("tooltip:show", {\n        data: {\n          data: event.data.data,\n        },\n      });\n      chart.emit("element:select", {\n        data: {\n          data: event.data.data,\n        },\n      });\n    });\n  }, []);\n  return (\n    <div>\n      <Row>\n        <CnTile\n          title="混合图"\n          style={{\n            width: "100%",\n          }}\n          size="small"\n        >\n          <div\n            style={{\n              width: "100%",\n              height: 400,\n            }}\n          >\n            <CnChart\n              autoFit\n              insetTop={20}\n              paddingRight={0}\n              paddingLeft={30}\n              ref={chartRef}\n              options={{\n                type: "view",\n                data,\n                encode: {\n                  color: "type",\n                },\n                legend: {\n                  color: {\n                    title: false,\n                    itemMarker: "square",\n                  },\n                  style: {\n                    height: 50,\n                  },\n                },\n                scale: {\n                  size: {\n                    range: [10],\n                  },\n                  color: {\n                    range: ["#355BD5", "#79C8F9", "#A85BEF", "#EEC31A", "#EEC31A", "#0ACEAC"],\n                  },\n                },\n                children: [\n                  {\n                    type: "interval",\n                    encode: {\n                      x: "genre",\n                      y: "sold",\n                    },\n                    data: data.filter((item) => item.type === "图例1"),\n                    axis: {\n                      y: {\n                        title: false,\n                      },\n                      x: {\n                        title: false,\n                        labelFormatter: (d) => `${d} \\n haahh`,\n                        /* style: {\n                    labelTransform: \'rotate(90)\',\n                  }, */\n                      },\n                    },\n\n                    style: {\n                      maxWidth: 50,\n                    },\n                    interaction: {\n                      elementHighlight: {\n                        background: true,\n                      },\n                      tooltip: {\n                        disableNative: true,\n                      },\n                    },\n                    labels: [\n                      {\n                        text: "sold",\n                        position: "inside",\n                        formatter: (v: string) => v,\n                        transform: [\n                          {\n                            type: "overlapDodgeY",\n                          },\n                        ],\n                        style: {\n                          fill: "#fff",\n                          fontSize: 12,\n                        },\n                      },\n                    ],\n                  },\n                  {\n                    type: "line",\n                    encode: {\n                      x: "genre",\n                      y: "sold",\n                      shape: "smooth",\n                    },\n                    data: data.filter((item) => item.type === "图例2"),\n                    scale: {\n                      y: {\n                        independent: true,\n                      },\n                    },\n                    axis: {\n                      y: {\n                        position: "right",\n                        grid: null,\n                        title: false,\n                      },\n                    },\n                  },\n                ],\n              }}\n            />\n          </div>\n        </CnTile>\n      </Row>\n    </div>\n  );\n};\n',"堆叠柱状图":'import { CnChart, CnTile, ChartProps } from "@alife/cn-ui-charts";\nimport { Row, CnAsyncSelect } from "@alife/cn-ui";\n\n// @ts-ignore\n\nimport { DualAxes, G2 } from "@antv/g2plot";\nconst { registerTheme } = G2;\nregisterTheme("custom-theme", {\n  colors10: ["#355BD5", "#79C8F9"],\n  colors20: [\n    "#025DF4",\n    "#DB6BCF",\n    "#2498D1",\n    "#BBBDE6",\n    "#4045B2",\n    "#21A97A",\n    "#FF745A",\n    "#007E99",\n    "#FFA8A8",\n    "#2391FF",\n    "#FFC328",\n    "#A0DC2C",\n    "#946DFF",\n    "#626681",\n    "#EB4185",\n    "#CD8150",\n    "#36BCCB",\n    "#327039",\n    "#803488",\n    "#83BC99",\n  ],\n});\nexport const App = () => {\n  const data = [\n    {\n      type: "图例1",\n      genre: "Sports",\n      sold: 275,\n    },\n    {\n      type: "图例1",\n      genre: "Strategy",\n      sold: 115,\n    },\n    {\n      type: "图例1",\n      genre: "Action",\n      sold: 120,\n    },\n    {\n      type: "图例1",\n      genre: "Shooter",\n      sold: 350,\n    },\n    {\n      type: "图例1",\n      genre: "Other",\n      sold: 150,\n    },\n    {\n      type: "图例2",\n      genre: "Sports",\n      sold: 88,\n    },\n    {\n      type: "图例2",\n      genre: "Strategy",\n      sold: 1,\n    },\n    {\n      type: "图例2",\n      genre: "Action",\n      sold: 33,\n    },\n    {\n      type: "图例2",\n      genre: "Shooter",\n      sold: 92,\n    },\n    {\n      type: "图例2",\n      genre: "Other",\n      sold: 123,\n    },\n  ];\n  return (\n    <CnTile>\n      <CnChart\n        containerStyle={{\n          height: 288,\n        }}\n        insetTop={50}\n        options={{\n          type: "interval",\n          theme: "classic",\n          autoFit: true,\n          data,\n          encode: {\n            x: "genre",\n            y: "sold",\n            color: "type",\n          },\n          transform: [\n            {\n              type: "stackY",\n            },\n            {\n              type: "sortX",\n              by: "y",\n              reverse: true,\n            },\n          ],\n          interaction: {\n            tooltip: {\n              shared: true,\n            },\n            elementHighlightByColor: {\n              background: true,\n            },\n          },\n          scale: {\n            color: {\n              range: ["#355BD5", "#79C8F9", "#A85BEF", "#EEC31A", "#EEC31A", "#0ACEAC"],\n            },\n          },\n          axis: {\n            x: {\n              title: "",\n            },\n            y: {\n              title: "",\n              labelFormatter: "~s",\n            },\n            color: {\n              title: "",\n              labelAutoHide: true,\n            },\n          },\n          style: {\n            maxWidth: 50,\n          },\n          labels: [\n            {\n              text: "sold",\n              position: "inside",\n              formatter: (v: string) => v,\n              transform: [\n                {\n                  type: "overlapDodgeY",\n                },\n              ],\n              style: {\n                // @ts-ignore\n                fill: (v) => {\n                  if (v.type === "图例2") {\n                    return "#000";\n                  } else {\n                    return "#fff";\n                  }\n                },\n                fontSize: 12,\n              },\n            },\n            {\n              // @ts-ignore\n              text: (item, index, data) => {\n                const { type } = item || {};\n                if (type === "图例2") {\n                  let total = 0;\n                  data?.forEach((item2) => {\n                    if (item2.genre === item.genre) {\n                      total += item2.sold;\n                    }\n                  });\n                  return total;\n                } else {\n                  return "";\n                }\n              },\n              position: "top",\n              style: {\n                dy: -16,\n              },\n            },\n          ],\n          legend: {\n            color: {\n              title: "",\n            },\n          },\n        }}\n      />\n    </CnTile>\n  );\n};\n',"点击触发tooltips":'import { CnChart, CnTile, ChartProps } from "@alife/cn-ui-charts";\nimport { Row, CnAsyncSelect } from "@alife/cn-ui";\n\n// @ts-ignore\n\nimport { DualAxes, G2 } from "@antv/g2plot";\nconst { registerTheme } = G2;\nregisterTheme("custom-theme", {\n  colors10: ["#355BD5", "#79C8F9"],\n  colors20: [\n    "#025DF4",\n    "#DB6BCF",\n    "#2498D1",\n    "#BBBDE6",\n    "#4045B2",\n    "#21A97A",\n    "#FF745A",\n    "#007E99",\n    "#FFA8A8",\n    "#2391FF",\n    "#FFC328",\n    "#A0DC2C",\n    "#946DFF",\n    "#626681",\n    "#EB4185",\n    "#CD8150",\n    "#36BCCB",\n    "#327039",\n    "#803488",\n    "#83BC99",\n  ],\n});\nexport const App = () => {\n  const chartRef = React.useRef<ChartProps>();\n  const data = [\n    {\n      genre: "Sports",\n      sold: 22,\n    },\n    {\n      genre: "Strategy",\n      sold: 1,\n    },\n    {\n      genre: "Action",\n      sold: 33,\n    },\n    {\n      genre: "Shooter",\n      sold: 44,\n    },\n    {\n      genre: "Other",\n      sold: 55,\n    },\n  ];\n  React.useEffect(() => {\n    const chart = chartRef.current;\n    // 隐藏 tooltip 方法 chart.emit(\'tooltip:hide\');\n    // 隐藏 tooltip 方法 chart.emit(\'tooltip:hide\');\n    chart.on("element:click", (event: any) => {\n      chart.emit("tooltip:show", {\n        data: {\n          data: event.data.data,\n        },\n      });\n    });\n    chart.on("plot:click", () => chart.emit("tooltip:hide"));\n  }, []);\n  return (\n    <div>\n      <Row>\n        <div\n          style={{\n            width: "100%",\n            height: 400,\n          }}\n        >\n          <CnChart\n            type="interval"\n            ref={chartRef}\n            autoFit\n            data={data}\n            encode={{\n              x: "genre",\n              y: "sold",\n              color: "#355BD5",\n            }}\n            style={{\n              maxWidth: 50,\n            }}\n            interaction={{\n              elementSelect: {\n                background: true,\n                single: true,\n              },\n              tooltip: {\n                disableNative: true,\n              },\n            }}\n          />\n        </div>\n      </Row>\n    </div>\n  );\n};\n',"条形图":'import { CnChart, CnTile, ChartProps } from "@alife/cn-ui-charts";\nimport { Row, CnAsyncSelect } from "@alife/cn-ui";\n\n// @ts-ignore\n\nimport { DualAxes, G2 } from "@antv/g2plot";\nconst { registerTheme } = G2;\nregisterTheme("custom-theme", {\n  colors10: ["#355BD5", "#79C8F9"],\n  colors20: [\n    "#025DF4",\n    "#DB6BCF",\n    "#2498D1",\n    "#BBBDE6",\n    "#4045B2",\n    "#21A97A",\n    "#FF745A",\n    "#007E99",\n    "#FFA8A8",\n    "#2391FF",\n    "#FFC328",\n    "#A0DC2C",\n    "#946DFF",\n    "#626681",\n    "#EB4185",\n    "#CD8150",\n    "#36BCCB",\n    "#327039",\n    "#803488",\n    "#83BC99",\n  ],\n});\nexport const App = () => {\n  const chartRef = React.useRef<ChartProps>();\n  const data = [\n    {\n      genre: "Sports",\n      sold: 22,\n    },\n    {\n      genre: "Strategy",\n      sold: 1,\n    },\n    {\n      genre: "Action",\n      sold: 33,\n    },\n    {\n      genre: "Shooter",\n      sold: 44,\n    },\n    {\n      genre: "Other",\n      sold: 55,\n    },\n  ];\n  React.useEffect(() => {\n    const chart = chartRef.current;\n    // 隐藏 tooltip 方法 chart.emit(\'tooltip:hide\');\n    // 隐藏 tooltip 方法 chart.emit(\'tooltip:hide\');\n    chart.on("element:click", (event: any) => {\n      chart.emit("tooltip:show", {\n        data: {\n          data: event.data.data,\n        },\n      });\n      chart.emit("element:select", {\n        data: {\n          data: event.data.data,\n        },\n      });\n    });\n  }, []);\n  return (\n    <div>\n      <Row>\n        <div\n          style={{\n            width: "100%",\n            height: 400,\n          }}\n        >\n          <CnChart\n            type="interval"\n            ref={chartRef}\n            autoFit\n            data={data}\n            transform={[\n              {\n                type: "sortX",\n                reverse: true,\n              },\n            ]}\n            coordinate={{\n              transform: [\n                {\n                  type: "transpose",\n                },\n              ],\n            }}\n            axis={{\n              y: {\n                labelFormatter: ".0%",\n              },\n            }}\n            encode={{\n              x: "genre",\n              y: "sold",\n              color: "#355BD5",\n            }}\n            style={{\n              maxWidth: 50,\n            }}\n            interaction={{\n              elementHighlight: {\n                background: true,\n              },\n            }}\n          />\n        </div>\n      </Row>\n    </div>\n  );\n};\n',"混合图点击触发tooltips":'import { CnChart, CnTile, ChartProps } from "@alife/cn-ui-charts";\nimport { Row, CnAsyncSelect } from "@alife/cn-ui";\n\n// @ts-ignore\n\nimport { DualAxes, G2 } from "@antv/g2plot";\nconst { registerTheme } = G2;\nregisterTheme("custom-theme", {\n  colors10: ["#355BD5", "#79C8F9"],\n  colors20: [\n    "#025DF4",\n    "#DB6BCF",\n    "#2498D1",\n    "#BBBDE6",\n    "#4045B2",\n    "#21A97A",\n    "#FF745A",\n    "#007E99",\n    "#FFA8A8",\n    "#2391FF",\n    "#FFC328",\n    "#A0DC2C",\n    "#946DFF",\n    "#626681",\n    "#EB4185",\n    "#CD8150",\n    "#36BCCB",\n    "#327039",\n    "#803488",\n    "#83BC99",\n  ],\n});\nexport const App = () => {\n  const ref = React.useRef();\n  const data = [\n    {\n      time: "2019-03",\n      value: 350,\n      count: 800,\n    },\n    {\n      time: "2019-04",\n      value: 900,\n      count: 600,\n    },\n    {\n      time: "2019-05",\n      value: 300,\n      count: 400,\n    },\n    {\n      time: "2019-06",\n      value: 450,\n      count: 380,\n    },\n    {\n      time: "2019-07",\n      value: 470,\n      count: 220,\n    },\n  ];\n  React.useEffect(() => {\n    if (!ref.current) {\n      return;\n    }\n    const dualAxes = new DualAxes(ref.current, {\n      data: [data, data],\n      autoFit: true,\n      xField: "time",\n      yField: ["value", "count"],\n      xAxis: {\n        label: {\n          style: {\n            fill: "#666",\n          },\n        },\n      },\n      yAxis: {\n        value: {\n          label: {\n            style: {\n              fill: "#666",\n            },\n          },\n        },\n        count: {\n          label: {\n            style: {\n              fill: "#666",\n            },\n          },\n        },\n      },\n      geometryOptions: [\n        {\n          geometry: "column",\n        },\n        {\n          geometry: "line",\n          lineStyle: {\n            lineWidth: 2,\n          },\n        },\n      ],\n      theme: "custom-theme",\n    });\n    dualAxes.render();\n    dualAxes.on("plot:click", (evt) => {\n      const { x, y } = evt;\n      console.log("evt", evt);\n      const tooltipItems = dualAxes.chart.getTooltipItems({\n        x,\n        y,\n      });\n      console.log("tooltipItems", tooltipItems);\n      if (tooltipItems.length) {\n        const tooltipData = {\n          items: tooltipItems,\n          x,\n          y,\n        };\n        // console.log(\'dualAxes.chart\', dualAxes.chart.showTooltip);\n        // console.log(\'dualAxes.chart\', dualAxes.chart.showTooltip);\n        dualAxes.chart.showTooltip(tooltipData);\n      }\n    });\n    dualAxes.on("plot:mousemove", () => {\n      dualAxes.chart.hideTooltip();\n    });\n  }, []);\n  return (\n    <div>\n      <Row>\n        <div\n          ref={ref}\n          style={{\n            width: "100%",\n            height: "100%",\n          }}\n        />\n      </Row>\n    </div>\n  );\n};\n',"柱状图选中":'import { CnChart, CnTile, ChartProps } from "@alife/cn-ui-charts";\nimport { Row, CnAsyncSelect } from "@alife/cn-ui";\n\n// @ts-ignore\n\nimport { DualAxes, G2 } from "@antv/g2plot";\nconst { registerTheme } = G2;\nregisterTheme("custom-theme", {\n  colors10: ["#355BD5", "#79C8F9"],\n  colors20: [\n    "#025DF4",\n    "#DB6BCF",\n    "#2498D1",\n    "#BBBDE6",\n    "#4045B2",\n    "#21A97A",\n    "#FF745A",\n    "#007E99",\n    "#FFA8A8",\n    "#2391FF",\n    "#FFC328",\n    "#A0DC2C",\n    "#946DFF",\n    "#626681",\n    "#EB4185",\n    "#CD8150",\n    "#36BCCB",\n    "#327039",\n    "#803488",\n    "#83BC99",\n  ],\n});\nexport const App = () => {\n  const chartRef = React.useRef<ChartProps>();\n  const data = [\n    {\n      genre: "Sports",\n      sold: 22,\n    },\n    {\n      genre: "Strategy",\n      sold: 1,\n    },\n    {\n      genre: "Action",\n      sold: 33,\n    },\n    {\n      genre: "Shooter",\n      sold: 44,\n    },\n    {\n      genre: "Other",\n      sold: 55,\n    },\n  ];\n  React.useEffect(() => {\n    if (chartRef.current) {\n      chartRef.current.interaction("elementSelect", true);\n      /* chartRef.current.state(\'selected\', { fill: \'orange\' }); */\n    }\n  }, []);\n  return (\n    <div>\n      <Row>\n        <div\n          style={{\n            width: "100%",\n            height: 400,\n          }}\n        >\n          <CnChart\n            autoFit\n            data={data}\n            ref={chartRef}\n            options={{\n              type: "interval",\n              encode: {\n                x: "genre",\n                y: "sold",\n                color: "#355BD5",\n              },\n              axis: {\n                x: {\n                  line: true,\n                  style: {\n                    lineLineWidth: 1,\n                    lineStroke: "#BFBFBF",\n                    labelStroke: "#666",\n                  },\n                },\n                y: {\n                  line: false,\n                  grid: true,\n                  style: {\n                    lineLineWidth: 1,\n                    lineStroke: "#BFBFBF",\n                    gridLineWidth: 1,\n                    gridStroke: "##E7E8ED",\n                    // labelFontSize: 12,\n                    labelStroke: "#666",\n                  },\n                },\n              },\n              /* scale: {\n            color: {\n              range: [\n                \'#355BD5\',\n                \'#79C8F9\',\n                \'#A85BEF\',\n                \'#EEC31A\',\n                \'#EEC31A\',\n                \'#0ACEAC\',\n              ],\n            },\n          }, */\n              style: {\n                maxWidth: 50,\n              },\n              tooltip: false,\n              legend: {\n                color: {\n                  style: {\n                    itemLabelFill: "#666",\n                  },\n                },\n              },\n              interaction: {\n                elementSelect: {\n                  background: true,\n                  single: true,\n                },\n              },\n            }}\n          />\n        </div>\n      </Row>\n    </div>\n  );\n};\n',"interval-demo--基础使用":{source:'import { CnChart, CnTile, ChartProps } from "@alife/cn-ui-charts";\nimport { Row, CnAsyncSelect } from "@alife/cn-ui";\n\n// @ts-ignore\n\nimport { DualAxes, G2 } from "@antv/g2plot";\nconst { registerTheme } = G2;\nregisterTheme("custom-theme", {\n  colors10: ["#355BD5", "#79C8F9"],\n  colors20: [\n    "#025DF4",\n    "#DB6BCF",\n    "#2498D1",\n    "#BBBDE6",\n    "#4045B2",\n    "#21A97A",\n    "#FF745A",\n    "#007E99",\n    "#FFA8A8",\n    "#2391FF",\n    "#FFC328",\n    "#A0DC2C",\n    "#946DFF",\n    "#626681",\n    "#EB4185",\n    "#CD8150",\n    "#36BCCB",\n    "#327039",\n    "#803488",\n    "#83BC99",\n  ],\n});\nexport const App = () => {\n  const data = [\n    {\n      genre: "Sports",\n      sold: 22,\n    },\n    {\n      genre: "Strategy",\n      sold: 1,\n    },\n    {\n      genre: "Action",\n      sold: 33,\n    },\n    {\n      genre: "Shooter",\n      sold: 44,\n    },\n    {\n      genre: "Other",\n      sold: 55,\n    },\n  ];\n  return (\n    <div>\n      <Row>\n        <div\n          style={{\n            width: "100%",\n            height: 400,\n          }}\n        >\n          <CnChart\n            autoFit\n            data={data}\n            options={{\n              type: "interval",\n              encode: {\n                x: "genre",\n                y: "sold",\n                color: "#355BD5",\n              },\n              scale: {\n                color: {\n                  range: ["#355BD5", "#79C8F9", "#A85BEF", "#EEC31A", "#EEC31A", "#0ACEAC"],\n                },\n              },\n              style: {\n                maxWidth: 50,\n              },\n            }}\n          />\n        </div>\n      </Row>\n    </div>\n  );\n};\n',extraFiles:{}},"interval-demo--数据更新":{source:'import { CnChart, CnTile, ChartProps } from "@alife/cn-ui-charts";\nimport { Row, CnAsyncSelect } from "@alife/cn-ui";\n\n// @ts-ignore\n\nimport { DualAxes, G2 } from "@antv/g2plot";\nconst { registerTheme } = G2;\nregisterTheme("custom-theme", {\n  colors10: ["#355BD5", "#79C8F9"],\n  colors20: [\n    "#025DF4",\n    "#DB6BCF",\n    "#2498D1",\n    "#BBBDE6",\n    "#4045B2",\n    "#21A97A",\n    "#FF745A",\n    "#007E99",\n    "#FFA8A8",\n    "#2391FF",\n    "#FFC328",\n    "#A0DC2C",\n    "#946DFF",\n    "#626681",\n    "#EB4185",\n    "#CD8150",\n    "#36BCCB",\n    "#327039",\n    "#803488",\n    "#83BC99",\n  ],\n});\nexport const App = () => {\n  const [data, setData] = React.useState("1");\n  const data1 = [\n    {\n      genre: "Sports",\n      sold: 22,\n    },\n    {\n      genre: "Strategy",\n      sold: 1,\n    },\n    {\n      genre: "Action",\n      sold: 33,\n    },\n    {\n      genre: "Shooter",\n      sold: 44,\n    },\n    {\n      genre: "Other",\n      sold: 55,\n    },\n  ];\n  const data2 = [\n    {\n      genre: "Sports",\n      sold: 20,\n    },\n    {\n      genre: "Strategy",\n      sold: 30,\n    },\n    {\n      genre: "Action",\n      sold: 60,\n    },\n    {\n      genre: "Shooter",\n      sold: 2,\n    },\n    {\n      genre: "Other",\n      sold: 88,\n    },\n  ];\n  return (\n    <div>\n      <Row>\n        <CnAsyncSelect\n          mode="single"\n          onChange={(val) => {\n            setData(val);\n          }}\n          hasClear\n          value={data}\n          dataSource={[\n            {\n              label: "数据1",\n              value: "1",\n            },\n            {\n              label: "数据2",\n              value: "2",\n            },\n          ]}\n        />\n      </Row>\n      <Row>\n        <div\n          style={{\n            width: "100%",\n            height: 400,\n          }}\n        >\n          <CnChart\n            type="interval"\n            autoFit\n            data={data === "1" ? data1 : data2}\n            encode={{\n              x: "genre",\n              y: "sold",\n              color: "#355BD5",\n            }}\n            scale={{\n              color: {\n                range: ["#355BD5", "#79C8F9", "#A85BEF", "#EEC31A", "#EEC31A", "#0ACEAC"],\n              },\n            }}\n            style={{\n              maxWidth: 50,\n            }}\n          />\n        </div>\n      </Row>\n    </div>\n  );\n};\n',extraFiles:{}},"interval-demo--展示数据标签":{source:'import { CnChart, CnTile, ChartProps } from "@alife/cn-ui-charts";\nimport { Row, CnAsyncSelect } from "@alife/cn-ui";\n\n// @ts-ignore\n\nimport { DualAxes, G2 } from "@antv/g2plot";\nconst { registerTheme } = G2;\nregisterTheme("custom-theme", {\n  colors10: ["#355BD5", "#79C8F9"],\n  colors20: [\n    "#025DF4",\n    "#DB6BCF",\n    "#2498D1",\n    "#BBBDE6",\n    "#4045B2",\n    "#21A97A",\n    "#FF745A",\n    "#007E99",\n    "#FFA8A8",\n    "#2391FF",\n    "#FFC328",\n    "#A0DC2C",\n    "#946DFF",\n    "#626681",\n    "#EB4185",\n    "#CD8150",\n    "#36BCCB",\n    "#327039",\n    "#803488",\n    "#83BC99",\n  ],\n});\nexport const App = () => {\n  const data = [\n    {\n      genre: "Sports",\n      sold: 22,\n    },\n    {\n      genre: "Strategy",\n      sold: 1,\n    },\n    {\n      genre: "Action",\n      sold: 33,\n    },\n    {\n      genre: "Shooter",\n      sold: 44,\n    },\n    {\n      genre: "Other",\n      sold: 55,\n    },\n  ];\n  return (\n    <div>\n      <Row>\n        <div\n          style={{\n            width: "100%",\n            height: 400,\n          }}\n        >\n          <CnChart\n            type="interval"\n            autoFit\n            data={data}\n            encode={{\n              x: "genre",\n              y: "sold",\n              color: "#355BD5",\n            }}\n            style={{\n              maxWidth: 50,\n            }}\n            labels={[\n              {\n                text: "sold",\n                transform: [\n                  {\n                    type: "contrastReverse",\n                  },\n                ],\n                position: "inside",\n                style: {\n                  fontSize: 10,\n                },\n              },\n            ]}\n          />\n        </div>\n      </Row>\n    </div>\n  );\n};\n',extraFiles:{}},"interval-demo--分组柱状图":{source:'import { CnChart, CnTile, ChartProps } from "@alife/cn-ui-charts";\nimport { Row, CnAsyncSelect } from "@alife/cn-ui";\n\n// @ts-ignore\n\nimport { DualAxes, G2 } from "@antv/g2plot";\nconst { registerTheme } = G2;\nregisterTheme("custom-theme", {\n  colors10: ["#355BD5", "#79C8F9"],\n  colors20: [\n    "#025DF4",\n    "#DB6BCF",\n    "#2498D1",\n    "#BBBDE6",\n    "#4045B2",\n    "#21A97A",\n    "#FF745A",\n    "#007E99",\n    "#FFA8A8",\n    "#2391FF",\n    "#FFC328",\n    "#A0DC2C",\n    "#946DFF",\n    "#626681",\n    "#EB4185",\n    "#CD8150",\n    "#36BCCB",\n    "#327039",\n    "#803488",\n    "#83BC99",\n  ],\n});\nexport const App = () => {\n  const data = [\n    {\n      type: "a",\n      genre: "Sports",\n      sold: 275,\n    },\n    {\n      type: "a",\n      genre: "Strategy",\n      sold: 115,\n    },\n    {\n      type: "a",\n      genre: "Action",\n      sold: 120,\n    },\n    {\n      type: "a",\n      genre: "Shooter",\n      sold: 350,\n    },\n    {\n      type: "a",\n      genre: "Other",\n      sold: 150,\n    },\n    {\n      type: "b",\n      genre: "Sports",\n      sold: 22,\n    },\n    {\n      type: "b",\n      genre: "Strategy",\n      sold: 1,\n    },\n    {\n      type: "b",\n      genre: "Action",\n      sold: 33,\n    },\n    {\n      type: "b",\n      genre: "Shooter",\n      sold: 44,\n    },\n    {\n      type: "b",\n      genre: "Other",\n      sold: 55,\n    },\n  ];\n  return (\n    <div>\n      <Row>\n        <div\n          style={{\n            width: "100%",\n            height: 400,\n          }}\n        >\n          <CnChart\n            type="interval"\n            autoFit\n            data={data}\n            encode={{\n              x: "genre",\n              y: "sold",\n              series: "type",\n              color: "type",\n            }}\n            interaction={{\n              tooltip: {\n                shared: true,\n              },\n              elementHighlightByColor: {\n                background: true,\n              },\n            }}\n            style={{\n              maxWidth: 50,\n            }}\n            scale={{\n              color: {\n                range: ["#355BD5", "#79C8F9", "#A85BEF", "#EEC31A", "#EEC31A", "#0ACEAC"],\n              },\n            }}\n          />\n        </div>\n      </Row>\n    </div>\n  );\n};\n',extraFiles:{}},"interval-demo--混合图":{source:'import { CnChart, CnTile, ChartProps } from "@alife/cn-ui-charts";\nimport { Row, CnAsyncSelect } from "@alife/cn-ui";\n\n// @ts-ignore\n\nimport { DualAxes, G2 } from "@antv/g2plot";\nconst { registerTheme } = G2;\nregisterTheme("custom-theme", {\n  colors10: ["#355BD5", "#79C8F9"],\n  colors20: [\n    "#025DF4",\n    "#DB6BCF",\n    "#2498D1",\n    "#BBBDE6",\n    "#4045B2",\n    "#21A97A",\n    "#FF745A",\n    "#007E99",\n    "#FFA8A8",\n    "#2391FF",\n    "#FFC328",\n    "#A0DC2C",\n    "#946DFF",\n    "#626681",\n    "#EB4185",\n    "#CD8150",\n    "#36BCCB",\n    "#327039",\n    "#803488",\n    "#83BC99",\n  ],\n});\nexport const App = () => {\n  const chartRef = React.useRef<ChartProps>();\n  const data = [\n    {\n      type: "图例1",\n      genre: "Sports",\n      sold: 275,\n    },\n    {\n      type: "图例1",\n      genre: "Strategy",\n      sold: 115,\n    },\n    {\n      type: "图例1",\n      genre: "Action",\n      sold: 120,\n    },\n    {\n      type: "图例1",\n      genre: "Shooter",\n      sold: 22,\n    },\n    {\n      type: "图例1",\n      genre: "Shooter1",\n      sold: 11,\n    },\n    {\n      type: "图例1",\n      genre: "Shooter2",\n      sold: 33,\n    },\n    {\n      type: "图例1",\n      genre: "Shooter3",\n      sold: 11,\n    },\n    {\n      type: "图例2",\n      genre: "Sports",\n      sold: 22,\n    },\n    {\n      type: "图例2",\n      genre: "Strategy",\n      sold: 1,\n    },\n    {\n      type: "图例2",\n      genre: "Action",\n      sold: 33,\n    },\n    {\n      type: "图例2",\n      genre: "Shooter",\n      sold: 44,\n    },\n    {\n      type: "图例2",\n      genre: "Shooter1",\n      sold: 12,\n    },\n    {\n      type: "图例2",\n      genre: "Shooter2",\n      sold: 11,\n    },\n    {\n      type: "图例2",\n      genre: "Shooter3",\n      sold: 21,\n    },\n  ];\n  React.useEffect(() => {\n    console.log("chartRef", chartRef);\n    const chart = chartRef.current;\n    // 隐藏 tooltip 方法 chart.emit(\'tooltip:hide\');\n    // 隐藏 tooltip 方法 chart.emit(\'tooltip:hide\');\n    chart.on("element:click", (event: any) => {\n      console.log("hahhahha");\n      chart.emit("tooltip:show", {\n        data: {\n          data: event.data.data,\n        },\n      });\n      chart.emit("element:select", {\n        data: {\n          data: event.data.data,\n        },\n      });\n    });\n  }, []);\n  return (\n    <div>\n      <Row>\n        <CnTile\n          title="混合图"\n          style={{\n            width: "100%",\n          }}\n          size="small"\n        >\n          <div\n            style={{\n              width: "100%",\n              height: 400,\n            }}\n          >\n            <CnChart\n              autoFit\n              insetTop={20}\n              paddingRight={0}\n              paddingLeft={30}\n              ref={chartRef}\n              options={{\n                type: "view",\n                data,\n                encode: {\n                  color: "type",\n                },\n                legend: {\n                  color: {\n                    title: false,\n                    itemMarker: "square",\n                  },\n                  style: {\n                    height: 50,\n                  },\n                },\n                scale: {\n                  size: {\n                    range: [10],\n                  },\n                  color: {\n                    range: ["#355BD5", "#79C8F9", "#A85BEF", "#EEC31A", "#EEC31A", "#0ACEAC"],\n                  },\n                },\n                children: [\n                  {\n                    type: "interval",\n                    encode: {\n                      x: "genre",\n                      y: "sold",\n                    },\n                    data: data.filter((item) => item.type === "图例1"),\n                    axis: {\n                      y: {\n                        title: false,\n                      },\n                      x: {\n                        title: false,\n                        labelFormatter: (d) => `${d} \\n haahh`,\n                        /* style: {\n                    labelTransform: \'rotate(90)\',\n                  }, */\n                      },\n                    },\n\n                    style: {\n                      maxWidth: 50,\n                    },\n                    interaction: {\n                      elementHighlight: {\n                        background: true,\n                      },\n                      tooltip: {\n                        disableNative: true,\n                      },\n                    },\n                    labels: [\n                      {\n                        text: "sold",\n                        position: "inside",\n                        formatter: (v: string) => v,\n                        transform: [\n                          {\n                            type: "overlapDodgeY",\n                          },\n                        ],\n                        style: {\n                          fill: "#fff",\n                          fontSize: 12,\n                        },\n                      },\n                    ],\n                  },\n                  {\n                    type: "line",\n                    encode: {\n                      x: "genre",\n                      y: "sold",\n                      shape: "smooth",\n                    },\n                    data: data.filter((item) => item.type === "图例2"),\n                    scale: {\n                      y: {\n                        independent: true,\n                      },\n                    },\n                    axis: {\n                      y: {\n                        position: "right",\n                        grid: null,\n                        title: false,\n                      },\n                    },\n                  },\n                ],\n              }}\n            />\n          </div>\n        </CnTile>\n      </Row>\n    </div>\n  );\n};\n',extraFiles:{}},"interval-demo--堆叠柱状图":{source:'import { CnChart, CnTile, ChartProps } from "@alife/cn-ui-charts";\nimport { Row, CnAsyncSelect } from "@alife/cn-ui";\n\n// @ts-ignore\n\nimport { DualAxes, G2 } from "@antv/g2plot";\nconst { registerTheme } = G2;\nregisterTheme("custom-theme", {\n  colors10: ["#355BD5", "#79C8F9"],\n  colors20: [\n    "#025DF4",\n    "#DB6BCF",\n    "#2498D1",\n    "#BBBDE6",\n    "#4045B2",\n    "#21A97A",\n    "#FF745A",\n    "#007E99",\n    "#FFA8A8",\n    "#2391FF",\n    "#FFC328",\n    "#A0DC2C",\n    "#946DFF",\n    "#626681",\n    "#EB4185",\n    "#CD8150",\n    "#36BCCB",\n    "#327039",\n    "#803488",\n    "#83BC99",\n  ],\n});\nexport const App = () => {\n  const data = [\n    {\n      type: "图例1",\n      genre: "Sports",\n      sold: 275,\n    },\n    {\n      type: "图例1",\n      genre: "Strategy",\n      sold: 115,\n    },\n    {\n      type: "图例1",\n      genre: "Action",\n      sold: 120,\n    },\n    {\n      type: "图例1",\n      genre: "Shooter",\n      sold: 350,\n    },\n    {\n      type: "图例1",\n      genre: "Other",\n      sold: 150,\n    },\n    {\n      type: "图例2",\n      genre: "Sports",\n      sold: 88,\n    },\n    {\n      type: "图例2",\n      genre: "Strategy",\n      sold: 1,\n    },\n    {\n      type: "图例2",\n      genre: "Action",\n      sold: 33,\n    },\n    {\n      type: "图例2",\n      genre: "Shooter",\n      sold: 92,\n    },\n    {\n      type: "图例2",\n      genre: "Other",\n      sold: 123,\n    },\n  ];\n  return (\n    <CnTile>\n      <CnChart\n        containerStyle={{\n          height: 288,\n        }}\n        insetTop={50}\n        options={{\n          type: "interval",\n          theme: "classic",\n          autoFit: true,\n          data,\n          encode: {\n            x: "genre",\n            y: "sold",\n            color: "type",\n          },\n          transform: [\n            {\n              type: "stackY",\n            },\n            {\n              type: "sortX",\n              by: "y",\n              reverse: true,\n            },\n          ],\n          interaction: {\n            tooltip: {\n              shared: true,\n            },\n            elementHighlightByColor: {\n              background: true,\n            },\n          },\n          scale: {\n            color: {\n              range: ["#355BD5", "#79C8F9", "#A85BEF", "#EEC31A", "#EEC31A", "#0ACEAC"],\n            },\n          },\n          axis: {\n            x: {\n              title: "",\n            },\n            y: {\n              title: "",\n              labelFormatter: "~s",\n            },\n            color: {\n              title: "",\n              labelAutoHide: true,\n            },\n          },\n          style: {\n            maxWidth: 50,\n          },\n          labels: [\n            {\n              text: "sold",\n              position: "inside",\n              formatter: (v: string) => v,\n              transform: [\n                {\n                  type: "overlapDodgeY",\n                },\n              ],\n              style: {\n                // @ts-ignore\n                fill: (v) => {\n                  if (v.type === "图例2") {\n                    return "#000";\n                  } else {\n                    return "#fff";\n                  }\n                },\n                fontSize: 12,\n              },\n            },\n            {\n              // @ts-ignore\n              text: (item, index, data) => {\n                const { type } = item || {};\n                if (type === "图例2") {\n                  let total = 0;\n                  data?.forEach((item2) => {\n                    if (item2.genre === item.genre) {\n                      total += item2.sold;\n                    }\n                  });\n                  return total;\n                } else {\n                  return "";\n                }\n              },\n              position: "top",\n              style: {\n                dy: -16,\n              },\n            },\n          ],\n          legend: {\n            color: {\n              title: "",\n            },\n          },\n        }}\n      />\n    </CnTile>\n  );\n};\n',extraFiles:{}},"interval-demo--点击触发tooltips":{source:'import { CnChart, CnTile, ChartProps } from "@alife/cn-ui-charts";\nimport { Row, CnAsyncSelect } from "@alife/cn-ui";\n\n// @ts-ignore\n\nimport { DualAxes, G2 } from "@antv/g2plot";\nconst { registerTheme } = G2;\nregisterTheme("custom-theme", {\n  colors10: ["#355BD5", "#79C8F9"],\n  colors20: [\n    "#025DF4",\n    "#DB6BCF",\n    "#2498D1",\n    "#BBBDE6",\n    "#4045B2",\n    "#21A97A",\n    "#FF745A",\n    "#007E99",\n    "#FFA8A8",\n    "#2391FF",\n    "#FFC328",\n    "#A0DC2C",\n    "#946DFF",\n    "#626681",\n    "#EB4185",\n    "#CD8150",\n    "#36BCCB",\n    "#327039",\n    "#803488",\n    "#83BC99",\n  ],\n});\nexport const App = () => {\n  const chartRef = React.useRef<ChartProps>();\n  const data = [\n    {\n      genre: "Sports",\n      sold: 22,\n    },\n    {\n      genre: "Strategy",\n      sold: 1,\n    },\n    {\n      genre: "Action",\n      sold: 33,\n    },\n    {\n      genre: "Shooter",\n      sold: 44,\n    },\n    {\n      genre: "Other",\n      sold: 55,\n    },\n  ];\n  React.useEffect(() => {\n    const chart = chartRef.current;\n    // 隐藏 tooltip 方法 chart.emit(\'tooltip:hide\');\n    // 隐藏 tooltip 方法 chart.emit(\'tooltip:hide\');\n    chart.on("element:click", (event: any) => {\n      chart.emit("tooltip:show", {\n        data: {\n          data: event.data.data,\n        },\n      });\n    });\n    chart.on("plot:click", () => chart.emit("tooltip:hide"));\n  }, []);\n  return (\n    <div>\n      <Row>\n        <div\n          style={{\n            width: "100%",\n            height: 400,\n          }}\n        >\n          <CnChart\n            type="interval"\n            ref={chartRef}\n            autoFit\n            data={data}\n            encode={{\n              x: "genre",\n              y: "sold",\n              color: "#355BD5",\n            }}\n            style={{\n              maxWidth: 50,\n            }}\n            interaction={{\n              elementSelect: {\n                backgroun