(2)、React中使用ECharts——折线图

一、折线图实例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