react结合echarts画折线图并实现数据分离

在react项目中使用echarts绘制折线图示例练习，在SingleLine3Common.js做逻辑处理，设置绘制折线图的配置项，在App3.js中定义数据格式并给出具体数据，在SingleLine3.js初始化echarts界面，然后获取数据完成图表的绘制。

• ecahrts画图逻辑实现：SingleLine3Common.js

import React,{Component} from 'react';

//引入提示框
require ('echarts/lib/component/tooltip');
//引入图例
require ('echarts/lib/component/legend');
//引入直角坐标系
require ('echarts/lib/component/grid');
//引入标题
require ('echarts/lib/component/title');
//引入线段
require ('echarts/lib/chart/line');
   
export const renderLineChart=function(data,title,xAxis,series,seriesValue){
    let option = {
        
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },       
        legend: {
            data:[]
        },
        yAxis: {
            // show:false,  //设置是否显示坐标轴
            type: 'value'
        },
        xAxis: {
            // show:false,  //设置是否显示坐标轴
            type: 'category',
            boundaryGap: false,
            data: []
        },
        series: []
    };
    //绘制图形
    data.map(function (item){
        //设置图例
        option.legend.data.push(item[title]);
        //给series赋值
        option.series.push({
            name:item[title],
            type:'line',
            data:renderSeries(item[series],seriesValue),
             /**设置直线的颜色，粗细 */                       
             itemStyle: {
                normal: {
                    color: 'rgb(0,255, 0)',
                    //线条样式
                    lineStyle:{
                         type: 'solid',
                         width: 1  //设置线条粗细
                    }
                }
            },
            showSymbol:false,  //设置折线上的圆点
        })
    });
    //给x轴赋值
    data.map(function (item){          
        item.data.map(function (item){
            option.xAxis.data.push(item[xAxis]);
        })           
    });
    //过滤,将x轴不存在的加进去，存在的不要加进去
    option.xAxis.data=Array.from(new Set(option.xAxis.data));
    console.log(option);  
    return option;
};
//再次遍历，给y轴赋值
export const renderSeries=function(data,value){
    let result=[];
    data.map(function (item){
        result.push(item[value]);
    });
    return result;
};

• echarts初始化：SingleLine3.js

import React,{Component} from 'react';

//引入echarts主模块
import echarts from 'echarts/lib/echarts';
class SingleLine3 extends Component{
    /**设置渲染状态id */
    state={
        id:Math.random().toString()
     };
    componentDidMount() { 
        /**设置状态id
         * 1.this.props.id
         * 2.this.state.id
         */
        let myCharts=echarts.init(document.getElementById(this.state.id));  
        myCharts.setOption(this.props.option);
    }
    render() {
        return (
            <div id={this.state.id} style={{width:'100%',height:600}}></div>
        );
    }
}
export default SingleLine3;

• 数据格式定义：App3.js

import React,{Component} from 'react';
import SingleLine3 from './SingleLine3';
import {renderLineChart} from "./SingleLine3Common";

class App3 extends Component{
    state={
        data:[
            {
                title:"第一条折线",
                data:[
                    {
                        name:'星期一',
                        total:Math.random().toFixed(2),
                    },
                    {
                        name:'星期二',
                        total:Math.random().toFixed(2),
                    },
                    {
                        name:'星期三',
                        total:Math.random().toFixed(2),
                    },
                    {
                        name:'星期四',
                        total:Math.random().toFixed(2),
                    },
                    {
                        name:'星期五',
                        total:Math.random().toFixed(2),
                    },
                    {
                        name:'星期六',
                        total:Math.random().toFixed(2),
                    },
                    {
                        name:'星期天',
                        total:Math.random().toFixed(2),
                    },
                ]
            },
            {
                title:"第二条折线",
                data:[
                    {
                        name:'星期一',
                        total:Math.random().toFixed(2),
                    },
                    {
                        name:'星期二',
                        total:Math.random().toFixed(2),
                    },
                    {
                        name:'星期三',
                        total:Math.random().toFixed(2),
                    },
                    {
                        name:'星期四',
                        total:Math.random().toFixed(2),
                    },
                    {
                        name:'星期五',
                        total:Math.random().toFixed(2),
                    },
                    {
                        name:'星期六',
                        total:Math.random().toFixed(2),
                    },
                    {
                        name:'星期天',
                        total:Math.random().toFixed(2),
                    },
                ]
            },
        ]
    };   
    render() {
        const {data}=this.state;
        return (           
            <div className="App" style={{padding:20}}>
                <SingleLine3  option={renderLineChart(data,'title','name','data','total')}/>
            </div>
        );
    }
}
export default App3;