柱线混合图表echarts

最新推荐文章于 2023-12-20 07:53:58 发布

珎珎啊

最新推荐文章于 2023-12-20 07:53:58 发布

阅读量904

点赞数 1

分类专栏：代码前端文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/qq_43363773/article/details/127867879

版权

前端同时被 2 个专栏收录

113 篇文章 1 订阅

订阅专栏

代码

34 篇文章 0 订阅

订阅专栏

柱线混合图表 echarts官网

柱线混合图形效果

在这里插入图片描述

代码

 let chartConfig: any = {
      data: [chartData, chartData], //图表数据
      xField: 'keyName',// 横坐标取值字段
      yField: ['total', 'amount'], //条形图、折线图纵坐标取值字段
      height: 300, //图表高
      geometryOptions: [
        {
          geometry: 'column',
          maxColumnWidth: 24, //条形图宽度 
          color: '#43BDF0',
        },
        {
          geometry: 'line',
          color: '#4AC5C2',
          lineStyle: { // 折线图颜色
            lineWidth: 2,
          },
        },
      ],
      meta: {
        total: { // 条形图字段别名
          alias: '持仓余额',
        },
        amount: { // 折线图字段别名
          alias: '债券只数',
        },
      },
      xAxis: {
        label: {
          autoHide: false,
          autoRotate: true,
        },
      },
      yAxis: [
        {
          min: 0,
          label: {  // 条形图纵坐标自定义单位
            formatter: (val: any) =>
              `${String(val).includes('.') ? '' : val + '亿元'}`,
          },
        },
        {
          min: 0,
          label: { // 折线图纵坐标自定义单位
            formatter: (val: any) =>
              `${String(val).includes('.') ? '' : val + '只'}`,
          },
        },
      ],
      theme:
        theme === 'default' || theme === 'light'
          ? chartDefaultTheme
          : chartDarkTheme,
      tooltip: { //自定义提示
        customContent: (title: any, dat: any) => {
          return (
            <>
              <ul>
                <li className={styles.ulmt}>{title}按{selectType}统计</li>
                <li className={styles.ulmt}>
                  到期债券只数：{dat[0]?.data?.amount ? dat[0].data.amount : 0}只
                </li>
                <li className={styles.ulmt}>
                  到期债券余额：{dat[0]?.data?.amount ? dat[0].data.amount : 0}亿元
                </li>
                <li className={styles.ulmt}>
                  到期债券持仓金额：
                  {dat[0]?.data?.total ? dat[0].data.total : 0}亿元
                </li>
              </ul>
            </>
          );
        },
      },
    };
    
<DualAxes
   {...chartConfig}
   onReady={(plot) => {
     ref.current = plot;
   }}
 />