echarts-for-react使用詳解(雷達圖)

Echarts-for-react的使用

示例

一、安裝

npm install --save echarts-for-react
//如果需要使用echarts的一些特殊方法需要安裝
npm install --save echarts

二、使用

import ReactEcharts from 'echarts-for-react';
import echarts from 'echarts';

<ReactEcharts
    option={this.getOption()} 
    notMerge={true}
    lazyUpdate={true}
    onEvents={onEvents}
    style={{width: '100%',height:'100%'}}
/>

三、echarts API

1、設置區域顏色漸進

echarts.graphic.LinearGradient

{
    value : [10, 250, 100, 370, 80, 500, 190, 400],
    // 設置區域邊框和區域的顏色
    itemStyle: {
        normal: {
            //雷達圖區域顏色
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0.5,
                color: 'rgba(139,241, 134, 0.7)'
            },
            {
                offset: 1,
                color: 'rgba(0,208, 131, 1)'
            }]),
            opacity:0,
            lineStyle: {
                width: 0,
                color: '#8BF186',
            },
        },
    },
    name : '昨日更新投訴量'
}

2、legend標籤配置

legend: {
    //圖例文字展示
    data: [
        { name:'今日更新投訴量' }, 
        { name:'昨日更新投訴量' }],
    //圖例顯示在底部
    bottom:0,
    //圖例背景顏色
    backgroundColor:"transparent",
    // 圖例標記的圖形寬度。[ default: 25 ]
    itemWidth:12,
    // 圖例標記的圖形高度。[ default: 14 ]
    itemHeight:9,
    //圖例文字樣式設置
    textStyle:{
        color:"#333",                //文字顏色
        fontStyle:"normal",         //italic斜體  oblique傾斜
        fontWeight:"normal",        //文字粗細bold bolder lighter  100 | 200 | 300 | 400...
        // fontFamily:"sans-serif",   //字體系列
        fontSize:12,                //字體大小
    }
}

3、極座標區域大小控制

radius:'65%',

4、極座標指示器配置

formatter動態拼接指示器名稱

//雷達指示器參數配置
indicator:[
    {"name":"車輛已售","value":380,"max":500},
    {"name":"商家冒充個人","value":290,"max":500},
    {"name":"商家服務態度差","value":450,"max":500},
    {"name":"電話無法接通","value":300,"max":500},
    {"name":"走私套牌抵押車","value":480,"max":500},
    {"name":"價格高於標價","value":200,"max":500},
    {"name":"賣新車","value":350,"max":500},
    {"name":"圖片與車款不符合","value":333,"max":500}
]
name: {
    textStyle: {
        color: '#999',
        backgroundColor: 'transparent'
        // borderRadius: 3,
        // padding: [3, 5]
   },
   formatter:function(value,indicator){
           //指示器名稱過長截取
        value = value.replace(/\S{4}/g, function(match) {
            return match + '\n'
        })
        // value = value + '\n' + indicator.value;
        return '{a|'+value+'}'+ '\n' + '{b|'+indicator.value+'}'
    },
    //富文本編輯 修改文字展示樣式
    rich:{
        a:{
            color:"#999",
            fontSize:12,
            align: "center"

        },
        b:{
            color:"#333",
            fontSize:17,
            align: "center"
        }
    }
}
formatter回調參數：
value:返回indicator指示器的name值 如：車輛已售
indicator: 返回雷達指示器的所有參數 如：{"name":"車輛已售","value":380,"max":500}
rich定義富文本樣式
可區分引用rich裏面定義的樣式 如上

5、點擊事件綁定

click事件

onChartClick(param,echarts){
    console.log(param)
}
render(){
    let onEvents={
        'click': this.onChartClick.bind(this)
    }
    return(
        <div className="echartsRadar">
            <ReactEcharts
                option={this.getOption()} 
                notMerge={true}
                lazyUpdate={true}
                onEvents={onEvents}
                style={{width: '100%',height:'100%'}}
            />
        </div>
    )
}

返回參數

param返回當前點擊的所有參數信息

點擊雷達圖區域：

點擊指示器顯示部分

legend標籤點擊事件

onChartLegendselectchanged(param,echarts){
    console.log(param)
}
render(){
    let onEvents={
        'legendselectchanged': this.onChartLegendselectchanged.bind(this)
    }
    return(
        <div className="echartsRadar">
            <ReactEcharts
                option={this.getOption()} 
                notMerge={true}
                lazyUpdate={true}
                onEvents={onEvents}
                style={{width: '100%',height:'100%'}}
            />
        </div>
    )
}

回調參數：

param:
{
    "name":"今日更新投訴量",
    "selected":{
        "今日更新投訴量":false,
        "昨日更新投訴量":true
    },
    "type":
    "legendselectchanged"
}

完整代碼

import React, { Component } from 'react';
import '../scss/echartsRadar.scss';//引入組件依賴樣式
// 引入 ECharts 主模塊
import echarts from 'echarts/lib/echarts';
// 引入雷達圖
// import  'echarts/lib/chart/radar';
// 引入提示框和標題組件
// import 'echarts/lib/component/tooltip';
//引入title
// import 'echarts/lib/component/title';
//引入圖例
// import 'echarts/lib/component/legend';
import ReactEcharts from 'echarts-for-react';
const mytextStyle={
    color:"#333",                //文字顏色
    fontStyle:"normal",         //italic斜體  oblique傾斜
    fontWeight:"normal",        //文字粗細bold   bolder   lighter  100 | 200 | 300 | 400...
    // fontFamily:"sans-serif",   //字體系列
    fontSize:12,                //字體大小
};
export default class EchartsRadar extends Component {
    constructor(props){
        super(props);
        this.state={
            
        };
        // this.indicator = []
    }
    
    
    /**
     * @description 配置圖表
     * @returns 
     * @memberof EchartsRadar
     */
    getOption(){
         return {
            title: {
                text: ''
            },
            //點擊提示標籤
            // tooltip: {},
            legend: {
                //圖例文字展示
                data: [
                    { name:'今日更新投訴量' }, 
                    { name:'昨日更新投訴量' }],
                //圖例顯示在底部
                bottom:0,
                //圖例背景顏色
                backgroundColor:"transparent",
                // 圖例標記的圖形寬度。[ default: 25 ]
                itemWidth:12,
                // 圖例標記的圖形高度。[ default: 14 ]
                itemHeight:9,
                //圖例文字樣式設置
                textStyle:mytextStyle
            },
            radar: {
                //雷達圖繪製類型，支持 'polygon' 和 'circle' [ default: 'polygon' ]
                shape: 'polygon',
                splitNumber: 3,
                center:['50%','50%'],
                radius:'65%',
                //指示器名稱和指示器軸的距離。[ default: 15 ]
                nameGap:5,
                triggerEvent:true,
                name: {
                    textStyle: {
                        color: '#999',
                        backgroundColor: 'transparent'
                        // borderRadius: 3,
                        // padding: [3, 5]
                   },
                   formatter:function(value,indicator){
                        value = value.replace(/\S{4}/g, function(match) {
                            return match + '\n'
                        })
                        // value = value + '\n' + indicator.value;
                        return '{a|'+value+'}'+ '\n' + '{b|'+indicator.value+'}'
                    },
                    //富文本編輯 修改文字展示樣式
                    rich:{
                        a:{
                            color:"#999",
                            fontSize:12,
                            align: "center"
                            
                        },
                        b:{
                            color:"#333",
                            fontSize:17,
                            align: "center"
                        }
                    }
                },
                // 設置雷達圖中間射線的顏色
                axisLine: {
                    lineStyle: {
                        color: '#ddd',
                    },
                },
                indicator: [
                    {"name":"車輛已售","value":380,"max":500},
                    {"name":"商家冒充個人","value":290,"max":500},
                    {"name":"商家服務態度差","value":450,"max":500},
                    {"name":"電話無法接通","value":300,"max":500},
                    {"name":"走私套牌抵押車","value":480,"max":500},
                    {"name":"價格高於標價","value":200,"max":500},
                    {"name":"賣新車","value":350,"max":500},
                    {"name":"圖片與車款不符合","value":333,"max":500}
                ],
                //雷達圖背景的顏色，在這兒隨便設置了一個顏色，完全不透明度爲0，就實現了透明背景
                splitArea : {
                    show : false,
                    areaStyle : {
                        color: 'rgba(255,0,0,0)', // 圖表背景的顏色
                    },
                }
            },
            series: [{
                name: '投訴統計',
                type: 'radar',
                //顯示雷達圖選中背景
                areaStyle: {normal: {}},
                data: [
                    {
                        value : [380, 290, 450, 300, 480, 200, 350, 333],
                        // 設置區域邊框和區域的顏色
                        itemStyle: {
                            normal: {
                                //雷達圖背景漸變設置
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0.5,
                                    color: 'rgba(48,107, 231, 1)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(73,168, 255, 0.7)'
                                }]),
                                //去除刻度
                                opacity:0,
                                //雷達圖邊線樣式
                                lineStyle: {
                                    width: 0,
                                    color: '#306BE7',
                                },
                            },
                        },
                        name : '今日更新投訴量',
                        id: "jintian"
                    },
                    {
                        value : [10, 250, 100, 370, 80, 500, 190, 400],
                        // 設置區域邊框和區域的顏色
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0.5,
                                    color: 'rgba(139,241, 134, 0.7)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(0,208, 131, 1)'
                                }]),
                                opacity:0,
                                lineStyle: {
                                    width: 0,
                                    color: '#8BF186',
                                },
                            },
                        },
                        name : '昨日更新投訴量',
                        id: "zuotian"
                    }
                ]
            }]
        };
    }
    /**
     * @description 雷達圖選中區域點擊事件和外部顯示標籤點擊事件
     * @param {any} param 
     * @param {any} echarts 
     * @memberof EchartsRadar
     */
    onChartClick(param,echarts){
        console.log(param)
    }
    /**
     * @description 點擊legend事件
     * @param {any} param 
     * @param {any} echarts 
     * @memberof EchartsRadar
     */
    onChartLegendselectchanged(param,echarts){
        console.log(param)
    }
    componentWillReceiveProps(nextProps){
    }
    componentWillMount(){
    }
    componentDidMount(){
    }
    render(){
        let onEvents={
            'click': this.onChartClick.bind(this),
            'legendselectchanged': this.onChartLegendselectchanged.bind(this)
        }
        return(
            <div className="echartsRadar">
                <ReactEcharts
                    option={this.getOption()} 
                    notMerge={true}
                    lazyUpdate={true}
                    onEvents={onEvents}
                    style={{width: '100%',height:'100%'}}
                />
            </div>
        )
    }
}

依賴樣式echartsRadar.scss：

.echartsRadar{
    display: flex;
    // align-items: center;
    justify-content: center;
    height: 400px;
}
.echartsPie{
    display: flex;
    justify-content: center;
    height: 280px;
}