React 项目中使用Echarts
直接上代码吧:
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>);}
}
查看页面效果:
希望对你有所帮助
React 项目中使用Echarts相关推荐
- react项目中引入echarts图表
一.在一般html页面使用 1.在已有项目的终端输入进行安装 npm install echarts --save 2.在import里面输入 import echarts from 'echarts ...
- 如何在React框架中使用ECharts图库表制图?
在前端开发过程中避免不会遇到需要进行数据可视化的操作,但单单通过html5的Canvas实现起来比较麻烦,所以才会用到ECharts,HighCharts,,Chart.js等,今天小千就来教大家如何 ...
- web前端教程之如何在React框架中使用ECharts图库表制图?
在前端开发过程中避免不会遇到需要进行数据可视化的操作,但单单通过html5的Canvas实现起来比较麻烦,所以才会用到ECharts,HighCharts,,Chart.js等,今天小千就来教大家如何 ...
- 如何在 Vue 项目中使用 echarts
数据的重要性我们大家都知道,就算再小的项目中都可能使用几个图表展示,我最近在做项目的过程中也是需要用到图表,最后选择了echarts 图表库,为什么选择 echarts,第一:简单上手容易,第二:它几 ...
- react项目中使用mocha结合chai断言库进行单元测试
react项目中使用mocha结合chai断言库进行单元测试 git地址:https://github.com/yancekang/... 如果对你有所帮助,感谢start 项目搭建 create-r ...
- 优雅的在React项目中使用Redux
概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与React没有任何关系,其他UI框架也可以使用Redux react-redux React插件,作用:方便在 ...
- 如何优雅地在React项目中使用Redux
前言 或许你当前的项目还没有到应用Redux的程度,但提前了解一下也没有坏处,本文不会安利大家使用Redux 概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与 ...
- 中使用js修改变量值_谈一谈css-in-js在React项目中的使用
一.什么是css-in-js 参考:[css in js 简介] 简单来说,传统的前端方案推崇"关注点分离"原则,HTML.CSS.JavaScript 应该各司其职,进行分离. ...
- 如何在 Vue 项目中使用 echarts 1
数据的重要性我们大家都知道,就算再小的项目中都可能使用几个图表展示,我最近在做项目的过程中也是需要用到图表,最后选择了echarts 图表库,为什么选择 echarts,第一:简单上手容易,第二:它几 ...
最新文章
- 磁共振检查头部能检测出什么_什么是磁共振血管造影?检查价格贵吗?
- J0ker的CISSP之路:How CISSP(3)
- 实录:menu.1st配置错误导致从多路径启动失败
- CSAPP:Attack lab
- linux 防ddos攻击软件,linux系统下免费防DDOS CC攻击脚本,有效减轻服务器压力 【转】...
- Go语言实现并行分段求和计算
- js:防抖动与节流【转载】
- 联合国应考虑建设第二总部
- rest sso 和_SSO企业单点登录系统——CAS REST认证方式
- TFS Two Build Definations Share the Same Code Branch
- C语言的实现的程序算法,算法:C语言实现(Algorithms In C)的学习
- ECMASript 6 新特性
- Java系列之—— getBytes() 方法
- Android事件分发理解
- 关于赛马的问题,25匹赛出前3名或者前5名
- 压缩包伪装-阿里网盘禁止分享解决方案\更新日志
- 亿阳信通java开发,北京亿阳信通笔试题java+oracle
- hadoop Safe mode is ON 的解决办法
- CoffeeScript 详解
- 怎么更改智联上的手机号,原先的号不用了