echarts for react的使用

短命女 2022-12-26 04:57 218阅读 0赞

**经测试，echarts for react不支持echarts最新版本5.0.0因此引入4.9.0**

npm install echarts@4.9.0

npm install echarts-for-react@2.0.16

**依赖安装好即可使用：**

import React, {  useState, useEffect } from 'react';
    import {  Card } from 'antd';
    import ReactEcharts from 'echarts-for-react';
    
    const DemoColumn: React.FC<any> = () => { 
      const option = { 
        xAxis: { 
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: { 
          type: 'value'
        },
        series: [{ 
          data: [150, 230, 224, 218, 135, 147, 260],
          type: 'line'
        }]
      };
      const click1 = (value:any) => { 
        console.log(value)
      }
      const events = { 
        'click':click1
      }
      return (
        <div>
          <Card title="折线图表之一">
            <ReactEcharts
              option={ option}
              onEvents={ events} />
          </Card>
        </div>
      )
    };
    export default DemoColumn;

**运行效果：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk4MTkx_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk4MTkx_size_16_color_FFFFFF_t_70]: /images/20221120/35819299ba5f4b45bd3b4c82cc0f7276.png

发表评论取消回复

表情：

评论列表（有 0 条评论，218人围观）

还没有评论，来说两句吧...

相关阅读

相关可视化图表图，antDesign 中可使用echarts-for-react 或者 bizCharts

（1）echarts 百度开源的 [图表库地址][Link 1] 【可以自己调试除自己想要的图表的格式，在实例里面查看】 ![watermark_type_ZmFuZ3

墨蓝/ 2023年06月13日 11:24/ 0 赞/ 1 阅读

相关初识echarts（1）：如何在 react 中使用echarts

在写这篇博客之前，我看到网上模板中的图表总觉得“好大上啊，代码一定很复杂吧”，现在网上搜搜找找，一通摸索，突然觉得好像没那么难搞。这篇博客我先简单总结总结 “如何

古城微笑少年丶/ 2023年03月03日 08:57/ 0 赞/ 9 阅读

相关 React使用echarts-for-react

参考npm文档：\[[echarts-for-react][]\]([echarts-for-react][]) 由于npm上已经有针对react项目出的echarts插件,

╰+攻爆jí腚メ/ 2023年01月16日 14:29/ 0 赞/ 353 阅读

相关 echarts for react的使用

经测试，echarts for react不支持echarts最新版本5.0.0因此引入4.9.0 npm install echarts@4.9.0 np

短命女/ 2022年12月26日 04:57/ 0 赞/ 219 阅读

相关 vue与react使用echarts，详细使用步骤

vue引入echarts 1、下载 `npm install echarts --save` 2、在`main.js`全局引入 import Ech

男娘i/ 2022年12月22日 06:22/ 0 赞/ 201 阅读

相关 React 项目中使用Echarts

直接上代码吧： react 项目中添加Echarts 相关模块 npm install echarts --save 代码： import React

朴灿烈づ我的快乐病毒、/ 2022年09月12日 06:55/ 0 赞/ 231 阅读

相关 eCharts增加图例（legend）的点击事件--echarts-for-react

1. 功能需求：用户点击图例，进入下钻页面。 2. 背景使用echarts-for-react开发的图表，echarts的点击事件不能应用与图例，点击图例会触

╰半橙微兮°/ 2022年04月24日 08:12/ 0 赞/ 1370 阅读

相关 react单车项目，echart图的使用

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQx

妖狐艹你老母/ 2022年04月17日 00:20/ 0 赞/ 247 阅读

相关 react中使用Echarts

react中使用Echarts 一. 第一种方式（推荐） 1.安装 `npm i echarts -S` `npm i react-for-echarts

╰+哭是因爲堅強的太久メ/ 2022年01月27日 18:47/ 0 赞/ 913 阅读

相关在react中使用echarts制作地图

1.下载echarts npm install echarts 2.app.js代码如下 import React, { Component } fro

喜欢ヅ旅行/ 2021年07月25日 11:34/ 0 赞/ 721 阅读