Echarts 用图形纹理来填充颜色(color - pattern)

news2024/11/19 19:40:26

在这里插入图片描述

第006个

点击查看专栏目录



在上一篇文章中已经讲过 ECharts线性渐变色示例演示(2种渐变方式),这个示例的颜色使用纹理来做填充,

纹理填充: pattern

color:{ //纹理填充
image: patternImg,
repeat: ‘repeat’
}

示例效果

在这里插入图片描述

示例源代码(共87行)

/*
* @Author: 还是大剑师兰特(CSDN)
* @下面源代码版权归还是大剑师兰特所有,可供学习或商业项目中借鉴,未经授权,不得重复地发表到博客、论坛,问答,git等公共空间或网站中。
* @Email: 2909222303@qq.com
* @First published in CSDN
* @First published time: 2023-02-02
*/
<template>
	<div class="container">
		<h3>vue+echarts:颜色填充图形纹理的示例</h3>
		<p>大剑师兰特,还是大剑师兰特</p>
		<div id="vue-echarts" ref="refEcharts"> </div>
	</div>
</template>

<script>
	import * as echarts from 'echarts'; 
	export default {
		name: 'cuclife',
		data() {
			return {}
		},
		methods: {
			initCharts() {
				// 图形纹理
				var imageSrc = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEMAAABECAIAAABVrR+cAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjdDQUQ5QUY4NzhBMDExRUE5NjFCQzgxOEMwMzU0OTlFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjdDQUQ5QUY5NzhBMDExRUE5NjFCQzgxOEMwMzU0OTlFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6N0NBRDlBRjY3OEEwMTFFQTk2MUJDODE4QzAzNTQ5OUUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6N0NBRDlBRjc3OEEwMTFFQTk2MUJDODE4QzAzNTQ5OUUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4iVig4AAAeM0lEQVR42kSb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';
				var patternImg = new Image();
				patternImg.src = imageSrc;
				
				let myChart = echarts.init(this.$refs.refEcharts);
				myChart.setOption({
					title: {
						text: '标题:ECharts示例'
					},

					series: [{
						type: 'pie',
						radius: ['20%', '70%'],
						avoidLabelOverlap: false,
						color: [ 
						{  //纹理填充
						image: patternImg,
						repeat: 'repeat'
						},
						'red'					
						],
						
					    itemStyle: {
							borderRadius: 10,
							borderColor: '#fff',
							borderWidth: 2,

					   },
						label: {
							show: true,
							position: 'left'
						},
						data: [{
							name: 'cuclife',
							value: 500
						}, {
							name: '大剑师',
							value: 300
						}],
					}]
				});
			}
		},
		mounted() {
			this.initCharts();
		}
	}
</script>
<style scoped>
	.container {
		width: 840px;
		height: 580px;
		margin: 50px auto 0;
		border: 1px solid rgb(228, 57, 97);
	}
	#vue-echarts {
		width: 800px;
		height: 460px;
		border: 1px solid #d8d;
		margin: 0 auto;
	}
</style>


相关资料参考

https://echarts.apache.org/handbook/zh/basics/import

专栏介绍

在vue和echarts联合技术栈的操控下,本专栏提供行之有效的源代码示例。这里既包括样式的修改,又包括常用bug的解决。
(1)提供title示例:展示控制标题的颜色、位置、子标题,连接等
(2)提供legend示例:展示控制图例的类型、宽度、高度、位置、间隙,边框、阴影、透明度、偏移,字体、颜色,提示语等
(3)提供grid示例:展示控制绘图网格的位置、宽度、高度、边框、阴影等
(4)提供xAxis示例:展示控制x 轴的位置、类型、名称、字体、对齐方式、边框、阴影、宽度、高度等
(5)提供yAxis示例:展示控制y 轴的位置、类型、名称、字体、对齐方式、边框、阴影、宽度、高度等
(6)提供dataZoom示例:展示控制区域缩放的类型、位置、filterMode等
(7)提供tooltip示例:展示控制提示框组件的触发方式、位置、样式,标签、动画、内容格式器等
(8)提供地理坐标系示例:展示控制地理坐标的经纬度、放缩、位置,距离、字体、边框等
(9)提供animation示例:展示控制动画的持续时间、延迟时间、动画方式,连接等
(10)提供其他示例:展示series等组件的信息内容。

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

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

相关文章

禾川HCQ ModBUS+485主从站调试

硬件&#xff0c;485转usb&#xff0c;如果主站是plc&#xff0c;不需要这个线&#xff0c;我现在主站是电脑&#xff0c;调试用。 HCQ0 禾川控制器。 软件 modbus tools 调试软件&#xff0c;自行下载吧&#xff0c;社区传不上去。 硬件连接时注意交叉连接&#xff0c;HCQ0 A端…

MATLAB 逻辑数组

✅作者简介&#xff1a;人工智能专业本科在读&#xff0c;喜欢计算机与编程&#xff0c;写博客记录自己的学习历程。 &#x1f34e;个人主页&#xff1a;小嗷犬的个人主页 &#x1f34a;个人网站&#xff1a;小嗷犬的技术小站 &#x1f96d;个人信条&#xff1a;为天地立心&…

Java⽇志框架学习笔记

目录 1.⽇志概述 1.1 ⽇志是⽤来做什么的&#xff1f; 1.2 为什么要⽤到⽇志框架&#xff1f; 1.3 现有的⽇志框架有哪些&#xff1f; 1.4 ⽇志⻔⾯技术 2.logback 2.1 logback介绍 2.1.1 logback 模块 2.1.2 logback 组件 2.1.3 logback 配置 2.1.4 logback.xml 配…

2023网络爬虫 -- 获取动态数据

一、网站的正常界面1、网址https://movie.douban.com/typerank?type_name%E5%8A%A8%E4%BD%9C%E7%89%87&type5&interval_id100:90&action2、正常的页面二、爬取数据1、源代码import requests头{"User-Agent": "Mozilla/5.0 (Windows NT 10.0; WOW64…

首屏加载速度慢怎么解决?

一、什么是首屏加载 首屏时间&#xff08;First Contentful Paint&#xff09;&#xff0c;指的是浏览器从响应用户输入网址地址&#xff0c;到首屏内容渲染完成的时间&#xff0c;此时整个网页不一定要全部渲染完成&#xff0c;但需要展示当前视窗需要的内容 首屏加载可以说是…

分享156个ASP源码,总有一款适合您

ASP源码 分享156个ASP源码&#xff0c;总有一款适合您 下面是文件的名字&#xff0c;我放了一些图片&#xff0c;文章里不是所有的图主要是放不下...&#xff0c; 156个ASP源码下载链接&#xff1a;https://pan.baidu.com/s/1Mc-zWjUyk9Lx8TXv5cvZTg?pwds2qi 提取码&#x…

Office 365用户登录审核

黑客访问端点设备&#xff0c;以窃取公司特定数据、员工个人数据或任何其他可能对他们有任何用处的有价值的信息。 为了帮助您防止这种攻击&#xff0c;我们编写了一个参数列表&#xff0c;可以帮助您识别异常日志&#xff0c;这通常是攻击的第一个标志。异常登录活动是安全漏洞…

Vue使用ElementUI的确认框进行删除操作(包含前后端代码)

前言 今天做自己项目的时候&#xff0c;有一个删除的业务&#xff0c;正好遇到了确认框&#xff0c;在此纪念一下。 这里我是使用的ElementUI的确认框&#xff01; 首先ElementUI的确认框是这么说明的&#xff1a; 从场景上说&#xff0c;MessageBox 的作用是美化系统自带的 …

Java程序员跳槽,三面全过,面试官:你这样的,我们招不起

程序员小李在沿海城市工作了8年&#xff0c;那里涨幅飞快的房价限制了程序员小李在一线城市安家的想法&#xff0c;再加上突然发生的疫情暴露了远在他乡工作的不便&#xff0c;在种种因素下&#xff0c;程序员小李决定回家工作。 既然已经下定决心告别一线城市回家乡发展&…

数据分析面试-sql练习

SQL汇总1. SQL执行顺序2. 开窗函数3. 经典SQL题3.0 数据准备3.1 ☆ 查询‘01’课程比‘02’课程成绩高的学生3.2 查询平均成绩大于等于60分的同学的学生编号和学生姓名和平均成绩3.3 查询在SC表存在成绩的学生信息3.4 查询所有同学的学生编号、学生姓名、选课总数、所有课程的总…

Github每日精选(第96期):微软的机器学习课程ML-For-Beginners

12 周&#xff0c;26 节课&#xff0c;52 道测验&#xff0c;适合所有人的经典机器学习。 添加链接描述 初学者机器学习 - 课程 Microsoft 的 Azure Cloud Advocates 很高兴提供为期 12 周、26 节课的全部关于机器学习的课程。在本课程中&#xff0c;您将了解有时称为经典机器…

【C++】面向对象:继承

&#x1f431;作者&#xff1a;傻响 &#x1f431;专栏&#xff1a;《C语法》 &#x1f525;格言&#xff1a;你只管努力&#xff0c;剩下的交给时间&#xff01; 目录 C中的继承 1.继承的概念及定义 1.1继承的概念 1.2 继承定义 1.3 继承关系和访问限定符 1.4 继承基类成…

ES6中扩展运算符的9种用法

1. 拷贝数组对象 const years [2018, 2019, 2020, 2021]; const copyYears [...years];console.log(copyYears); // [ 2018, 2019, 2020, 2021 ]扩展运算符拷贝数组&#xff0c;只有第一层是深拷贝&#xff0c;即对一维数组使用扩展运算符拷贝就属于深拷贝 2. 合并数组 先…

c++入门语法

文章目录1. 命名空间1.1 域的介绍1.2 命名空间的定义1.3 命名空间的三种使用方式2. C输入&&输出3. 缺省参数3.1 概念3.2 缺省参数分类4. 函数重载4.1 概念4.2 C支持函数重载的原理--名字修饰5. 引用5.1 概念5.2 特性5.3 常引用5.4 使用场景5.5 指针和引用的区别6. 内联…

OpenCV-PyQT项目实战(3)信号与槽机制

欢迎关注『OpenCV-PyQT项目实战 Youcans』系列&#xff0c;持续更新中 OpenCV-PyQT项目实战&#xff08;1&#xff09;安装与环境配置 OpenCV-PyQT项目实战&#xff08;2&#xff09;QtDesigner 和 PyUIC 快速入门 OpenCV-PyQT项目实战&#xff08;3&#xff09;信号与槽机制 …

健身大神都戴什么耳机、健身大佬的耳机清单分享

平时&#xff0c;我们总能看到许多运动健身的人群&#xff0c;在锻炼时都佩戴着耳机。但运动耳机的选择&#xff0c;同样是大有学问的。如果佩戴传统的真无线蓝牙耳机&#xff0c;有可能出现佩戴不稳、耳道肿胀等问题&#xff0c;影响运动体验。所以今天我们特意给大家带来几款…

【大数据实时数据同步】OGG异构多路映射同步原表审计表只存删除数据表实现方案(二)

文章目录前言十一、将SCOTT下所有已同步的HIS表逻辑同步配置改为DEL表操作1、首先来看一下抽取进程和应用进程我们要修改成什么样的配置2、开始前先停止源端的抽取进程3、清除原来HIS表非DELETE操作数据4、启动抽取进程和应用进程验证总结前言 这里是后续&#xff01;&#xf…

尚医通 (一)项目介绍

目录一、功能简介二、技术点三、业务流程四、系统架构一、功能简介 尚医通即为网上预约挂号系统&#xff0c;网上预约挂号是近年来开展的一项便民就医服务&#xff0c;旨在缓解看病难、挂号难的就医难题&#xff0c;许多患者为看一次病要跑很多次医院&#xff0c;最终还不一定…

微信小程序 python垃圾分类知识科普系统 uniapp

目 录 摘 要 III Abstract 4 1 系统概述 5 1.1 概述 5 1.2课题意义 5 1.3 主要内容 5 2 系统开发环境 6 2.1微信开发者工具 6 2.2小程序框架以及目录结构介绍 6 3 需求分析 1 3.1 系统设计目标 1 3.2需求分析概述 1 3.3 系统可行性分析…

分享160个ASP源码,总有一款适合您

分享160个ASP源码&#xff0c;总有一款适合您 下面是文件的名字&#xff0c;我放了一些图片&#xff0c;文章里不是所有的图主要是放不下...&#xff0c; 160个ASP源码下载链接&#xff1a;https://pan.baidu.com/s/1xMcHd2x-EW0PP4TdVCU5vA?pwd3hby 提取码&#xff1a;3hby…