如何将echarts集成到react中

如何将echarts集成到react中

在使用echarts之前需要先安装echarts,可以直接使用node命令来安装

npm install echarts --save

包依赖安装完毕后,这个时候我们的ECharts就被下载到项目中的node_modules文件夹中,这个时候我们就可以在编写的react组件中使用ECharts了。

当然了这里面可能会有坑,下载好的node_modules文件,项目中引入时,可能会出现路径的错误,这时你需要去node_modules文件中找到echats文件找到对应的路径更改下即可,下面我们一起来看下代码:

import React, { Component } from 'react';
// 引入 ECharts 主模块(这里路径引入错误参考上文文档描述)
import echarts from 'echarts/lib/echarts'; 
// 引入柱状图(这里放你需要使用的echarts类型 很重要)
import  'echarts/lib/chart/bar';
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
class EchartsTest extends Component {
    componentDidMount() {
        // 基于准备好的dom,初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 绘制图表
        myChart.setOption({
            title: { text: 'ECharts 入门示例' },
            tooltip: {},
            xAxis: {
                data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        });
    }
    render() {
        return (
            <div id="main" style={{ width: 400, height: 400 }}></div>
        );
    }
}
export default EchartsTest;

这里我们使用的Echarts是在render()方法中return一个有id和大小的div,然后在componentDidMount()方法中像我们以往的方式一样渲染迅数据,这里都是一些静态的数据,当我们数据是动态获取的时候,我们就要把Echarts的数据放到stata中,这样我们才能够做出有交互性的动态效果。

下面我们来看下运行代码的效果:

Snipaste_2019-12-24_14-52-56.jpg

当然我们在第一次开发中遇到这样的错误,这时就要查看我们自己的代码了

Snipaste_2019-12-24_14-55-26.jpg

设置series的时候确保name,data,type这3个必须的属性给配置上.

保证data的数据对应上

series: [{
    name:'得到',
    type:'line',
    data:[100.,311.3,322.8,]
}],
Image placeholder
前端答疑
未设置
  43人点赞

没有讨论,发表一下自己的看法吧

推荐文章
如何将样式加入到react组件上

如何将样式加入到react组件上一、使用行内样式想给虚拟dom添加行内样式,需要使用表达式传入样式对象的方式来实现://注意这里的两个括号,第一个表示我们在要JSX里插入JS了,第二个是对象的括号 H

如何在生产环境中部署Kubernetes集群?

如果把kubernetes集群应用于生产环境中,需要做哪些准备?我们先要弄清楚一个词,什么是“生产就绪”?生产就绪,是我们经常听到的一个专业术语,大概意思是已经准备好并已处于即将生产的状态。但是,到底

react中如何使用组件

react中如何使用组件前文我们介绍过了《如何写react组件》(感兴趣的同学可以过去学习),下面我们来说一下如何使用react组件。1、无状态组件的使用方法组件:constApp=(props)=>

美团点评Kubernetes集群管理实践

背景作为国内领先的生活服务平台,美团点评很多业务都具有非常显著、规律的“高峰”和“低谷”特征。尤其遇到节假日或促销活动,流量还会在短时间内出现爆发式的增长。这对集群中心的资源弹性和可用性有非常高的要求

怎么在react中安装修饰器

怎么在react中安装修饰器在create-react-app下使用es7的@修饰器会报错''Supportfortheexperimentalsyntax'decorators-legacy'isn

怎么在react中使用weui

怎么在react中使用weui1、react没有安装的情况下:安装react和weuinpminstall--savereactreact-dom npminstall--saveweui@1.1.0

在react中怎么引用js

在react中怎么引用js推荐两种引入的方法,当然也可以自己编写一个JS类(ES6语法)实现动态插入JS到页面,然后在React项目引入。第一种:使用插件react-load-script如果没有安装

react中的webpack是什么?

Webpack是一个开源的前端打包工具。Webpack提供了前端开发缺乏的模块化开发方式,将各种静态资源视为模块,并从它生成优化过的代码。Webpack可以从终端、或是更改webpack.config

RTSP网络摄像头/海康大华硬盘录像机网页无插件直播方案EasyNVR如何实现RTMP/FLV/HLS/RTSP直播流分发

背景需求对于摄像机直播,客户反馈的最多就是实现web直播、摆脱插件,可以自定义集成等问题。我们熟悉的EasyNVR已经完美的解决了这些问题。然而对于web播放也存在一些问题,通常我们web播放RTMP

如何将react项目部署到服务器

如何将react项目部署到服务器前提要求:●nodejs环境●一个react项目●一个服务器(本地也行)1、首先打开项目目录,按下shift+右键,打开命令提示符,输入打包命令npmrunbuild2

如何在JavaScript中操作数组?

JavaScript中的数组是什么?在开始之前,你需要先了解数组的真正含义。在JavaScript中,数组是一个用于存储不同数据类型的变量。它将不同的元素存储在一个盒子中,供以后使用。声明一个数组:l

零基础学习Swift中的数据科学

概述Swift正迅速成为数据科学中最强大、最有效的语言之一Swift与Python非常相似,所以你会发现2种语言的转换非常平滑我们将介绍Swift的基础知识,并学习如何使用该语言构建你的第一个数据科学

JavaScript中对“this”的简单理解

1.this的奥秘很多时候,JS中的this对于咱们的初学者很容易产生困惑不解。this的功能很强大,但需要一定付出才能慢慢理解它。对Java、PHP或其他标准语言来看,this表示类方法中当前对象的

JavaScript中的强制类型转换

JavaScriptprimitives(原语)JavaScript建立在一系列基本单元之上。你应该对其中的一些已经很熟悉了,比如字符串和数字:vargreet="Hello";varyear=89;

JavaScript中的Infinity(无穷)

Infinity(无穷)在JS中是一个特殊的数字,它的特性是:它比任何有限的数字都大,如果不知道Infinity,我们在一些运算操作遇到时,就会觉得很有意思。现在我们来看看JS中的Infinity属性

我如何将博客迁移到 Kubernetes(上)

最近Kubernetes的发展,以及在我司的大量应用,自己也迫不及待想要尝尝鲜,虽然我的博客是基于Hexo的纯静态站点,但这并不能阻挡我把它迁移上Kubernetes!毕竟...相比于GitHubPa

我如何将博客迁移到 Kubernetes(下)

前面的部分介绍了如何为我的博客打包Docker镜像,接下来就是重头戏——部署到Kubernetes。 GoogleKubernetesEngine 没错,我现在自用的Kubernetes集群就是

css如何将一行平均分成几列?

css如何将一行平均分成几列?column-count属性规定元素应该被划分的列数。它的取值可以是number|autonumber:元素内容将被划分的最佳列数。auto:由其他属性决定列数,比如"c

如何将网站的php版本信息隐藏起来

当我们把网站上线之后,我们可以通过curl的如下命令显示指定网站的头信息,curl的安装方法参考:https://www.wj0511.com/site/d...curl-Ihttps://www.w

echarts支持vue吗?

echarts支持vue吗?echarts支持vue。可以通过在vue项目的main.js中全局引入echarts,然后将其绑定到vue原型上:importechartsfrom'echarts'Vu

echarts怎么引入到vue中?

准备工作:首先我们初始化一个vue项目,执行vueinitwebpackechart。接着我们进入初始化的项目下,安装echarts,npminstallecharts-S //或 cnpminsta

echarts和vue的区别是什么?

echarts:ECharts,缩写来自EnterpriseCharts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/

基于Pandas+ECharts的金融大数据可视化实现方案

前言最近无意中看到一篇文章,介绍的是在IPythonNotebook里实现ECharts的可视化效果。我个人对ECharts一直是推崇有加,是baidu发布的开源项目中我比较喜欢的一个,绝对是良心之作

IBM Spectrum Protect 8.1.7在AIX7.1上的安装和配置

                                                本文作者: 谷铁柏摘要:    本文章主要讲述IBMSpectrumProtect8.1.7版本在AIX

GORM 中文文档_5.2. GORM Dialects

编写一个新的Dialect GORM原生支持sqlite,mysql,postgres和mssql。 你可以通过实现dialectinterface接口,来新增对某个新的数据库的支持。 有一些关系型数