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

叶乘风發表於2024-06-21
ReactVueEcharts

要安裝兩個外掛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

相關文章