echarts-for-react的使用详解-程序员宅基地

技术标签: 【react 技术栈】  echarts  js  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;
}
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/gongch0604/article/details/83346101

智能推荐

router-link结合v-for使用(跳转详情)_router-link v-for-程序员宅基地

文章浏览阅读1.6k次。router-link结合v-for使用:今天实现列表页跳转到详情页 我没有用编程式导航 用的router-link实现跳转<template> <div class="jingpin"> <div class="jingpinclass">{{battleList[1].channel_info.name}}</div> <router-link class="jingpinbox" v-for="(ele,index) in _router-link v-for

后端数据库时间传入前端为一串数字(时间戳)解决方法_前端时间是数字传到后端-程序员宅基地

文章浏览阅读2.6k次,点赞3次,收藏12次。先看一下前端显示的问题但是在数据库中设置并显示如下此时就需要从后端设置一下显示的转化重要的转化代码如下@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone = "GMT+8") //转化时间戳private Date time; 如此便可转化成功..._前端时间是数字传到后端

Looper、MessageQueue、Handler三者关系理解_queuedmessagehandling-程序员宅基地

文章浏览阅读1.5k次。1.Looper有两个关键的放perpare(),loop()方法,在prepare方法会创建一个Looper对象,然后保存在ThreadLocal中,该方法只能被调用一次,否则会抛出异常,这样保证了一个线程只有一个looper,Looper构造器中创建MessageQueue对象public static final void prepare() { if_queuedmessagehandling

TOGAF ADM: 它是什么,它为什么如此重要?-程序员宅基地

文章浏览阅读6.4k次,点赞2次,收藏9次。TOGAF是开放式组织架构框架。框架本身是一个记录良好的知识体系,包括详细的方法和一组用于开发企业体系结构的支持工具。TOGAF 9.2 是该框架的最新版本。TOGAF由The Open Group的成员开发和维护,在一个名为Architecture Forum的团队中工作。TOGAF第1版的最初发展于1995年制作,TOGAF的后续版本扩展和改进了这一知识体系。 TOGAF是通过代表一些世..._togaf adm

php掌握技术,谈谈新手如何学习掌握PHP技术-程序员宅基地

文章浏览阅读98次。你能否成功,还得靠你自己。坚持,坚持,再坚持,就是步入成功的不二法门。1.熟悉HTML/CSS/JS等网页基本元素,可自行制作完整网页,对网页元素熟悉达到熟悉。2.理解动态语言概念,运作机制,熟悉PHP的语法。3.学习如何将PHP与HTML结合起来完成简单动态页面。4.接触MySQL,开始设计数据库程序。5.不断巩固,摸透大部分PHP常用函数,理解OOP,MySQL优化以及模板。6.完成一个功能齐..._3.掌握php技术

梦工厂动画与Qt_python 梦工厂动画-程序员宅基地

文章浏览阅读3.7k次。大家新年快乐,2011年的第一篇博文选择了一个比较轻松的话题,当然还是关于Qt的 :) 去年在德国举行的Qt开发者大会邀请了梦工厂的研发总监,讲述了一个梦工厂与Qt的美丽故事。演讲内容本人很喜欢,特节选、加工向大家介绍。 演讲的主题:梦工厂动画背后的故事 梦工厂是一家著名的电影制作发行公司,塑造了很多经典、耳熟能详的形象,比如怪物史莱克、功夫熊猫、变形金刚等等。 梦工厂是一个电影制造公司,但从某种意思上讲,他也是一家科技公司。因为其动画电影是100%由设计、开发人员通过电脑制作完成的。 现_python 梦工厂动画

随便推点

12. ArrayList测试代码_pubilc class testarraylist-程序员宅基地

文章浏览阅读260次。1.iterator,边遍历边删除public class TestArrayList { public static void main(String[] args) { ArrayList&amp;lt;Integer&amp;gt; list = new ArrayList&amp;lt;&amp;gt;(); list.add(1); list.add(2);..._pubilc class testarraylist

Elasticsearch模块功能之-索引分片分配(Index shard allocation)_index.routing.allocation.total_shards_per_node-程序员宅基地

文章浏览阅读2.1w次。1、分片分配 包含或者排除filters可以来控制基于节点的索引分配。filters可以在索引级别和集群级别进行设置。如下使用集群级别举例: 设定有4个节点,每个的节点指定一个属性tag(可以随意修改),并赋予特定值,比如节点1设置为node.tag:value1,节点二设置为node.tag:value2等等。创建索_index.routing.allocation.total_shards_per_node

距离(lca,倍增, tarjan)_给出 nn 个点的一棵树,多次询问两点之间的最短距离。 注意: 边是无向的。-程序员宅基地

文章浏览阅读96次。Link给出 n个点的一棵树,多次询问两点之间的最短距离。注意:边是无向的。所有节点的编号是 1,2,…,n。输入格式第一行为两个整数 n和 m。n 表示点数,m表示询问次数;接下来 n−1行,每行三个整数 x,y,k,表示点 x 和点 y 之间存在一条边长度为 k;再接下来 m行,每行两个整数 x,y,表示询问点 x 到点 y的最短距离。树中结点编号从 1到 n。输出格式共 m行,对于每次询问,输出一行询问结果。数据范围2≤n≤1042≤n≤1042≤n≤104,1≤m_给出 nn 个点的一棵树,多次询问两点之间的最短距离。 注意: 边是无向的。

git功能小记-程序员宅基地

文章浏览阅读285次。理解跟踪定义:初次克隆某个仓库的时候,工作目录中的所有文件都属于已跟踪文件,并处于未修改状态。编辑过某些文件之后,由于自上次提交后你对它们做了修改,Git 将它们标记为已修改文件。必须先将他们的工作拉取(pull)下来并将其合并进你的工作后才能推送Git 保存的不是文件的变化或者差异,而是一系列不同时刻的文件快照。当 git fetch 命令从服务器上抓取本地没有的数据时,它并不会修改...

Concurrent In Java-程序员宅基地

文章浏览阅读1k次。这一系列只是对JUC各个部分做了说明和介绍,没人深入原理!concurrent并发包,让你易于编写并发程序。并发下我们经常需要使用的基础设施和解决的问题有ThreadPool、Lock、管道、集合点、线程之间等待和唤醒、线程间数据传输、共享资源访问控制、并发线程之间的相互等待,等待。concurrent提供的工具能够解决绝大部分的场景,还能提高程序吞吐量。现代的服务器多采用多核CPU,

Spring Boot + Swagger 导出Pdf,Html-程序员宅基地

文章浏览阅读285次。1. Maven 配置 <dependency> <groupId>io.github.swagger2markup</groupId> <artifactId>swagger2markup</artifactId> <version>1.3.1</version&..._springboot swagger 导出pdf

推荐文章

热门文章

相关标签