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

问题描述

我正在使用echarts，并且尝试通过添加背景颜色来强调“当前选择的条”。我希望能够单击其中一个栏，这样，月份将发生变化，并且背景色将应用在该月的末尾。

有道理吗？这是一个强调我想法的代码框： https://codesandbox.io/s/flamboyant-cloud-zy44j?file=/src/App.js

但是仔细阅读文档，似乎没有选择将backgroundColor添加到一个类别/栏中。我尝试使用其他系列，但是没有用。

我还附上图片，说明应该怎么做。

并附加代码。

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","#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
        },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,emphasis: {
            itemStyle: {
              opacity: 1
            }
          },tooltip: {},data: [
            8700,8700,10400,8699,11643.46,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();
}

解决方法

该库无法实现。您可以通过triggerEvent使x轴可点击，并对其进行处理；但是在“点击的”栏（或轴）上添加背景或任何其他样式需要专用的状态； clicked状态；这个图书馆没有的它监听点击事件，但不将其保留在单个元素上；因此您不能根据不存在的状态来设置样式；我正在考虑一种解决方法，可以通过在单击/悬停的条上应用css样式以某种方式伪造效果来实现，但是所有内容都呈现在画布中，因此没有选择余地；要么使用另一个库，要么自己编写图表抽屉组件，或者忘记基于单击的这种特定样式；

echarts echarts reactjs reactjs reactjs reactjs