React使用echarts-for-react
2023-09-27 14:28:54 时间
参考npm文档:[echarts-for-react](echarts-for-react)
由于npm上已经有针对react项目出的echarts插件,所以在这里直接安装
第一步:npm安装echarts-for-react
npm install --save echarts-for-react
npm install echarts --save //如果有报错找不到echarts模块,需要在安装一下exharts'
第二步:引入模块和组件
import echarts from 'echarts'
import echarts from 'echarts/lib/echarts'
<ReactEcharts option={this.getOption()} />
第三步:参考echarts官网实例添加option参数
参考官网:ECharts Demo
getOption =()=> {
let option = {
title:{
text:'用户骑行订单'
},
tooltip:{ //展示数据
trigger:'axis'
},
xAxis:{
data:['周一','周二','周三','周四','周五','周六','周日']
},
yAxis:{
type:'value'
},
series:[
{
name:'订单量',
type:'bar',
data:[1000,2000,1500,3000,2000,1200,800]
}
]
}
return option;
}
注意:由于引入echarts文件太大,所以一般按需引入,完整项目代码如下:
import React from 'react';
import {Card} from 'antd';
import echartTheme from './../themeLight'
//不是按需加载的话文件太大
//import echarts from 'echarts'
//下面是按需加载
import echarts from 'echarts/lib/echarts'
//导入折线图
import 'echarts/lib/chart/line'; //折线图是line,饼图改为pie,柱形图改为bar
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/markPoint';
import ReactEcharts from 'echarts-for-react';
export default class Line extends React.Component{
componentWillMount(){
//主题的设置要在willmounted中设置
echarts.registerTheme('Imooc',echartTheme);
}
getOption =()=> {
let option = {
title:{
text:'用户骑行订单',
x:'center'
},
tooltip:{
trigger:'axis',
},
xAxis:{
data:['周一','周二','周三','周四','周五','周六','周日']
},
yAxis:{
type:'value'
},
series:[
{
name:'OFO订单量',
type:'line', //这块要定义type类型,柱形图是bar,饼图是pie
data:[1000,2000,1500,3000,2000,1200,800]
}
]
}
return option
}
render(){
return(
<div>
<Card title="折线图表之一">
<ReactEcharts option={this.getOption()} theme="Imooc" style={{height:'400px'}}/>
</Card>
</div>
)
}
}
注意:按需加载是引入node_modules文件夹中的js文件,所以,如果记得改import 'echarts/lib/chart/line'; 折线图不用改,饼图和柱形图line分别改为pie和bar
相关文章
- JavaScript统计图表插件 Echarts
- echarts关系拓扑图一个demo
- [转]echarts tree (树图) 实现自定义节点图标 自定义样式 点击节点后线条变色 自适应高度 搜索后节点关键字标红
- vue cesium 集成 echarts 和 mapv 示例
- Echarts 新认知 地图的label到底怎么居中?
- Spring Boot 2.x基础教程:使用 ECharts 绘制各种华丽的数据图表
- Echarts折线图--心率需求
- Vue+Echarts监控大屏实例六:智慧养老监控模板实例上
- Vue3使用Echarts图表
- React魔法堂:echarts-for-react源码略读
- 大数据 │ ECharts与pyecharts数据可视化应用
- Web 插件 之 ECharts 实现中国地图数据的简单展示实现
- Web 插件 之 ECharts 可视化图表库简单介绍和使用
- 使用echarts做一个可视化报表(一)
- echarts 地图 滚轮 缩放
- echarts散点图 不显示问题 或宽度为0问题
- Echarts实现Excel趋势线和R平方计算思路
- echarts画图时tooltip.formatter参数params不会更新(转载)
- ECharts的介绍和使用方法,以及其他常见的数据可视化库介绍