React echarts 折线图封装

import React from 'react';
import echarts from 'echarts/lib/echarts'
import 'echarts/lib/chart/line'; 

interface IProps {
    echartId: string,
    data: ISeriesData,
    chartOptions?: IEcharts,
    gradients: boolean,
}
interface IEcharts {
    [key: string]: any
}
interface IOption {
    [key: string]: any
}
//传过来的数据格式
interface ISeriesData {
    name: Array<string>,
    value: Array<ISeriesValue>
}
interface ISeriesValue {
    name: string,
    value: Array<number>,
    color: string
}
interface IState {
    xAxisData: Array<string>,// 横坐标的显示值
    legendData: Array<string>, //不同系列的标记(symbol)
    seriesData: Array<Object> // 序列数据值  series:[{name,value:[1,2,3]},{name,value:[1,2,3]}]
    option: IOption
}
class LineEchart extends React.Component<IProps>{
    state: IState = {
        xAxisData: [],
        legendData: [],
        seriesData: [],
        option: {}
    }

    //把传过来的数据进行初始化
    renderData() {
        this.setState({ xAxisData: [...this.props.data.name] || [] })
        //this.state.xAxisData = [...this.props.data.name] || []
        this.props.data && this.props.data.value.length > 0 && this.props.data.value.forEach(item => {
            this.props.gradients &&
                this.state.seriesData.push({
                    name: item.name,
                    type: 'line',
                    smooth: true,  //光滑线还是折现
                    symbol: 'none', //线上是否有查看点
                    data: [...item.value],
                    color: item.color,
                    areaStyle: {
                        color: {
                            type: "linear",
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {
                                    offset: 0.5,
                                    color: item.color // 0% 处的颜色
                                },
                                {
                                    offset: 1,
                                    color: "#FFFFFF" // 100% 处的颜色
                                }
                            ],
                            globalCoord: false // 缺省为 false
                        },
                        opacity: 0.5
                    }
                })
            this.props.gradients || this.state.seriesData.push({
                name: item.name,
                type: 'line',
                smooth: true,
                data: [...item.value],
                color: item.color
            })
            this.state.legendData.push(item.name)
        })
    }
    initOptions() {
        let _this = this;
        let xAxis = JSON.parse(JSON.stringify(_this.state.xAxisData));
        let seriesList = JSON.parse(JSON.stringify(_this.state.seriesData));
        let optionConfig: IOption = {
            title: {
                show: false,
                text: '',
                x: '',
                y: ''
            },
            legend: {
                show: false,
                data: _this.state.legendData,
                right: "auto",
                type: "scroll",
                orient: "horizontal",
                left: "center",
                bottom: "1%",
            },
            tooltip: {
                trigger: "",
            },
            xAxis: {
                show: true,
                data: xAxis,
                boundaryGap: true,
                axisLabel: {
                    interval: 0
                },
                nameLocation: 'start'
            },
            yAxis: {
                name: "",
                show: false,
                axisLabel: {
                },
                toolbox: {},
                animation: false
            },
            //图表太小，撑不开DIV问题
            grid: {
            },
            series: seriesList
        }
        this.props.chartOptions && Object.keys(this.props.chartOptions).forEach((key) => {
            optionConfig[key] = Object.assign(optionConfig[key] || {}, !!this.props.chartOptions && this.props.chartOptions[key])
        })
        this.setState({ option: optionConfig }, () => {
            let lineChart = echarts.init(document.getElementById(this.props.echartId))
            lineChart.resize();
            lineChart.setOption(this.state.option)
            lineChart.resize();
        })
    }

    componentDidMount() {
        this.renderData()
        this.initOptions()
        window.addEventListener("resize", this.resizeWin.bind(this));
    }
    componentDidUpdate(){
        this.resizeWin()
    }
    resizeWin = () => {
        let echartId=document.getElementById(this.props.echartId)
        if (!!echartId) {
            let lineChart = echarts.init(echartId)
            lineChart.resize();   
        }
    }
    render() {
        const styles = {
            display: 'flex',
            justifycontent: 'center',
            alignitems: 'center',
            width: '100%',
            height: '100%'
        }
        return (
            <div style={{ position: 'relative', width: '100%', height: '100%' }}>
                <div id={this.props.echartId} style={styles} ></div>
            </div>
        )
    }
}
export default LineEchart

解决问题1:图表按需引入，则需要建立****.d.ts文件

declare module 'echarts' {
    const echarts: any;
    export default echarts;
}
declare module 'echarts/lib/echarts'
declare module 'echarts/lib/chart/line'
declare module 'echarts/lib/chart/radar'

解决问题2：AntDesign 的TabPane切换时，改变浏览器大小，在切换回来图表的宽高变为100px

 componentDidUpdate(){
        this.resizeWin()
    }
页面重新调用resize方法即可。

数据格式：

 smartSupport: {
            name: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
            value: [{
                name: 'Test',
                value: [7, 5, 5, 4, 6, 6, 5, 5, 5, 2],
                color: '#5B8FF9'
            }]
        }

或者
 lineEchart: {
            name: ["1", "5", "10", "15", "20", "25", "30"],
            value: [
                {
                    name: '我的总得分',
                    value: [100, 50, 110, 200, 250, 300, 400],
                    color: '#FF9D4D'
                },
                {
                    name: '行业前三得分',
                    value: [80, 80, 100, 120, 130, 200, 250],
                    color: '#5AD8A6'
                },
                {
                    name: '行业平均',
                    value: [80, 80, 100, 70, 80, 60, 50],
                    color: '#5B8FF9'
                }
            ]
        }

调用方式：

   <LineEchart data={this.state.autoData} chartOptions={optionAuto} echartId="autoDataIdQuestion" gradients={true}/>

支持单条折线图或者多条折线图：