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

在这里插入图片描述

第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等组件的信息内容。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

还是大剑师兰特

打赏一杯可口可乐

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值