react native 使用echarts做面积图

2023-10-27

react native 使用echarts 我用到了一个组件 react-native-secharts
https://github.com/shifeng1993/react-native-secharts
使用

import {Echarts, echarts} from 'react-native-secharts'
 <Echarts ref="echarts1" option={option1} width={screen.width-50} height={240}/>
const option1={
           title : {
             text: '成员当月完成量',
             left:winWidth/3,
             textAlign:'center',
             textStyle:{
                  color:'#0073ff',
                  fontSize:16,
                // fontFamily:'sans-serif'
             }
          },
          tooltip : {
            trigger: 'axis'
           },
          calculable : true,
           xAxis : [
                    {
                        type : 'category',
                        boundaryGap : false,
                        data : ['11/01','11/16','11/30'],
                        axisLine:{
                            lineStyle:{
                                color:'#cccccc'
                            }
                       },
                    //    splitLine: {
                    //      show: false,
                    //      interval: 'auto',
                    //      lineStyle: {
                    //          color: ['#EEEEEE']
                    //      }
                    //    },
                       axisLabel: {
                            margin: 10,
                            textStyle: {
                                color:'#333333',
                                fontSize: 13
                            }
                       }
                    }
                ],
            yAxis : [
                {
                     type : 'value',
                     axisLine:{
                            lineStyle:{
                                color:'#cccccc'
                            }
                       },
                       axisLabel: {
                            margin: 10,
                            textStyle: {
                                color:'#333333',
                                fontSize: 13
                            }
                       },
                      
                 }
             ],
             series : [

                 {
                     name:'完成量',
                     type:'line',
                     smooth:true,
                     itemStyle: {normal: {
                         areaStyle: {color:'#29fff8'},
                         lineStyle:{
                            width:1,
                            color:'#55adf5'
                          },
                          //设置渐变
                        //   areaStyle: {
                        //     normal: {
                        //         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        //             offset: 0,
                        //             color: 'rgba(16, 79, 193,1)'
                        //         }, {
                        //             offset: 1,
                        //             color: 'rgba(125, 178, 244,1)'
                        //         }], false)
                        //      }
                        //    },
                        //     itemStyle: {
                        //         normal: {
                        //             color: 'rgba(16, 79, 193,1)'
                        //         }
                        //     },
                      }    
                    },
                     data:[30, 390,   182]   
                 }
             ]       
       }

在这里插入图片描述

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

react native 使用echarts做面积图 的相关文章

随机推荐

  • 系统重装系列(一)

    系统重装系列 一 自从上了大学后这电脑里的软件是越来越多 各种语言的环境配置 数据库 做题工具等等等 也懒得去一个个卸载 因为安装的太多geek卸载扫描都要半天 此外 好奇win11进行了抢先升级 大问题没有 但小Bug很头疼 最烦的是电池
  • 计算机基础知识(基础入门小白专属)五

    作者 小刘在这里 每天分享云计算网络运维课堂笔记 疫情之下 你我素未谋面 但你一定要平平安安 一 起努力 共赴美好人生 夕阳下 是最美的 绽放 愿所有的美好 再疫情结束后如约而至 目录 一 键盘特殊的按键功能
  • 【瑞吉外卖day05】

    套餐管理业务 1 新增套餐 1 1需求分析 1 2 代码开发 首先是套餐菜品关系类SetmealDish Data public class SetmealDish private Long id private Long setmealI
  • 数据分析系列之目录

    数据挖掘系列前言和目录 1 前言 为什么我要开这个系列 我明白 未来会是数据的天下 就如区块链而言 它是目前无法单独去生存下去 而是与其他技术绑定 才能更好地发挥未来的作用 什么是数据分析 就拿区块链的挖矿类比来说 数据就是矿 如何从大量矿
  • 数据表示——原码、反码、补码、移码

    到目前为止 我们学习了十进制 二进制 八进制 十六进制等用来代表实际数值的数 称为真值 这些数我们再日常生活中都会使用到 那么在计算机中数值是怎么来表示的呢 数在计算机中的表示形式统称为机器数 计算机中处理数据及运算都是采用二进制 通常规定
  • SpringBoot项目结构介绍

    访问 http start spring io 网址 进行项目导入 基本项目结构 src main java 程序开发以及主程序入口 src main resources 配置文件 src test java 测试程序 官方建议项目结构 m
  • Speech框架API

    文章目录 Speech SFVoiceAnalytics SFSpeechRecognitionResult SFTranscription SFTranscriptionSegment SFSpeechRecognitionRequest
  • React 基本简介(1)

    什么是 React 用于构建用户界面的 JavaScript 库 React API 是处理视图的 API 集合 React 仅仅负责 View 层渲染 一个视图渲染的工具库 不做框架的事情 打包 utils 等 React 组件组成 一个
  • 有多条业务线,mysql建多库多表比较好还是一个库多个表比较好呢?

    选择使用多库多表还是一个库多个表 取决于你的具体情况和需求 以下是一些考虑因素 数据隔离 如果每条业务线需要完全独立的数据隔离 例如不同业务线的数据不会相互关联或共享 那么使用多库可以更好地实现数据隔离 管理和维护 使用多库可以将不同业务线
  • pycharm2022.2.4在jupyter notebook模式下画动图不显示

    pycharm2022 2 4在jupyter notebook模式下画动图不显示 解决办法是 matplotlib auto 曾尝试过 matplotlib notebook 还是不行 notebook模式在web浏览器中可以正常使用 能
  • 输入20个学生的成绩,求平均成绩。要求控制成绩输入的正确性,即控制输入的成绩必须为0—100分。(C语言)

    代码 include
  • 【C语言】静态通讯录的实现

    需要云服务器等云产品来学习Linux的同学可以移步 gt 腾讯云 lt gt 阿里云 lt gt 华为云 lt 官网 轻量型云服务器低至112元 年 新用户首次下单享超低折扣 一 项目要求 实现一个通讯录 二 Contact h 三 Con
  • 力扣第二十七天(heap(priority queue) topic)

    文章目录 problem solution 1 problem solution problem 215 Kth Largest Element in an Array Given an integer array nums and an
  • Python判断是否保留两位以下小数的数字

    判断是否为保留两位小数的数字 def check money interface money 支付时 输入的金额可能是小数 也可能是整数 s str money if s count 1 判断小数点个数 sl s split 按照小数点进行
  • TVM张量表达式

    Get Started with Tensor Expression TVM使用一个定义域特定张量表达式来高效地构造核 In 1 import tvm import tvm testing from tvm import te import
  • jenkins配置sonar并扫描C#代码

    背景 我的jenkins搭在linux上 1 下载插件 下载插件sonarqube scanner 用来集成sonarqube 在配置任务的时候才有sonarscanner的选项 2 全局工具配置 全局工具配置windows本地的msbui
  • qt系列-qt6在线安装慢的问题

    qt unified windows x64 online exe mirror https mirrors aliyun com qt 下载速度飞快
  • Qt贪吃蛇(代码裸写,不用creator)

    先上个图哇 图1 第一关视图 图2 第二关视图 游戏说明 1 每关只需吃20颗红果即可通关 2 增加新场景 在第二关出现 3 增加刚打开程序READY状态 按空格开始 4 增加暂停功能 在程序运行中按空格暂停 再按空格继续游戏 5 只要不关
  • Python客户端发布订阅MQTT云代理消息

    MQTT基础 MQTT 是一种开放且简单的客户端服务器发布 订阅消息传输协议 专为高延迟和低网络带宽环境下不同设备之间的机器对机器通信而设计 机器对机器通信 这很容易 一个系统需要与其他系统交换信息 在物联网环境中 设备之间的通信需求急剧增
  • react native 使用echarts做面积图

    react native 使用echarts 我用到了一个组件 react native secharts https github com shifeng1993 react native secharts 使用 import Echar