React中使用echarts 5.0

最新推荐文章于 2024-07-25 18:06:29 发布

土匪丁的窝子

最新推荐文章于 2024-07-25 18:06:29 发布

阅读量1.8k

点赞数 1

分类专栏： react 文章标签： react

本文链接：https://blog.csdn.net/zjw0021/article/details/113830669

版权

本文介绍了如何在React应用中使用ECharts 5.0版本。通过下载ECharts库，参照官方文档的完整代码示例，在组件的componentDidMount生命周期方法中初始化图表，配置项可根据需求从官网获取。只需简单几步，就能在React项目中成功集成并运行ECharts图表。

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

react中使用echarts和vue中差不多

首先下载echarts

npm install echarts --save

我这里下载的是5.0版本的

按照官网的完整代码提示复制下来就可以了

在componentDidMount初始图表，配置项官网都有介绍

代码可以直接使用

import React, { Component } from 'react'

import * as echarts from 'echarts/core';
import { GridComponent } from 'echarts/components';
import { LineChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use(
    [GridComponent, LineChart, CanvasRenderer]
);

class test2 extends Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    componentDidMount() {
        let myChart = echarts