React中class方法和函数方法使用echarts图表库

cheung H

已于 2024-01-09 10:56:26 修改

阅读量500

点赞数 6

文章标签： react.js echarts javascript

于 2024-01-09 10:56:11 首次发布

本文链接：https://blog.csdn.net/cheung203/article/details/135474891

版权

本文介绍了如何在React应用中使用echarts库创建和渲染图表，包括class组件和函数组件两种方式，展示了初始化图表、配置x轴和y轴以及添加柱状图系列的过程。

摘要由CSDN通过智能技术生成

一、安装echarts包

npm install echarts

二、class方法

import React, { Component } from 'react'
import * as echarts from 'echarts';

export default class App extends Component {
  componentDidMount() {
    // 初始化图表
    const myChart = echarts.init(document.getElementById('yi'))

    // 配置选项
    const option = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar'
        }
      ]
    };
    
    // 使用配置项显示图表
    myChart.setOption(option)
  }

  render() {
    return (
      <div>
        <div id='yi' style={{width: '100%', height: '400px'}}></div>
      </div>
    )
  }
}

三、函数方法

import { useEffect } from 'react';
import * as echarts from 'echarts';

export default function App1() {
  useEffect(() => {
    // 初始化图表
    const yi = echarts.init(document.getElementById('yi'));

    // 配置选项
    const option = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar'
        }
      ]
    };

    // 使用配置项显示图表
    yi.setOption(option);
  }, []);

  return (
    <div id='yi' style={{ width: '100%', height: '400px' }}></div>
  );
}