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

news2024/11/16 9:24:24

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图片:

折线图效果:

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

2023年5月 少儿编程 中国电子学会图形化编程等级考试Scratch编程一级真题解析(判断题)

2023年5月scratch编程等级考试一级真题 判断题(共10题,每题2分,共20分) 26、默认小猫角色,运行下列程序后,可以看到小猫面向右边,先向右转了30度,又向左转了30度 答案:错 考点分析:考查积木综合使用,由于电脑计算的速度非常快,所以上面的程序看不到右转效果,…

Linux--设置目录或文件的默认权限:umask权限掩码

目录起始权限是从777&#xff0c;普通文件起始权限从666 为何我们创建一个目录或文件&#xff0c;默认权限是你所看到的样子&#xff1f; 因为凡是在umask中出现的权限&#xff0c;都不应该在最终权限中出现&#xff01; 最终权限起始权限&&#xff08;~umask&#xff09…

中间件——统一白名单配置

目录 背景 方案设计 技术点 代码实现 1.切面 2.配置类 3.切面 测试 总结 背景 上线初期提供可配置的白名单用户进行访问验证&#xff0c;把控整体运行风险。 解决痛点&#xff1a; APOLLO企业控制也可以&#xff0c;多个业务功能&#xff0c;要配置多个apollo&…

linux docker安装及报错处理

一、Linux安装docker 1.1 前提 要求Linux内核&#xff08;kernel&#xff09; 版本大于等于3.8。&#xff08;kernel version >3.8&#xff09;。 查看当前系统内核版本 uname -a | awk {split($3,arr,"-");print arr[1]} 1.2 linux 安装docker Centos安装doc…

基于Python所写的火车票分析助手设计

点击以下链接获取源码资源&#xff1a; https://download.csdn.net/download/qq_64505944/87964234 《火车票分析助手》程序使用说明 在PyCharm中运行《火车票分析助手》即可进入如图1所示的系统主界面。 图1 系统主界面 具体的操作步骤如下&#xff1a; &#xff08;1&…

什么是KubeEdge?

什么是Kubernetes&#xff1f; Kubernetes&#xff08;K8s&#xff09;是一款由谷歌开源的容器集群管理系统。它基于容器技术&#xff0c;为容器化的应用提供部署运行、资源调度、服务发现和动态伸缩等一系列功能。 什么是KubeEdge&#xff1f; KubeEdge做的是基于k8s构建&a…

数据结构C语言第二版读书笔记--阿兴版本。

文章目录 第一章 绪论1.1 数据结构的研究内容1.2 基本概念和术语1.2.1 数据、 数据元素、 数据项和数据对象1.2.2 数据结构 阿兴觉得很有必要在读书的时候做些读书笔记&#xff0c;我个人比较懒&#xff0c;还是写下来效果会好些。 本次所读的书是这本书。 第一章 绪论 1.1 数…

详解python之re库使用方法2

目录 参考资料前言二、使用 re 模块匹配字符串0. re 子函数 1. re.split()1.实例演示 2. re.search() 和 re.match()对比3.re.search()4.re.findall()5.re.escape()6. 正则表达式的简单说明8. re.compilere.match() 方法进行匹配参考链接&#xff1a; 参考资料 [1] Python之正…

Appium: Windows系统桌面应用自动化测试(二)

Appium: Windows系统桌面应用自动化测试二 一、关于自动化过程中&#xff0c;打开了应用&#xff0c;但获取不到操作句柄的问题1、问题描述2、问题分析3、问题解决 二、尝试回归问题本身&#xff0c;去解决问题1、目标应用日志3、查看WinAppDriver日志&#xff08;1&#xff09…

YOLO系列正负样本分配策略

1、YOLOv3 使用MaxIoUAssigner策略来给gt分配样本&#xff0c;基本上保证每个gt都有唯一的anchor对应&#xff0c;匹配的原则是该anchor与gt的IOU最大且大于FG_THRESH&#xff0c;这种分配制度会导致正样本比较少&#xff0c;cls和bbox分支训练起来可能比较慢。在剩余的anchor…

(三)Flask前置知识栈——装饰器

在后续的讲解中&#xff0c;对大家对装饰器的掌握程度要求较高&#xff0c;所以此文来深入讲解一下&#xff0c;有看过《Python全栈系列教程》专栏的小伙伴可能会说&#xff0c;装饰器已经出过文章讲的很详细了。饶是如此&#xff0c;深究过装饰器的小伙伴们就权当复习一遍&…

荣耀笔记本怎么重装Win10系统?荣耀笔记本用U盘重装系统Win10教程

随着时间的推移&#xff0c;荣耀笔记本系统可能会变得缓慢、不稳定&#xff0c;甚至出现故障&#xff0c;这时候&#xff0c;重装操作系统就成为了一个必要的选择&#xff0c;那么怎么给荣耀笔记本电脑重装Win10系统呢&#xff0c;可以按照系统之家小编分享的荣耀笔记本用U盘重…

提升矿井水质安全性:矿井水除氟领域的应用与优势

引言 随着工业化进程的推进&#xff0c;矿井水中含有过量的氟离子已成为一个严重的环境问题。高浓度的氟离子对人体健康和生态环境都具有危害。因此&#xff0c;矿井水除氟工艺的研究和应用变得至关重要。 当废水中的氟超标超过了环保标准时&#xff0c;可能会对环境和人类健康…

【AUTOSAR】VCU开发实际项目讲解(一)----VCU系统边界条件

VCU系统边界条件 VCU基本性能参数 序号 项目 参考指标 试验方法或评定指标 1 外形尺寸 长244mm*宽156mm*41.4mm&#xff08;参考尺寸&#xff09; 2 工作电压 正常工作电压 9V-16V CAN通讯电压 8V-18V 不保证功能 &#xff1c;8V or &#xff1e;18V 3 过压保…

基于深度学习的高精度老虎检测识别系统(PyTorch+Pyside6+YOLOv5模型)

摘要&#xff1a;基于深度学习的高精度老虎检测识别系统可用于日常生活中或野外来检测与定位老虎目标&#xff0c;利用深度学习算法可实现图片、视频、摄像头等方式的老虎目标检测识别&#xff0c;另外支持结果可视化与图片或视频检测结果的导出。本系统采用YOLOv5目标检测模型…

host碰撞,利用host碰撞突破访问边界

文章目录 host 碰撞漏洞原理漏洞利用步骤漏洞复现 host 碰撞 直接利用ip访问显示的是403 404 400 500&#xff0c;但是用域名请求就会返回正常业务。当然在排除WAF作祟下&#xff08;有一些WAF它会要求使用域名访问&#xff0c;使用IP的会出现WAF的拦截界面&#xff09;&#…

记录node.js+vue-elementui-admin的后台管理系统登录传参问题

前言&#xff1a;本来想用Node做后端&#xff0c;vue-element-admin做前端来练习一下技术&#xff0c;了解一下开发的过程 // 用户登录处理函数 exports.login (req, res) > {console.log(req.body)const userinfo req.bodyconst sql select * from user where username…

迪赛智慧数——柱状图(象形动态图):高考填报专业考虑的因素

效果图 填报志愿是高考后的一大重要环节&#xff0c;你的职业生涯就在这里起航了。那么&#xff0c;应该怎么填报志愿呢&#xff1f;高考填报专业考虑的因素很多&#xff0c;过半的人会考虑专业就业前景及薪资&#xff0c;其次是个人兴趣和是否为双一流建设学科。 数据源&…

Spring中bean使用方法

Spring框架是一个非常重要的开发工具&#xff0c;它提供了丰富的功能和模块&#xff0c;其中核心的概念之一就是Spring Bean。Spring Bean是Spring IoC容器中的一个对象&#xff0c;它负责管理一个Java对象的生命周期以及依赖注入。下面我将通过互联网场景下的相关背景内容来阐…

[SSM]MyBatis基础

目录 一、MyBatis概述 1.1框架&#xff08;framework&#xff09; 1.2三层架构 1.3JDBC的不足 1.4了解MyBatis 二、MyBatis入门程序 2.1resources目录 2.2开发步骤 2.3从XML中构建SqlSessionFactory 2.4mybatis中有两个主要的配置文件 2.5关于第一个程序的细节 2.6关…