(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 决定自己的图表类型。