React echarts 雷达图封装

import React from 'react';
import echarts from 'echarts/lib/echarts'
import 'echarts/lib/chart/radar'; 
interface IProps {
    echartId: string,
    data: ISeriesData,
    chartOptions?: IEcharts,
    max: number
}
interface IEcharts {
    [key: string]: any
}
interface IOption {
    [key: string]: any
}
//传过来的数据格式
interface ISeriesData {
    name: Array,
    value: Array
}
interface ISeriesValue {
    name: string,
    value: Array,
    color: string
}
interface IState {
    indicator: Array,// 雷达图  几个数组对象 就是 几个雷达
    legendData: Array, //不同系列的标记(symbol)
    seriesData: Array // 序列数据值  series:[{name,value:[1,2,3]},{name,value:[1,2,3]}]
    option: IOption,
    visible: false
}
class RadarEcharts extends React.Component{
    state: IState = {
        indicator: [],
        legendData: [],
        seriesData: [],
        option: {},
        visible: false
    }

    //把传过来的数据进行初始化
    renderData() {
        this.props.data.name.forEach((item: string, index: number) => {
            this.state.indicator.push(
                {
                    name: item,
                    max: this.props.max,
                    axisLabel: { show: (index === 0 ? true : false) } //只显示一个轴的刻度值
                })
        })
        this.props.data && this.props.data.value.length > 0 && this.props.data.value.forEach(item => {
            this.state.seriesData.push({
                name: '',
                type: 'radar',
                data: [{
                    name: item.name,
                    value: [...item.value]
                }],
                areaStyle: {
                    color: {
                        type: "radar",
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0.5,
                                color: item.color // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: item.color // 100% 处的颜色
                            }
                        ],
                        globalCoord: false // 缺省为 false
                    },
                    opacity: 0.2
                }
            })
            this.state.legendData.push(item.name)
        })

    }

    initOptions() {
        let _this = this;
        let indicator = JSON.parse(JSON.stringify(_this.state.indicator));
        let seriesList = JSON.parse(JSON.stringify(_this.state.seriesData));
        let optionConfig: IOption = {
            title: {
                text: ''
            },
            legend: {
                show: true,
                data: _this.state.legendData,
                bottom: true,  //图表底部
                icon: 'rect'   //显示方式
            },
            tooltip: {
            },
            radar: {
                name: {   //四个角文本的颜色
                    textStyle: {
                        color: '#000000'
                    }
                },
                indicator: indicator,
                splitNumber: 4,
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#E9E9E9'
                    }
                },
                axisLabel: {
                    show: true,
                    color: '#A9A9A9'
                },
                splitArea: {
                    areaStyle: {
                        color: ['#FFFFFF', '#FFFFFF', '#FFFFFF', '#FFFFFF']
                    }
                }
            },
            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.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 (
            
) } } export default RadarEcharts

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

import echarts from 'echarts/lib/echarts'
import 'echarts/lib/chart/radar'; 

.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方法即可

数据格式:

 radarEchart: {
            name: ["使用得分","自动回复率得分", "推荐采纳率得分", "配置得分"],
            value: [
                {
                    name: '我的数据',
                    value: [500, 900, 950, 200],
                    color: '#FF9D4D'
                },
                {
                    name: '行业前三',
                    value: [800, 400, 700, 500,],
                    color: '#5AD8A6'
                },
                {
                    name: '行业平均',
                    value: [500, 200, 600, 400,],
                    color: '#5B8FF9'
                }
            ]
        }

效果:

React echarts 雷达图封装_第1张图片

 

你可能感兴趣的:(echarts,React,typescript)