Echarts-for-react的使用

最新推荐文章于 2024-09-14 07:39:12 发布
最新推荐文章于 2024-09-14 07:39:12 发布
阅读量2.7k 收藏 5
点赞数 2
原文链接：http://www.cnblogs.com/gongchenghui/p/10370824.html
版权

示例

一、安装

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>
        )
    }
}

转载于:https://www.cnblogs.com/gongchenghui/p/10370824.html

weixin_30725467
关注
echarts 自适应_精读 《 echarts-for-react 源码 》
weixin_39816448的博客
11-29 511
1 引言echarts 可以轻松实现数据可视化图表，在工作中我通常使用其 React 封装版本 echarts-for-react 让我们看一下它的封装思路。2 简介echarts-for-react 提供了 option 属性传入图表配置项，API 如下：import ReactEcharts from "echarts-for-react" import React from "react" ...
echarts-for-react 源码分析
weixin_42756155的博客
02-11 1391
1、目录结构： docs —— 文档，dumi src helper —— 工具文件夹 core.tsx —— 核心代码，EChartsReactCore 类 index.ts —— 继承 EChartsReactCore 类，初始化 echarts 为引入的 echarts 包 types.ts —— 主要是 EChartsReactP...
echarts-for-react 安装和配置指南
gitblog_07652的博客
09-13 376
echarts-for-react 安装和配置指南 echarts-for-react ⛳️ Apache ECharts components for React wrapper. 一个简单的 Apache echarts 的 React 封装。 ...
在微信小程序中使用ECharts图表库教程
最新发布
gitblog_00457的博客
09-14 1144
在微信小程序中使用ECharts图表库教程 项目地址:https://gitcode.com/gh_mirrors/ech/echarts-for-weixin 项目介绍 echarts-for-weixin 是一个基于 Apache ECharts 的微信小程序图表库。它允许开发者在微信小程序中通过熟悉的 ECharts 配置方式快速开发图表，满足各种可视化需求。该项目提供了一个小程序组件，开发...
【React】echarts-for-react 的使用
qq_45677671的博客
12-26 3279
echarts-for-react ：一个简单的 Apache echarts 的 React 封装，方便用于React项目
echarts-for-react
吃蛋糕的居居
06-05 373
echarts
在 React 中使用 echarts-for-react / react ，如，柱状图，折线图，饼图
名人卷耶
07-01 3795
111
ECharts for React
waillyer的博客
08-30 1137
这里写目录标题文档安装使用 文档 https://git.hust.cc/echarts-for-react/ 安装 使用echart-for-react包，他依赖于echarts包 $ npm install echarts-for-react --save 或$ yarn add echarts-for-react --save yarn add echarts --save 使用 import React from 'react'; import { PageContainer } from '@a
echarts-for-react的使用详解
https://www.xiaohongshu.com/user/profile/5f3543150000000001002b2e
10-24 4万+
Echarts-for-react的使用 示例 一、安装 npm install --save echarts-for-react //如果需要使用echarts的一些特殊方法需要安装 npm install --save echarts 二、使用 import ReactEcharts from 'echarts-for-react'; import echarts from 'echart...
echarts在react中的使用
早晚的博客
07-21 276
在echarts中需要修改source下的product的颜色的话需要在这里修改。 legend: { textStyle:{color:"#fff"} },
echarts-for-react——react项目中使用echarts
qq_40678503的博客
11-07 3386
最近有在做的项目需要在react中使用echarts。 安装 npm install --save echarts-for-react npm install --save echarts 然后导入echarts.js模块 引入全部的 import ReactEcharts from "echarts-for-react"; 减少包的大小也可以按需引入 import echarts from ...
使用echarts-for-react时更新数据方法总结
Yangson工作室
02-09 2847
目录 目录使用`echarts-for-react`时更新数据方法总结使用`Echarts API`更新使用函数获取数据更新 使用echarts-for-react时更新数据方法总结 效果预览 使用Echarts API更新 在ReactEcharts组件中，设置ref属性，传入回调函数，获取ref 在React的生命周期方法componentDidMount中，获取echarts实例，利用 setOptionAPI更新数据 完整代码 文字版 import React, { Co
eCharts增加图例（legend）的点击事件--echarts-for-react
x先生的博客
04-20 1万+
1. 功能需求： 用户点击图例，进入下钻页面。 2. 背景 使用echarts-for-react开发的图表，echarts的点击事件不能应用与图例，点击图例会触发legendselectchanged事件。图例选择与非选中状态会直接影响到图表的展示效果，非选中状态图例对应的内容不会再图表内展示。当我点击图例时，页面跳转至下钻页面。 3. 解决思路 需要保证点击图例时，页面跳转至下钻页面，但是被点...
使用echarts-for-react时,切换数据源图表数据源改变,渲染异常解决方案
BrocYu的博客
10-27 709
import Echarts form "echarts-for-react" const EchartsForReact = props => { const [option,setOption] = useState({}) const echarts_react = useRef(null) useEffect(()=>{ //主要是这里--从Echart组件能读取到销毁的方法 echarts_react.current && echarts_react.cu
React使用echarts-for-react
大灰狼的小绵羊哥哥的博客
04-26 2858
参考npm文档：[echarts-for-react](echarts-for-react) 由于npm上已经有针对react项目出的echarts插件,所以在这里直接安装 第一步：npm安装echarts-for-react npm install --save echarts-for-react npm install echarts --save //如果有报错找不到echarts模块，需要在安装一下exharts' 第二步：引入模块和组件 import echarts from 'e
echarts-for-react -- 封装的echarts插件
m0_67011584的博客
10-25 1943
封装组件要考虑接收数据、元素id唯一、盒子宽高等因素，可以通过组件等props接收。
使用 `echarts-for-react` 构建数据可视化应用
gitblog_01125的博客
08-09 878
使用 echarts-for-react 构建数据可视化应用 项目地址:https://gitcode.com/gh_mirrors/ec/echarts-for-react 项目介绍 echarts-for-react 是全网开发者下载量最高的Apache ECharts 的 React 组件封装库。该库使在React环境下集成ECharts变得简单直观。借助此库，开发人员可以轻松地将复杂的数据...
在react中使用echarts，echarts-for-react
MFWSCQ的博客
09-26 1万+
我们在做项目的时候经常会遇到会使用各种各样的图表，在react项目中处理图标时使用echart-for-react包，他依赖于echarts包 安装： npm install --save echarts npm install --save echarts-for-react 引入并使用： import ReactEcharts from 'echarts-for-react'; ...
echarts for react的使用
热门推荐
旭旭1998的博客
12-03 6万+
经测试，echarts for react不支持echarts最新版本5.0.0因此引入4.9.0最新版 npm install echarts@4.9.0 npm install echarts-for-react@2.0.16 依赖安装好即可使用： import React, { useState, useEffect } from 'react'; import { Card } from 'antd'; import ReactEcharts from 'echarts-for-react';
React中使用Echarts
duansamve的博客
02-02 634
首先安装echarts和echarts-for-react，版本一定要对，package.json： "dependencies": { "echarts": "^4.9.0", "echarts-for-react": "^2.0.16", } 完整代码如下： import React, { Component } from 'react' import { Card } from 'antd'; import ReactEcharts from 'echarts-for-r
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值