react中使用echarts

先上一张效果图

渐变曲线图

React中 配置属性如下,可直接粘贴使用
import React, { useEffect, useMemo, useState } from 'react'
import * as echarts from 'echarts'
import ReactECharts from 'echarts-for-react'
 
const LineChart = (props: any) => {
 
  const option = {
    color: ['#b5e200'],

    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985',
        },
      },
    },

    grid: {
      show: false,
      top: 0,
      left: 0,
      right: 0,
      bottom: 20,
      containLabel: true,
    },
    xAxis: {
      show: true,
      type: 'category',
      boundaryGap: true,
      splitLine: {
        show: false,
        lineStyle: {
          type: [2, 6],
          color: '#64748B',
          opacity: 0.6,
        },
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: '#64748B',
          fontFamily: 'Lexend',
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        margin: 20,
        interval: 0,
      },
      data: ['02-10','02-11','02-12','02-13','02-14','02-15','02-16'],
    },
    yAxis: {
      type: 'value',
      position: 'right',
      min: 96,
      max: 100,
      splitLine: {
        show: true,
        lineStyle: {
          type: [2, 6],
          color: '#64748B',
          opacity: 0.6,
        },
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: '#64748B',
          fontFamily: 'Lexend',
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        inside: true,
        margin: 0,
        showMinLabel: false,
        showMaxLabel: false,
        verticalAlign: 'bottom', 
        formatter: function (value) {
          return value + '%'
        },
      },
    },
    series: [
      {
        name: 'category',
        type: 'line',
        smooth: true,
        lineStyle: {
          width: 3,
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.5,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgba(181,226,0,5)',
            },
            {
              offset: 1,
              color: 'rgba(255,255,255,1)',
            },
          ]),
        },
        emphasis: {
          focus: 'series',
        },
        data: [97.2,97.8,98.2,98.7,99.3,99.5,99.8],
      },
    ],
  }
return <ReactECharts option={option} style={{ height: 300 }} />
安装包依赖
npm install echarts echarts-for-react --save
或
yarn add echarts echarts-for-react 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/408999.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

C++之std::tuple(二) : 揭秘底层实现原理

相关系列文章 C之std::tuple(二) : 揭秘底层实现原理 C三剑客之std::any(一) : 使用 C之std::tuple(一) : 使用精讲(全) C三剑客之std::variant(一) : 使用 C三剑客之std::variant(二)&#xff1a;深入剖析 深入理解可变参数(va_list、std::initializer_list和可变参数模版) st…

xss靶场实战(xss-labs-master靶场)

xss-labs-master靶场链接&#xff1a;https://pan.baidu.com/s/1X_uZLF3CWw2Cmt3UnZ1bTw?pwdgk9c 提取码&#xff1a;gk9c xss-labs level 1 修改 url 地址中的name<script>alert(1)</script>&#xff0c;便可以通关 level 2 在搜索框中输入的 JS 代码无法执行 …

Programming Abstractions in C阅读笔记:p293-p302

《Programming Abstractions in C》学习第73天&#xff0c;p293-p302总结&#xff0c;总计10页。 一、技术总结 1.时间复杂度 (1)quadratic time(二次时间) p293, Algorithms like selection sort that exhibit O(N^2) performance are said to run in quadratic time。 2…

windows实现ip1:port1转发至ip2:port2教程

第一步&#xff1a;创建虚拟网卡(如果ip1为本机127.0.0.1跳过此步骤)&#xff0c;虚拟网卡的IPV4属性设置ip1 1> 创建虚拟网卡参见 Windows系统如何添加虚拟网卡&#xff08;环回网络适配器&#xff09;_windows添加虚拟网卡-CSDN博客​​​​​​ 2> 设置虚拟网卡使用…

C++——类和对象(1)

1. 类 我们之前提及过C语言是面向过程的语言&#xff0c;其解决问题的方式是关注问题过程&#xff0c;然后逐步解决。而C是面向对象编程&#xff0c;聚焦于对象&#xff0c;依靠多个对象之间的交互关系解决问题。而类这个概念的引入则是面向对象的最深刻体现。 1.1 C中的结构体…

32单片机基础:OLED调试工具的使用

下面会介绍OLED显示屏的驱动函数模块&#xff0c;先学会如何使用&#xff0c;至于OLED屏幕的原理和代码编写&#xff0c; 我们之后会再写一篇。 现在我们就是用OLED当一个调试的显示屏&#xff0c;方便我们调试程序。 为什么要调试呢&#xff0c;是为了方便我们看现象&#…

人工智能 — 点云模型

目录 一、点云模型1、三维图像2、点云1、概念2、内容 3、点云处理的三个层次1、低层次处理方法2、中层次处理方法3、高层次处理方法 二、Spin image 一、点云模型 1、三维图像 三维图像是一种特殊的信息表达形式&#xff0c;其特征是表达的空间中三个维度的数据。 和二维图像…

涵盖5大领域的机器学习工具介绍

随着数据的产生及其使用量的不断增加&#xff0c;对机器学习模型的需求也在成倍增加。由于ML系统包含了算法和丰富的ML库&#xff0c;它有助于分析数据和做出决策。难怪机器学习的知名度越来越高&#xff0c;因为ML应用几乎主导了现代世界的每一个方面。随着企业对这项技术的探…

Mockito单元测试Mockito对Service层的测试案例

前言 以下是关于Mockito的API使用文档 官网&#xff1a;http://mockito.org/ 官网英文API文档&#xff1a;https://javadoc.io/static/org.mockito/mockito-core/5.10.0/help-doc.html#index 非官方中文API文档&#xff1a;https://gitee.com/wnboy/mockito-doc-zh#mockito-%E…

软件运维维保方案-套用文档

软件运维维保方案 项目情况 1.1 项目背景 简述项目的来源、目的和重要性。 说明项目的规模、预算和预期目标。 1.2 项目现状 分析当前系统/软件的运行状态、存在的问题和潜在风险。 提供最近一次的维护报告或相关统计数据。服务简述 2.1 服务内容 明确运维服务的具体内容&…

JSON(javaScript Object Notation,Js对象标记)—我耀学IT

Json是一种轻量级的数据交换格式&#xff0c;目前使用非常广泛&#xff0c;是一种轻量级的数据交换格式。易于人阅读和编写&#xff0c;可以在多种语言之间进行数据交换 。同时也易于机器解析和生成 1.1json的值: 值可以是对象、数组、数字、字符串或者三个字面值(false、nul…

【数据分析之Numpy基础003】数组形状大变身!轻松掌握改变数组形状的技巧

处理数组的一项重要工作就是改变数组的维度&#xff0c;包括提高数组的维度和降低数组的维度&#xff0c;还包括数组的转置、拼接、分隔等。 Numpy为大家提供了大量的API可以很轻松的完成这些数组的操作。 1、改变数组的维度 如上篇文章使用到的reshape方法&#xff0c;将一维…

各国的通胀是多少?央行又使用那些指标?昂首资本1分钟分享

各国的通胀是多少&#xff1f;央行又使用哪些指标&#xff1f;今天昂首资本1分钟快速分享 在美国和欧盟&#xff0c;作为一个中期通胀目标&#xff0c;使用了一个目标指标&#xff0c;通常是为长达两年的前景计算的。在美国和欧盟&#xff0c;中期通胀目标是2%。在俄罗斯&…

【NCom】:通过高温气相合成调节Pt-CeO2相互作用以提高晶格氧的还原性

摘要&#xff1a;在这项工作中&#xff0c;我们比较了通过两种方法制备的 Pt 单原子催化剂&#xff08;SAC&#xff09;的 CO 氧化性能&#xff1a;&#xff08;1&#xff09;传统的湿化学合成&#xff08;强静电吸附strong electrostatic adsorption–SEA&#xff09;&#xf…

Mybatis总结--传参

MyBatis 传递参数&#xff1a;从 java 代码中把参数传递到 mapper.xml 文件 六、一个简单参数&#xff1a; Dao 接口中方法的参数只有一个简单类型&#xff08; java 基本类型和 String &#xff09;&#xff0c; 占位符 #{ 任意字符 } &#xff0c;和方法的参数名无关…

电脑msvcp100.dll丢失了怎么办?msvcp100.dll丢失的5种解决方法

当计算机系统中无法找到msvcp100.dll文件&#xff0c;或者遭遇msvcp100.dll丢失的情况时&#xff0c;可能会引发一系列运行问题和功能障碍。msvcp100.dll是Microsoft Visual C Redistributable Package的一部分&#xff0c;这是一个至关重要的动态链接库文件&#xff0c;对于许…

如何利用EXCEL批量插入图片

目录 1.excel打开目标表格&#xff1b; 2.点开视图-宏-录制宏&#xff0c;可以改宏的名字或者选择默认&#xff1b; 3.然后点开视图-宏-查看宏 4.点编辑进去 5.修改代码&#xff1a; &#xff08;1&#xff09;打开之后会显示有一堆代码 &#xff08;2&#xff09;将这个…

【C++进阶】STL容器--list底层剖析(迭代器封装)

目录 前言 list的结构与框架 list迭代器 list的插入和删除 insert erase list析构函数和拷贝构造 析构函数 拷贝构造 赋值重载 迭代器拷贝构造、析构函数实现问题 const迭代器 思考 总结 前言 前边我们了解了list的一些使用及其注意事项&#xff0c;今天我们进一步深入…

132 Linux 系统编程9 ,IO操作,lseek 函数,truncate函数,查看文件的表示形式

一 lseek 函数 函数说明&#xff1a;此函数用于文件偏移 Linux中可使用系统函数lseek来修改文件偏移量(读写位置) 每个打开的文件都记录着当前读写位置&#xff0c;打开文件时读写位置是0&#xff0c;表示文件开头&#xff0c;通常读写多少个字节就会将读写位置往后移多少个字…

PixPin:一键搞定截图、长截图、贴图、GIF

名人说&#xff1a;莫道桑榆晚&#xff0c;为霞尚满天。——刘禹锡&#xff08;刘梦得&#xff0c;诗豪&#xff09; 创作者&#xff1a;Code_流苏(CSDN)&#xff08;一个喜欢古诗词和编程的Coder&#x1f60a;&#xff09; 目录 一、什么是PixPin&#xff1f;①PixPin②核心功…