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

要安装两个插件echarts和echarts-for-react，前者是一个js图标库，后者是对前者封装的react组件库，该库可以帮助我们节省大量的dom操作事件，省却许多麻烦。

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;

效果图：

 ps：vue直接装echarts就行，然后照着echarts官网给的文档直接复用即可。

echarts官网：https://echarts.apache.org/zh/index.html

示例文档：https://echarts.apache.org/examples/zh/index.html