React使用ECharts

最新推荐文章于 2024-07-25 18:06:29 发布
置顶 最新推荐文章于 2024-07-25 18:06:29 发布
阅读量5.8k 收藏 18
点赞数 1
分类专栏： 前端 文章标签： react echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49928737/article/details/109493031
版权

React使用ECharts

ECharts官网

安装ECharts

	npm install echarts --save

引入模块

// 引入 ECharts 主模块
import * as echarts from 'echarts';

入门示例

import * as echarts from 'echarts';
import ReactDOM from 'react-dom';
import React, { Component } from 'react';

class Index extends Component {
    componentDidMount() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('forms'));
        // 绘制图表
        myChart.setOption({   
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量1','销量2']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [
                {
                name: '销量1',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
                },
                {
                    name: '销量2',
                    type: 'line',
                    data: [15, 30, 46, 46, 46, 30]
                }
            ]
        });
    }
    render() {
        return (
            <div id="forms" style={{width:'650px',height:'350px'}}></div>
        )
    }
}

ReactDOM.render(
  <Index />,
  document.getElementById('root')
)
运行结果

在这里插入图片描述

向后台发送请求获取数据

import * as echarts from 'echarts';
import ReactDOM from 'react-dom';
import React, { Component } from 'react';

class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data1: [],
      data2: []
    }
  }

  componentDidMount() {
    /*
    * 页面加载时从后台获取数据
    */
    this.getData();
  }

  getData() { //请求数据函数
    fetch('请求路径', {
      method: 'GET'
    }).then(res => res.json()).then(
      data => {
        this.setState({
          data1: data.data1,
          data2: data.data2
        })
        
        this.demo()
      }
    )
  }

  demo() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('forms'));
    // 绘制图表
    myChart.setOption({
      title: {
        text: 'ECharts 入门示例'
      },
      tooltip: {},
      legend: {
        data: ['销量1', '销量2']
      },
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
      },
      yAxis: {},
      series: [
        {
          name: '销量1',
          type: 'bar',
          data: this.state.data1
        },
        {
          name: '销量2',
          type: 'line',
          data: this.state.data2
        }
      ]
    });
  }

  render() {
    return (
      <div id="forms" style={{ width: '650px', height: '350px' }}></div>
    )
  }
}

ReactDOM.render(
  <Index />,
  document.getElementById('root')
)

设置阴影部分颜色渐变

import * as echarts from 'echarts';
import ReactDOM from 'react-dom';
import React, { Component } from 'react';

class Index extends Component {
    componentDidMount() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('forms'));
        // 绘制图表
        myChart.setOption({   
            title: {
                text: '阴影部分颜色渐变'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [
                {
                    name: '销量',
                    type: 'line',
                    data: [20, 30, 46, 46, 46, 30],
                    areaStyle: {
                      color: {
                        // type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: '#FF6600' // 0% 处的颜色
                        }, {
                           // offset: 0.5, color: '#FFFFFF' // 100% 处的颜色 
                            offset: 1, color: '#FFFFFF' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                      }
                    }
                }
            ]
        });
    }
    render() {
        return (
            <div id="forms" style={{width:'650px',height:'350px'}}></div>
        )
    }
}

ReactDOM.render(
  <Index />,
  document.getElementById('root')
)
运行结果

在这里插入图片描述

x轴的一些配置

import * as echarts from 'echarts';
import ReactDOM from 'react-dom';
import React, { Component } from 'react';

class Index extends Component {
  componentDidMount() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('forms'));
    // 绘制图表
    myChart.setOption({
      title: {
        text: 'demo'
      },
      tooltip: {},
      legend: {
        data: ['销量']
      },
      xAxis: {
        boundaryGap: false,//默认true，数据显示在刻度线中间，false显示在刻度线上
        position: "top",//数据显示位置，默认在下面，top显示在上面
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        splitLine: {  
          show: true, //是否显示分割线
          lineStyle: { //刻度线的样式设置。
            color:'#FF9933',
            opacity: 0.1
          }
        },
        //axisLine: {show:false},//默认true，显示轴线，false不显示轴线
      },
      yAxis: {
      },
      series: [
        {
          name: '销量1',
          type: 'line',
          data: [15, 30, 46, 46, 46, 30],
        }
      ]
    });
  }
  render() {
    return (
      <div id="forms" style={{ width: '650px', height: '350px' }}></div>
    )
  }
}

ReactDOM.render(
  <Index />,
  document.getElementById('root')
)
运行结果

在这里插入图片描述

使用echarts水波球

在package.json中引入echarts-liquidfill

"echarts-liquidfill": "^2.0.2",

创建waterWavBallEcharts.js

import * as echarts from "echarts";
import "echarts-liquidfill";

export function shuiBoQiuchers(id,data) {
    var chartDom = document.getElementById(id);
    if (null != chartDom) {
        var myChart = echarts.init(chartDom);
        var option = {
            backgroundColor: '#F0FFF0',
            series: [
                {
                    type: 'liquidFill',
                    radius: '80%',
                    center: ['50%', '50%'],
                    data: data,
                    backgroundStyle: {
                        borderWidth: 1,
                        color: '#F0FFFF' 
                    },
                    waveLength: '30%',
                    amplitude: 10,//波浪的幅度
                    itemStyle: {
                        color: '#32C5FF'
                    },
                    label: {
                        normal: {
                            formatter: function (value) {
                                return  value.data*100 + '%';
                            },
                            textStyle: {
                                fontSize: 45,
                                color: '#000'
                            }
                        }
                    },
                    outline: {
                        show: false,
                    }
                },
            ]
        }
        option && myChart.setOption(option);
    }
}

引入waterWavBallEcharts

import React from 'react';
import ReactDOM from 'react-dom';
import {shuiBoQiuchers} from "./waterWavBallEcharts";

export class WaterWavBall extends React.Component{
	
  componentDidMount(){
    let data=[0.6];
    shuiBoQiuchers("shuiboqiu", data);
  }
  
  render(){
    return (
        <div id="shuiboqiu" style={{width:600,height:600}}></div>
    )
  }
}

ReactDOM.render(
  <React.StrictMode>
    <WaterWavBall />
  </React.StrictMode>,
  document.getElementById('root')
);

完成效果如下

在这里插入图片描述

weixin_49928737
关注
  • 1
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
React使用echarts显示中国地图
weixin_55652851的博客
07-03 1036
return value.data.name + "" + "数量：" + value.data.num;'#BBF6A4' : "#0efacc",//圆点边框颜色。'#BBF6A4' : "#0efacc",//圆点背景颜色。regions: [//此方法是把显示南海诸岛的框给去掉，如果要显示，删除即可。borderColor: "#a0d4e7", // 地图边框线色。areaColor: "#e5f7ff", // 地图图形颜色。borderWidth: 1, // 地图边框线宽。
如何在React项目中使用ECharts图表库
sdasadasds的博客
11-16 9591
如果在原生的JS应用或者jQuery项目中，我们常用的方式就是直接去官网下载其核心js文件并导入我们的项目中使用，但是在React项目中，我们大可不必，由于React项目开发基于webpack做了二次封装，而webpack又是基于 Node.js的前端项目部署打包工具，总而言之，React项目开发是在nodejs环境基础上，所以可以直接利用npm包管理器将第三方工具模块下载加入到项目中，并通过import引入对应的模块到相关页面中使用，不需要关心其中的细节。1、通过极坐标双数值轴绘制爱心。
react 使用 echarts
山东理工1134
04-08 1123
一、安装 npm install --save echarts-for-react npm install --save echarts `二、引用 import * as charts from 'echarts'; import ReactEcharts from 'echarts-for-react'; type EChartsOption = charts.EChartsOption; 三、使用 export default function Echart_1() { const getOp
react中使用Echarts
m0_46313328的博客
10-26 5299
import React, { useEffect, useRef } from 'react' import * as echarts from 'echarts' //(*===所有)，导入所有 并命名为echarts const Echarts = () => { const chartRef = useRef() const options = { // 标题 title: { text: "柱状图" .
React--》打造可通用的数据可视化Echarts组件
最新发布
ztK63LrD的博客
07-25 427
在本篇文章中，波追将探讨如何利用 React 框架和 Echarts 库来打造通用的数据可视化组件，无论是展示复杂的数据趋势，还是创建交互式的图表，React 和 Echarts 的结合将为您的应用带来无限的可能性。
react中使用echarts
酸乳乳酸的博客
01-28 361
import React, { Component } from 'react'; // 引入 ECharts 主模块 import echarts from 'echarts/lib/echarts'; // 引入柱状图 import 'echarts/lib/chart/bar'; // 引入提示框和标题组件 import 'echarts/lib/component/tooltip';...
react使用echarts
qq_43362070的博客
06-15 3794
1.引入echarts 2.创建子组件 3.在父组件中导入
react + echarts实现环形进度
weixin_40581358的博客
12-08 261
子组件 - ProgressCircle.tsx。
hooks_echarts:在React的钩子中使用echarts
05-06
react的hooks兴起之后，我们开始了新技术的探研，重新构建了以react，hooks，echarts为基准的框架，对可视化的封装。开箱即可用，非常实用，特别是如果对echarts有需求的。 项目介绍 hooks刚出来时我们就在使用，...
在React 组件中使用Echarts的示例代码
08-28
React 中使用 Echarts 的示例代码 在 React 组件中使用 Echarts 的示例代码是非常重要的，特别是在需要可视化数据的时候。Echarts 是一个功能强大且灵活的数据可视化库，它提供了多种类型的图表，包括柱状图、折线...
React中使用echarts绘制图表
林仔520的博客
05-28 8562
我们都知道，Echarts图表功能非常强大，使用起来也很方便，我们的项目中就用到了Echarts，现在笔者就带大家看看怎么在react中使用Echarts。 我们要想在react项目中高效使用echarts，建议大家安装echarts-for-react,它是一个简单的 echarts(v3.0)的 react 封装。在我们实际项目中使用非常简单。 如果是在react项目中使用图表，大家也可以使用bizcharts绘制图表，因为它是完全为react开发的，所以使用起来更容易上手。BizCharts 是一..
react使用Echarts（React）
0.0 的博客
02-16 572
除了 Echarts 自身外，我们还可以搭配 echarts-for-react 插件来一起实现数据可视化渲染。 一、下载 yarn add echarts echarts-for-react 二、使用 1、引入依赖包 import ReactEcharts from 'echarts-for-react'; 2、绘制图表 export default class Payment extends Component { state = { option: { .
React中使用Echarts
duansamve的博客
02-02 618
首先安装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
React中使用ECharts
weixin_45679977的博客
03-01 673
下载依赖 cnpm i echarts cnpm i echarts-for-react React特殊写法 import React,{Component} from 'react'; import ReactEcharts from 'echarts-for-react'; class ECharts extends Component { constructor() { ...
React 使用 Echarts
sshgdgd的博客
01-09 924
Ehcarts图表如果Echarts官网中的图表实例无法满足自己的需求，给大家推荐一个。,这个社区中有非常多无论是效果还是样式都非常不错的图表，供大家学习使用。2.使用Echarts。
前端知识 | 浅谈在React中使用echarts
weixin_34234721的博客
01-30 212
方法一：echarts-for-react 是一个非常简单的针对于 React 的 Echarts 封装插件。和使用所有其他插件一样，首先，我们需要 install 它：第一步：npminstall --save echarts（依赖）npminstall --save echarts-for-react第二步：在我们的项目中导入：importReactEcharts fro...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值