Reactjs 如何动态强调条形图上的特定类别，并以echarts for react为背景

我正在使用echarts，我试图通过添加背景色来强调“当前拾取的条”。 我想能够点击其中一个栏，这样做的话，这个月就会改变，背景颜色将应用于该月的背面

有道理吗？ 下面是一个代码沙盒，它强调了我的想法：

但是，回顾一下文档，似乎没有选择只在一个类别/栏中添加背景色。我尝试使用另一个系列，但没有成功

我也附上图片来解释应该是什么

并附上代码

import React, { useState } from "react";
import "./styles.css";
import ReactEcharts from "echarts-for-react";
import moment from "moment";

export default function App() {
  const [month, setMonth] = useState(0);
  const onChartClick = (params) => {
    const monthClicked = moment().month(params.name).month();
    setMonth(monthClicked);
  };
  console.log(month);
  const renderChart = () => {
    const _onEvents = {
      click: onChartClick
    };
    const option = {
      maintainAspectRatio: false,
      tooltip: {
        trigger: "item"
      },
      grid: {
        left: "0px",
        right: "0px",
        bottom: "0px",
        top: "0px",
        containLabel: false,
        show: false
      },
      xAxis: {
        position: "top",
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          inside: true,
          color: "#74818f",
          fontFamily: "SegoePro-Regular",
          fontSize: 12
        },
        splitNumber: 1,
        splitLine: {
          show: true,
          lineStyle: {
            color: [
              "#ffffff",
              "#eaeaea",
              "#eaeaea",
              "#eaeaea",
              "#eaeaea",
              "#eaeaea",
              "#eaeaea",
              "#eaeaea",
              "#eaeaea",
              "#eaeaea",
              "#eaeaea",
              "#eaeaea",
              "#ffffff",
              "#ffffff",
              "#ffffff"
            ]
          }
        },
        type: "category",
        data: [
          "January",
          "February",
          "March",
          "April",
          "May",
          "June",
          "July",
          "August",
          "September",
          "October",
          "November",
          "December"
        ]
      },
      yAxis: {
        scale: true,
        type: "value",
        axisLabel: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLine: {
          show: false,
          onZero: false
        },
        splitLine: {
          show: false
        }
      },
      series: [
        {
          name: "Monthly Income",
          type: "bar",
          barWidth: "30%",
          barGap: "-20%",
          label: {
            show: true,
            position: "top",
            fontSize: 12,
            fontFamily: "SegoePro-Bold",
            color: "#3d70ff"
          },
          itemStyle: {
            opacity: 0.7,
            color: "#3d70ff"
          },
          emphasis: {
            itemStyle: {
              opacity: 1
            }
          },
          tooltip: {},
          data: [
            8700,
            8700,
            10400,
            8699,
            8699,
            8699,
            8699,
            8699,
            11643.46,
            0,
            0,
            0
          ],
          markArea: {
            silent: true,
            data: [
              [
                {
                  coord: [0, 0]
                },
                {
                  coord: [100, 100]
                }
              ]
            ],
            itemStyle: {
              color: "#f5f7fa"
            },
            label: {
              show: false
            }
          }
        }
      ]
    };
    const chartStyle = 280;
    return (
      <div id="chart_div">
        <div className="chart-wrapper">
          <ReactEcharts
            onEvents={_onEvents}
            option={option}
            style={{ height: chartStyle }}
          />
        </div>
      </div>
    );
  };
  return renderChart();
}

import React，{useState}来自“React”；
导入“/styles.css”；
从“echarts for react”导入ReactEcharts；
从“时刻”中导入时刻；
导出默认函数App（）{
const[month，setMonth]=useState（0）；
const onChartClick=（参数）=>{
const monthlicked=moment（）.month（params.name）.month（）；
设置月（月）；
};
控制台日志（月）；
常量renderChart=（）=>{
常数_onEvents={
点击：点击
};
常量选项={
MaintaintAspectRatio:false，
工具提示：{
触发器：“项目”
},
网格：{
左：“0px”，
右：“0px”，
底部：“0px”，
顶部：“0px”，
标签：假，
节目：假
},
xAxis：{
位置：“顶部”，
轴线：{
节目：假
},
axisTick：{
节目：假
},
axisLabel：{
里面:对,，
颜色：“74818f”，
fontFamily：“SegoePro常规版”，
字体大小：12
},
数目:1,，
分割线：{
秀：没错，
线型：{
颜色：[
“#ffffff”，
“#eaeaea”，
“#eaeaea”，
“#eaeaea”，
“#eaeaea”，
“#eaeaea”，
“#eaeaea”，
“#eaeaea”，
“#eaeaea”，
“#eaeaea”，
“#eaeaea”，
“#eaeaea”，
“#ffffff”，
“#ffffff”，
“#ffffff”
]
}
},
类型：“类别”，
数据：[
“一月”，
“二月”，
“三月”，
“四月”，
“五月”，
“六月”，
“七月”，
“八月”，
“9月”，
“十月”，
“11月”，
“12月”
]
},
亚克斯：{
比例：对，
类型：“值”，
axisLabel：{
节目：假
},
axisTick：{
节目：假
},
轴线：{
秀:假,，
onZero:false
},
分割线：{
节目：假
}
},
系列：[
{
姓名：“月收入”，
输入：“酒吧”，
条宽：“30%”，
barGap:“-20%”，
标签：{
秀：没错，
位置：“顶部”，
尺寸：12，
fontFamily：“SegoePro Bold”，
颜色：“3d70ff”
},
项目样式：{
不透明度：0.7，
颜色：“3d70ff”
},
重点：{
项目样式：{
不透明度：1
}
},
工具提示：{}，
数据：[
8700,
8700,
10400,
8699,
8699,
8699,
8699,
8699,
11643.46,
0,
0,
0
],
标记区域：{
沉默：是的，
数据：[
[
{
坐标：[0,0]
},
{
坐标：[100100]
}
]
],
项目样式：{
颜色：“f5f7fa”
},
标签：{
节目：假
}
}
}
]
};
常量chartStyle=280；
返回(
);
};
返回renderChart（）；
}

---

使用此库无法实现该要求。你可以通过点击x轴来做一些事情；但在“点击”的条（或轴）上添加背景或任何其他样式需要一个专用状态<代码>点击状态；这个图书馆没有；它侦听单击事件，但不将其保留在单个元素上；所以你不能基于一个不存在的状态来设计它；

---

我正在考虑一种解决方法，通过在点击/悬停的条上应用css样式来伪造效果，但所有内容都呈现在画布中，因此没有选项；要么使用另一个库，要么自己编写图表抽屉组件，要么忘记基于单击的特定样式

此库无法满足要求。你可以通过点击x轴来做一些事情；但在“点击”的条（或轴）上添加背景或任何其他样式需要一个专用状态<代码>点击状态；这个图书馆没有；它侦听单击事件，但不将其保留在单个元素上；所以你不能基于一个不存在的状态来设计它；

---

我正在考虑一种解决方法，通过在点击/悬停的条上应用css样式来伪造效果，但所有内容都呈现在画布中，因此没有选项；要么使用另一个库，要么自己编写图表抽屉组件，要么忘记基于单击的特定样式

不。。。我害怕得到那个答案。它让我同时感到快乐和悲伤。您是否认为尝试创建另一个系列，其中除“单击”栏外，所有值均为空，并为该系列添加背景？因为从我所读到的来看，这也是不可能实现的，因为所有的系列赛都会得到支持