xinkeaboard/xinkeaboard-admin/src/pages/statistics/bigscreen/components/EnquirePieChart.js

import React from "react";
import * as echarts from "echarts";
import styles from "../styles/enquire_pie_chart.less";

class Pie3DChart extends React.Component {
  constructor(props) {
    super(props);
    this.chartRef = React.createRef();
    this.chartInstance = null;
    this.endColor = [126, 206, 244]; // RGB 起点
    this.startColor = [15, 40, 99]; // RGB 终点
  }

  componentDidMount() {
    this.initChart();
    window.addEventListener("resize", this.chartResize);
  }

  componentDidUpdate(prevProps) {
    this.initChart();
  }

  componentWillUnmount() {
    if (this.chartInstance) {
      window.removeEventListener("resize", this.chartResize);
      this.chartInstance.dispose();
    }
  }

  colorScale(index, total) {
    const { startColor, endColor } = this;
    return `rgb(${Math.round(
      startColor[0] + ((endColor[0] - startColor[0]) * index) / (total - 1)
    )}, 
             ${Math.round(
               startColor[1] +
                 ((endColor[1] - startColor[1]) * index) / (total - 1)
             )}, 
             ${Math.round(
               startColor[2] +
                 ((endColor[2] - startColor[2]) * index) / (total - 1)
             )})`;
  }

  initChart() {
    if (!this.chartInstance) {
      this.chartInstance = echarts.init(this.chartRef.current);
    }

    const option = {
      color: this.props.data.map((item, index) =>
        this.colorScale(index, this.props.data.length)
      ), // 自动生成渐变颜色
      tooltip: {
        trigger: "item",
        textStyle: {
          fontSize: 25, // 设置字体大小
          fontWeight: "bold", // 可选：加粗
          // color: "#fff", // 可选：字体颜色
        },
      },
      legend: {
        // type: "scroll",   // 关键
        // itemGap: 15,
        //  width: "90%", // 控制整体宽度
        // height: 60,   // ⚡ 关键：高度大约容纳 3 行 (每行大约 18-20px)
        bottom: 0,
        //  width: "80%", // 限制宽度
        textStyle: { color: "#fff", fontSize: "12px" },
        formatter: function (name) {
          return name.length > 6 ? name.slice(0, 6) + "…" : name;
        }
      },
      grid: {
        left: "4%",
        right: "4%",
        bottom: "8%",
        top: "10%",
        containLabel: true,
      },
      series: [
        {
          //   name: 'Access From',
          type: "pie",
          // radius: ["50%", "80%"],
          center: ["50%", "35%"], // 默认是 ["50%", "50%"]，这里把 y 改成 35% 就能往上移
          avoidLabelOverlap: false,
          itemStyle: {
            // borderRadius: 10,
            // borderColor: "#fff",
            borderWidth: 2,
          },
          label: {
            show: false,
            position: "center",
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 25,
              fontWeight: "bold",
              color: "#fff",
            },
          },
          labelLine: {
            show: false,
          },
          data: this.props.data,
        },
      ],
    };

    this.chartInstance.setOption(option);
  }

  render() {
    return (
      <div ref={this.chartRef} style={{ width: "100%", height: "100%" }} />
    );
  }
}

export default Pie3DChart;