一熊泵、折線圖實(shí)例1
1、代碼如下：
import React,{Component} from 'react'
import {Card} from 'antd'
//按需導(dǎo)入
import echarts from 'echarts/lib/echarts'
//導(dǎo)入折線圖
import 'echarts/lib/chart/line'
// 引入提示框和標(biāo)題組件
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: { //標(biāo)題
text: '折線圖一',
x: 'center',
textStyle: { //字體顏色
color: '#ccc'
}
},
tooltip:{ //提示框組件
trigger: 'axis'
},
xAxis: { //X軸坐標(biāo)值
data: ['星期一','星期二','星期三','星期四','星期五','星期六','星期日']
},
yAxis: {
type: 'value' //數(shù)值軸甸昏，適用于連續(xù)數(shù)據(jù)
},
series : [
{
name:'訂單量', //坐標(biāo)點(diǎn)名稱
type:'line', //線類型
data:[1000, 1500, 2000, 3000, 2500, 1800, 1200] //坐標(biāo)點(diǎn)數(shù)據(jù)
}
]
}
return option;
}
render() {
return (
<Card.Grid className="line_a">
<ReactEcharts option={this.getOption()} theme="ThemeStyle" />
</Card.Grid>
)
}
}
export default LineA;
（1） title:標(biāo)題組件顽分，包含主標(biāo)題和副標(biāo)題。
? ? --- text (string)：主標(biāo)題文本施蜜，支持使用 \n 換行卒蘸。
? ? --- x (string)：在x軸位置。
? ? --- textStyle (object)：主標(biāo)題文字的顏色翻默。
（2）tooltip: 提示框組件缸沃。
? ? --- trigger (string)：觸發(fā)類型。(默認(rèn): 'item' ）
? ? ? |--- item：數(shù)據(jù)項(xiàng)圖形觸發(fā)修械，主要在散點(diǎn)圖趾牧，餅圖等無(wú)類目軸的圖表中使用。
? ? ? |--- axis：坐標(biāo)軸觸發(fā)肯污，主要在柱狀圖翘单，折線圖等會(huì)使用類目軸的圖表中使用。
? ? ? |--- none：什么都不觸發(fā)蹦渣。
（3） xAxis: 直角坐標(biāo)系 grid 中的 x 軸哄芜，一般情況下單個(gè) grid 組件最多只能放上下兩個(gè) x 軸，多于兩個(gè) x 軸需要通過(guò)配置 offset 屬性防止同個(gè)位置多個(gè) x 軸的重疊柬唯。
（4） yAxis: 直角坐標(biāo)系 grid 中的 y 軸认臊，一般情況下單個(gè) grid 組件最多只能放左右兩個(gè) y 軸，多于兩個(gè) y 軸需要通過(guò)配置 offset 屬性防止同個(gè)位置多個(gè) Y 軸的重疊锄奢。
（5） series : 系列列表失晴。每個(gè)系列通過(guò) type 決定自己的圖表類型冤议。
2、效果圖
二师坎、折線圖實(shí)例2
1、代碼如下:
import React,{Component} from 'react'
import {Card} from 'antd'
//按需導(dǎo)入
import echarts from 'echarts/lib/echarts'
//導(dǎo)入折線圖
import 'echarts/lib/chart/line'
// 引入提示框和標(biāo)題組件
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' //數(shù)值軸堪滨，適用于連續(xù)數(shù)據(jù)
},
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胯陋、效果圖
三、折線圖實(shí)例3
1袱箱、代碼如下
import React,{Component} from 'react'
import {Card} from 'antd'
//按需導(dǎo)入
import echarts from 'echarts/lib/echarts'
//導(dǎo)入折線圖
import 'echarts/lib/chart/line'
// 引入提示框和標(biāo)題組件
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遏乔、效果圖
更多折線圖實(shí)例信息請(qǐng)參考ECharts：https://www.echartsjs.com/examples/#chart-type-line
