首先通过npm安装Echarts，也可写进package.json中install
npm install echarts --save-dev
新建一个ReactEcharts组件
import React, { Component } from 'react'
/**
* 第一个import echarts是必须的
* 第二个是引入的具体的一个图表类型 （可选）
* 第三个是表的title(可选)
* 第四个是表的工具栏组件相关的行为（可选，
内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具）
*/
import echarts from 'echarts/lib/echarts'
import 'echarts/lib/chart/bar'
import 'echarts/lib/component/title'
import 'echarts/lib/component/toolbox'
class ReactEcharts extends Component {
constructor(props) {
super(props)
}
componentDidMount() {
//初始化图表
this.initChart();
}
componentWillReceiveProps(nextProps) {
//更新图表
this.initChart(nextProps);
}
/*生成图表，做了判断，如果不去判断dom有没有生成，
每次更新图表都要生成一个dom节点*/
initChart(props) {
let option = props === undefined ? this.props.option : props.option;
// 基于准备好的dom，初始化echarts实例
let myChart = echarts.getInstanceByDom(document.getElementById('main'));
if( myChart === undefined){
myChart = echarts.init(document.getElementById('main'));
}
// 绘制图表，option设置图表格式及源数据
myChart.setOption(option);
}
render() {
return (
//width和height可由属性值传入
<div id="main" style={{ width: 800, height: 400 }}></div>
);
}
};
export {ReactEcharts as default};
新建一个HomeChart.js文件，在需要的地方引入ReactEcharts组件
import React, { Component } from 'react';
import classNames from 'classnames';
import ReactEcharts from 'scripts/components/ReactEcharts';
class HomeChart extends Component {
constructor(props) {
super(props)
this.state = {
//option可由函数初始化
option: option1
};
}
componentDidMount() {
// this.getOptions(option1)
}
//数据发生变化后更新option，由state管理
getOptions(options) {
this.setState({option: options});
}
render() {
let {option} = this.state;
return (
<div>
<button onClick={this.getOptions}>查询</button>
<div className="pull-left mt-20">
<ReactEcharts option={option}></ReactEcharts>
</div>
</div>
)
}
};
export default HomeChart
ECharts 配置option示例
myChart.setOption({
color: 'blue',
title: {
left: 'center',
text: '订单利润报表',
subtext: 'data from tnet'
},
toolbox: {
right: '40px',
// top: '15px',
feature: {
dataView: {show: true, readOnly: false},
magicType: {
show: true,
type: ['line', 'bar']
},
restore: {show: true},
saveAsImage: {
show: true,
type: 'png'
},
}
},
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
data : [10, 22, 20, 334, 390, 330, 220, 220, 200, 334,
39, 33, 220, 220, 200, 334, 390, 330, 220, 220,
20, 34, 390, 330, 220, 220, 200, 334, 390, 330, 220],
axisTick: {
alignWithLabel: true
},
axisLabel: {
interval:0,
rotate:60
}
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name: '收入',
type: 'bar',
stack: '总量',
barWidth: '60%',
label: {
normal: {
show: true,
position: 'top'
}
},
data:[10, 22, 20, 334, 390, 330, 220, 220, 200, 334,
39, 33, 220, 220, 200, 334, 390, 330, 220, 220,
20, 34, 390, 330, 220, 220, 200, 334, 390, 330, 220]
}
]
})
配置项
-
标题 title
- title.text => 主标题文本
- title.link => 主标题文本超链接
- title.textStyle => 主标题样式
- title.subtext => 副标题文本
- title.sublink => 副标题文本超链接
- title.left（top、right、bottom） => 标题位置
-
工具栏组件 toolbox
- toolbox.left （top、right、bottom） => 工具栏组件位置
- toolbox.feature => 各工具配置项
- toolbox.feature.saveAsImage => 保存为图片
- toolbox.feature.restore => 配置项还原
- toolbox.feature.dataView => 数据视图工具，可以展现当前图表所用的数据，编辑后可动态更新
- toolbox.feature.dataZoom => 数据区域缩放 ,目前只支持直角坐标系的缩放
- toolbox.feature.magicType => 动态类型切换
-
绘图网格 grid
- grid.left（top、right、bottom） => grid 组件位置
- grid.containLabel => grid 区域是否包含坐标轴的刻度标签
- grid.show => 是否显示直角坐标系网格
-
提示框组件tooltip（提示框组件可以设置在全局或局部）
- tooltip.trigger => 触发类型（'item'|'axis'|'none'）
- tooltip.axisPointer => 坐标轴指示器配置项
- tooltip.triggerOn => 提示框触发的条件（'mousemove'|'click'）
- tooltip.enterable => 鼠标是否可进入提示框浮层中，默认为false
-
系列列表 series
- series[i].type => 系列图表类型
- series[i].name => 系列名称，用于tooltip的显示
- series[i].label => 图形上的文本标签
- series[i].label.position => 标签的位置
- series[i].label.rotate => 标签旋转
- series[i].label.fontSize => 标签的字体大小
- series[i].label.color => 标签的颜色
- series[i].data => 系列中的数据内容数组
- series[i].xAxisIndex => 使用的x轴的 index，在单个图表实例中存在多个x轴的时候有用
- series[i].yAxisIndex => 使用的y轴的 index，在单个图表实例中存在多个y轴的时候有用
-
grid 中的 x 轴 x Axis
- xAxis.type => 坐标轴类型（'value'|'category'|'time'|'log'）
- xAxis.nameLocation => 坐标轴名称显示位置
- xAxis.nameRotate => 坐标轴名字旋转，角度值
- xAxis.scale => 是否是脱离 0 值比例,设置成 true 后坐标刻度不会强制包含零刻度
-
grid 中的 y 轴 yAxis(与x轴相同)
-
图例组件 legend（图例组件展现了不同系列的标记，颜色和名字。可以通过点击图例控制哪些系列不显示）
- legend.data => 图例的数据数组
- legend.left （top、right、bottom） => 图例组件位置
- legend.padding => 图例的内边距
- legend.itemGap => 图例每项之间的间隔
