echarts-for-react的使用详解

Echarts-for-react的使用

示例

image

一、安装

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返回当前点击的所有参数信息

点击雷达图区域：

image

点击指示器显示部分

image

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;
}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 206,839评论 6赞 482
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 88,543评论 2赞 382
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 153,116评论 0赞 344
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 55,371评论 1赞 279
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 64,384评论 5赞 374
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,111评论 1赞 285
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,416评论 3赞 400
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,053评论 0赞 259
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,558评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,007评论 2赞 325
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,117评论 1赞 334
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,756评论 4赞 324
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,324评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,315评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,539评论 1赞 262
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,578评论 2赞 355
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,877评论 2赞 345