2024-06-21 如何在React中使用ECharts

要安装两个插件echarts和echarts-for-react，前者是一个js图标库，后者是对前者在react的封装，想要在react用echarts，就得装echarts-for-react这类的转换库。

yarn add echarts echarts-for-react

例子：

import React, { Component } from "react";
import ReactECharts from "echarts-for-react";

class Workbench extends Component {
  constructor() {
    super();
    this.state = {
      options: {
        title: {
          text: "在React引入ECharts",
        },
        tooltip: {},
        xAxis: {
          data: [
            "星期一",
            "星期二",
            "星期三",
            "星期四",
            "星期五",
            "星期六",
            "星期日",
          ],
        },
        yAxis: {},
        series: [
          {
            name: "使用量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20, 10],
          },
        ],
      },
    };
  }

  componentWillMount() {}

  componentWillUnmount() {}

  render() {
    return (
      <>
        <ReactECharts option={this.state.options} />
      </>
    );
  }
}

export default Workbench;

效果图：