一、折线图实例1
1、代码如下：
import React,{Component} from 'react'
import {Card} from 'antd'
//按需导入
import echarts from 'echarts/lib/echarts'
//导入折线图
import 'echarts/lib/chart/line'
// 引入提示框和标题组件
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'
//引入echarts的主题样式
import echartTheme from './echartTheme'
//引入样式
import './common.less'
class LineA extends Component {
componentWillMount(){
// echarts.registerTheme("ThemeStyle", echartTheme) //注入主题
}
getOption = ()=>{
let option = {
title: { //标题
text: '折线图一',
x: 'center',
textStyle: { //字体颜色
color: '#ccc'
}
},
tooltip:{ //提示框组件
trigger: 'axis'
},
xAxis: { //X轴坐标值
data: ['星期一','星期二','星期三','星期四','星期五','星期六','星期日']
},
yAxis: {
type: 'value' //数值轴，适用于连续数据
},
series : [
{
name:'订单量', //坐标点名称
type:'line', //线类型
data:[1000, 1500, 2000, 3000, 2500, 1800, 1200] //坐标点数据
}
]
}
return option;
}
render() {
return (
<Card.Grid className="line_a">
<ReactEcharts option={this.getOption()} theme="ThemeStyle" />
</Card.Grid>
)
}
}
export default LineA;
（1） title:标题组件，包含主标题和副标题。
--- text (string)：主标题文本，支持使用 \n 换行。
--- x (string)：在x轴位置。
--- textStyle (object)：主标题文字的颜色。
（2）tooltip: 提示框组件。
--- trigger (string)：触发类型。(默认: 'item' ）
|--- item：数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
|--- axis：坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
|--- none：什么都不触发。
（3） xAxis: 直角坐标系 grid 中的 x 轴，一般情况下单个 grid 组件最多只能放上下两个 x 轴，多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠。
（4） yAxis: 直角坐标系 grid 中的 y 轴，一般情况下单个 grid 组件最多只能放左右两个 y 轴，多于两个 y 轴需要通过配置 offset 属性防止同个位置多个 Y 轴的重叠。
（5） series : 系列列表。每个系列通过 type 决定自己的图表类型。
2、效果图
二、折线图实例2
1、代码如下:
import React,{Component} from 'react'
import {Card} from 'antd'
//按需导入
import echarts from 'echarts/lib/echarts'
//导入折线图
import 'echarts/lib/chart/line'
// 引入提示框和标题组件
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'
//引入样式
import './common.less'
class LineB extends Component {
getOption = ()=>{
let option = {
title: {
text: '折线图二',
x: 'center'
},
tooltip:{
trigger: 'axis'
},
xAxis: {
boundaryGap: false,
data: ['星期一','星期二','星期三','星期四','星期五','星期六','星期日']
},
yAxis: {
type: 'value' //数值轴，适用于连续数据
},
series : [
{
name:'订单量',
type:'line',
data:[1000, 1500, 2000, 3000, 2500, 1800, 1200],
areaStyle: {}
}
]
}
return option;
}
render() {
return (
<Card.Grid className="line_b">
<ReactEcharts option={this.getOption()}/>
</Card.Grid>
)
}
}
export default LineB;
2、效果图
三、折线图实例3
1、代码如下
import React,{Component} from 'react'
import {Card} from 'antd'
//按需导入
import echarts from 'echarts/lib/echarts'
//导入折线图
import 'echarts/lib/chart/line'
// 引入提示框和标题组件
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'
//引入样式
import './common.less'
class LineA extends Component {
getOption = ()=>{
let option = {
title: {
text: '折线图三',
x: 'center'
},
tooltip:{
trigger: 'axis'
},
legend: {
// orient: 'vertical',
top: 20,
right: 50,
data:['A','B','C']
},
xAxis: {
data: ['星期一','星期二','星期三','星期四','星期五','星期六','星期日']
},
yAxis: {
type: 'value'
},
series : [
{
name:'A',
type:'line',
data:[800, 1300, 2000, 2300, 1800, 1100, 500]
},
{
name:'B',
type:'line',
data:[1000, 1800, 2200, 3100, 2200, 1500, 1000]
},
{
name:'C',
type:'line',
data:[300, 800, 1200, 1800, 1300, 600, 200]
}
]
}
return option;
}
render() {
return (
<Card.Grid className="line_c">
<ReactEcharts option={this.getOption()}/>
</Card.Grid>
)
}
}
export default LineA;
2、效果图
更多折线图实例信息请参考ECharts：https://www.echartsjs.com/examples/#chart-type-line
