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

Question

我正在使用 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",
              "#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();
}

Answer 1

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

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

How to dynamically emphasis a specific category on a bar chart with a background on echarts-for-react

reactjs

echarts