Echarts区域面积areaStyle用图片进行纹理填充

React DOM结构代码:

import fillImg from 'xx/fillImg.png'; // 填充纹理图片

......
{/* 趋势图填充纹理图片 */}
<img id="fillImg" src={fillImg} style={{ width: 0 }} />
<div id="line" style={{ width: '100%', height: 300 }}></div>
......

 echarts option:

option = {
  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      type: 'line',
      smooth: true,
      areaStyle: {
        color: { image: document.getElementById('fillimg'), repeat: 'repeat' }
      },
      data: [150, 230, 224, 218, 135, 147, 260]
    }
  ]
};

fillimg图片:

折线图效果:

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

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

相关文章

蓝绿发布、灰度发布和滚动发布

系列文章目录 文章目录 系列文章目录一、1.金丝雀发布&#xff08;Canary Release&#xff09;的工作原理&#xff1a;2.滚动发布&#xff08;Rolling Release&#xff09;3.蓝绿发布&#xff08;Blue-Green Deployment&#xff09;有钱人玩的&#xff01; 总结 一、 当涉及到…

深入理解深度学习——注意力机制(Attention Mechanism):带掩码的多头注意力(Masked Multi-head Attention)

分类目录&#xff1a;《深入理解深度学习》总目录 相关文章&#xff1a; 注意力机制&#xff08;AttentionMechanism&#xff09;&#xff1a;基础知识 注意力机制&#xff08;AttentionMechanism&#xff09;&#xff1a;注意力汇聚与Nadaraya-Watson核回归 注意力机制&#…

WPF中的Behavior及Behavior在MVVM模式下的应用

WPF中的Behavior及Behavior在MVVM模式下的应用 在WPF中&#xff0c;Behaviors&#xff08;行为&#xff09;是一种可重用的组件&#xff0c;可以附加到任何UI元素上&#xff0c;以添加特定的交互行为或功能。Behaviors可以通过附加属性或附加行为的方式来实现。 Behavior并不…

知识蒸馏学习记录(二)

上一篇博文中我们介绍了知识蒸馏的一些基础知识&#xff0c;这里我们来学习其到底是如何完成知识蒸馏过程的。 知识蒸馏为何可以让学生网络模型小却性能强&#xff1f; 详细很多同学与我有相同的疑问&#xff0c;尽管它依靠不同的蒸馏温度T可以学得一些hard target标注无法包…

三维空间刚体运动之旋转矩阵与变换矩阵

1. 旋转矩阵 1.1 点、向量和坐标系 点&#xff1a;点是空间中的基本元素&#xff0c;没有长度&#xff0c;没有体积&#xff1b; 向量&#xff1a;把两个点连接起来&#xff0c;就构成了向量&#xff0c;向量可以看成从某点指向另一点的一个箭头&#xff1b;只有当我们指定这…

hive基于新浪微博的日志数据分析——项目及源码

有需要本项目的全套资源资源以及部署服务可以私信博主&#xff01;&#xff01;&#xff01; 该系统的目的是利用大数据技术&#xff0c;分析新浪微博的日志数据&#xff0c;从而探索用户行为、内容传播和移动设备等各个层面的特性和动向。这项研究为公司和个人在制定营销战略、…

Redis数据库的简介、部署及常用命令

Redis数据库的简介、部署及常用命令 一、关系数据库与非关系型数据库概述1、关系型数据库2、非关系型数据库3、关系数据库与非关系型数据库区别4、非关系型数据库产生背景 二、Redis简介1、Redis服务器程序的单线程模型2、Redis的优点 三、Redis部署四、Redis 命令工具1、redis…

【Openvino03】深入了解OpenVINO™ 工具包与Jupyter Notebooks工程

接上一篇&#xff0c;本篇将以OpenVINO™ 工具包、Jupyter Notebook工具以及OpenVINO™ Notebooks工程为基础&#xff0c;依照构建环境、工具学习、案例学习、实战部署的顺序引导初学者完成从0到1学习人工智能的全过程&#xff0c;希望众多对人工智能感兴趣的开发者&#xff0c…

说说@EnableConfigurationProperties那点事

两者的对比 ConfigurationProperties 使用ConfigurationProperties的时候&#xff0c;把配置类的属性与yml配置文件绑定起来的时候&#xff0c;还需要加上Component注解才能绑定并注入IOC容器中&#xff0c;若不加上Component&#xff0c;则会无效。 EnableConfigurationPro…

RNN其中的X.reshape

假设RNN中的输入为2528&#xff0c;2是batchsize可以理解为有几句话&#xff0c;5是timestep可以理解为有几个词&#xff0c;28是vocab_size。如下就是两个句子&#xff0c;每个句子由5个单词组成。28则为每个单词的词向量&#xff0c;在此略去。 在输入的时候&#xff0c;首先…

一步一步学OAK之十一:实现在RGB相机上进行对象跟踪

目录 Setup 1: 创建文件Setup 2: 安装依赖Setup 3: 导入需要的包Setup 4:定义和加载模型相关的路径和标签Setup 5: 创建pipelineSetup 6: 创建节点Setup 7: 设置属性设置相机属性设置神经网络节点属性设置物体跟踪对象属性 Setup 8: 建立链接Setup 9: 连接设备并启动管道Setup …

有哪些免费好用的Python IDE(集成开发环境)?

工欲善其事&#xff0c;必先利其器。Python的学习过程少不了集成开发编辑环境(IDE)。这些Python IDE会提供插件、工具等帮助开发者加快使用Python开发的速度&#xff0c;提高效率。这里收集了一些对开发者非常有帮助的Python IDE(来自hittp://doc.okbase.net/havoc/archive/242…

苹果正在研发具备智能家居显示功能的外接显示器,具备低功耗模式

据彭博社记者 Mark Gurman 在他最新一期的 Power On 时事通讯中报道&#xff0c;苹果公司正致力于研发一款新的 Mac 外接显示器&#xff0c;具备智能家居设备显示器的低功耗模式功能。 根据了解&#xff0c;这款显示器将集成iOS设备芯片&#xff0c;与Studio Display不同的是&a…

【Spring】基于注解方式存取JavaBean:Spring有几种注入方式?有什么区别?

前言 Hello&#xff0c;我是小黄。众所周知&#xff0c;Spring是一个开源的Java应用程序框架&#xff0c;其中包括许多通过注解实现依赖注入的功能。Spring提供了多种注入方式&#xff0c;可以满足不同的需求和场景。常见的注入方式包括构造函数注入、Setter方法注入和属性注入…

基于卷积神经网络的狗猫数据集分类实验

目录 一、环境配置1、anaconda安装2、配置TensorFlow、Keras 二、数据集分类1、分类源码2、训练流程 三、模型调整1、图像增强2、网络模型添加dropout层 四、使用VGG19优化提高猫狗图像分类五、总结六、参考资料 一、环境配置 1、anaconda安装 下载链接&#xff1a;anaconda …

Appium安装部署

目录 一、检查Java环境 二、安装android SDK 一、检查Java环境 Android SDK依赖ava环境&#xff0c;因此需要先安装jdk。在CMD中输入java -version 出现下图的结果&#xff0c;说明当前环境已安装jdk 如果提示java命令无效&#xff0c;请安装后进行下一步。 二、安装androi…

iOS App的上架和版本更新流程

一、前言&#xff1a; 作为一名iOSDeveloper&#xff0c;把开发出来的App上传到App Store是必要的。下面就来详细讲解一下具体流程步骤。 二、准备&#xff1a; 一个已付费的开发者账号&#xff08;账号类型分为个人&#xff08;Individual&#xff09;、公司&#xff08;Com…

单片机-串口通信

1.串口向电脑发送数据 1.配置串口 T1定时器&#xff0c;方式二8位重装 void UartInit(void) //4800bps11.0592MHz {PCON & 0x7F; //波特率不倍速SCON 0x50; //8位数据,可变波特率TMOD & 0x0F; //清除定时器1模式位TMOD | 0x20; //设定定时器1为8位自动重装方式…

【论文笔记】FASTER SEGMENT ANYTHING:TOWARDS LIGHTWEIGHT SAM FOR MOBILE APPLICATIONS

前脚fast SAM刚发完&#xff0c;后脚mobile SAM就发了 &#xff0c;之前的论文笔记中我一直就认为fast SAM其实应该算是yolo的扩展工作&#xff0c;和原生的SAM架构相去甚远&#xff0c;而且在简介上直接就对&#xff08;gong&#xff09;比&#xff08;ji&#xff09;了FastSA…

ElasticSearch 8.0+ 版本Windows系统启动

下载地址&#xff1a;https://www.elastic.co/cn/downloads/past-releases/winlogbeat-8-8-1 解压\elasticsearch\elasticsearch-8.5.1 进入bin目录&#xff0c;启动elasticsearch.bat 问题1&#xff1a; warning: ignoring JAVA_HOMED:\jdk1.8.0_271; using bundled JDK J…