Блог

Я использую электронные диаграммы и пытаюсь выделить «текущую выбранную панель», добавив цвет фона. Я хочу иметь возможность щелкнуть по одному из столбцов, и при этом месяц изменится, а цвет фона будет применен к концу этого месяца.

Имеет смысл? Вот codesandbox, который подчеркивает мою идею: 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();
}
  

это требование недостижимо для этой библиотеки. вы можете сделать ось x доступной для кликов triggerEvent и что-то с ней сделать; но для добавления фона или любого другого стиля на «щелкнутую» панель (или ось) требуется выделенное состояние; clicked состояние; которого нет в этой библиотеке; он прослушивает события щелчка, но не сохраняет его на отдельных элементах; таким образом, вы не можете стилизовать ее на основе состояния, которого не существует; Я думал об обходном пути, чтобы это произошло, применяя стили css к щелкающим / зависшим полосам, чтобы как-то подделать эффект, но все содержимое отображается внутри холста, поэтому выбора не остается; либо используйте другую библиотекуили напишите компонент ящика диаграммы самостоятельно или забудьте об этом конкретном стиле, основанном на щелчке;