React 项目中使用Echarts

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

直接上代码吧：

react 项目中添加Echarts 相关模块

npm install echarts --save

代码：

import React from 'react'
    import * as echarts from 'echarts';
    import '../css/EchartsTest.css'
    
    export default class EchartsTest extends React.Component {
    	
    	constructor() {
    	    super()
    		this.state={
    			myChart:""
    		}
    	}
    	componentDidMount() {
    		this.myChart=echarts.init(document.getElementById('main'));
    		this.myChart.setOption({
    			title: {
    				text: '三月份销量统计',
    				x:'center',
    				y:'top'
    			},
    			tooltip: {},
    			xAxis: {
    				data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
    			},
    			yAxis: {},
    			series: [{
    				name: '销量',
    				type: 'bar',
    				data: [5, 20, 36, 10, 10, 20]
    			}]
    		});
    	}
    	render() {
    		return (
    		 <div id="main" className="mainArea"></div>
    		);
    	}
    }

查看页面效果：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oiR5piv5aSn5aS06bif_size_20_color_FFFFFF_t_70_g_se_x_16][]

希望对你有所帮助

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oiR5piv5aSn5aS06bif_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/3424fc96d7654c678308522e69e719b4.png

发表评论取消回复

表情：

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

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

相关阅读

相关初识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 阅读

相关 react项目中使用echarts插件两种方式

1.我这边是写了一个简单的tabDemo，展示NBA球星科比、麦迪、欧文的职业生涯得分、助攻、篮板数据。页面效果如下图： ![在这里插入图片描述][watermark_t

àì夳堔傛蜴生んèń/ 2022年11月29日 12:17/ 0 赞/ 282 阅读

相关如何在React项目中使用ECharts图表库

引言在项目的开发中，对于我们前端开发人员而言，总是无法避免需要对数据进行可视化分析和设计的需求。但事实上，如果单纯的依靠Html5 Canvas想要快速地创建简洁，美观

梦里梦外;/ 2022年10月28日 03:56/ 0 赞/ 261 阅读

相关 vue项目中使用echarts

> 1. 安装 npm install echarts --save ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10

偏执的太偏执、/ 2022年10月22日 02:55/ 0 赞/ 213 阅读

相关 React 项目中使用Echarts

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

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

相关 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 阅读

相关 vue项目中使用echarts

vue项目中使用echarts 一、使用场景在项目开发中，我们往往会遇到数据统计方面的需求，这时候为了直观的呈现数据，我们需要制作图表。此时，我们可以使用

朴灿烈づ我的快乐病毒、/ 2021年08月30日 11:51/ 0 赞/ 535 阅读

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

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

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