antv移动端F2环形图自定义样式---------增加圆角、颜色渐变、插入图片等

最新推荐文章于 2024-05-14 10:52:37 发布
最新推荐文章于 2024-05-14 10:52:37 发布
阅读量3k 收藏 6
点赞数 5
分类专栏： 前端开发 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zxo_apple/article/details/120882787
版权
啥也不说，先看效果

在这里插入图片描述

1. 安装
npm install @antv/f2 --save
2. 在使用图标的页面引入
	import F2 from '@antv/f2'
3. template中构建要渲染的容器（这里我循环渲染两个图形，通过动态绑定id区别要渲染的图）
<div class="common_wrap data_wrap">
	<div class="common_item item" v-for="(item, index) in 2" :key="index">
		<canvas :id="'data_chart' + index"></canvas>
	</div>
</div>
4. script中初始化容器（别忘了mounted中调用下面方法）
	// 进度环形图(数据概览)
			initDataChart() {
				for(let i = 0; i < 2; i++) {
					const chart = new F2.Chart({
						id: `data_chart${i}`, // 动态容器id
						pixelRatio: window.devicePixelRatio,
						width: 92, // 渲染宽度
						height: 92, // 渲染高度
						padding: [0, 0, 0, 0] // 分别设置上、右、下、左边距
					})
					const data = [{
						x: '1',
						y: 85
					}]
					chart.source(data, {
						y: {
							max: 100,
							min: 0
						}
					})

					chart.axis(false) // 不展示x, y轴
					chart.tooltip(false) // 不展示tooltip
					chart.coord('polar', { // 环形图有色彩部分相关设置
						transposed: true,
						innerRadius: 0.8,
						radius: 0.85
					})
					chart.guide().arc({ // 环形图底部相关设置
						start: [0, 0],
						end: [1, 99.98],
						top: false,
						style: {
							lineWidth: 8,
							stroke: 'rgba(195,201,212,0.2)'
						}
					})
					chart.interval().position('x*y').color('y').size(8)
					chart.render()
				}
			},
以上是初步渲染一个环形图样式，渲染出来将会是这样，此时没有达到我们想要的颜色渐变，圆角，插入自定义文字图片等，接下来我们就逐步来实现这些自定义功能

在这里插入图片描述

颜色渐变
修改上面代码为下面代码，因为是两个不同的，我们顺便区分下颜色

在这里插入图片描述

		if (i % 2 === 0) {
			chart.interval().position('x*y').color('l(90) 0:#00B7BF 1:#77DDC9').size(8)
		} else {
			chart.interval().position('x*y').color('l(90) 0:#FF3366 1:#FF8989').size(8)
		}
增加圆角
在上面循环之前，注入自定义的shape
// 在import引入处加入
const Shape = F2.Shape
const G = F2.G
const Util = F2.Util
const Global = F2.Global
const Vector2 = G.Vector2

initDataChart() {
	Shape.registerShape('interval', 'tick', {
		draw: function draw(cfg, container) {
			const points = this.parsePoints(cfg.points)
			const style = Util.mix({
				stroke: cfg.color
			}, Global.shape.interval, cfg.style)
			if (cfg.isInCircle) {
				let newPoints = points.slice(0)
				if (this._coord.transposed) {
					newPoints = [points[0], points[3], points[2], points[1]]
				}
	
				const _cfg$center = cfg.center,
					x = _cfg$center.x,
					y = _cfg$center.y
	
				const v = [1, 0]
				const v0 = [newPoints[0].x - x, newPoints[0].y - y]
				const v1 = [newPoints[1].x - x, newPoints[1].y - y]
				const v2 = [newPoints[2].x - x, newPoints[2].y - y]
	
				let startAngle = Vector2.angleTo(v, v1)
				let endAngle = Vector2.angleTo(v, v2)
				const r0 = Vector2.length(v0)
				const r = Vector2.length(v1)
				if (startAngle >= 1.5 * Math.PI) {
					startAngle = startAngle - 2 * Math.PI
				}
	
				if (endAngle >= 1.5 * Math.PI) {
					endAngle = endAngle - 2 * Math.PI
				}
	
				const lineWidth = r - r0
				const newRadius = r - lineWidth / 2
	
				return container.addShape('Arc', {
					className: 'interval',
					attrs: Util.mix({
						x,
						y,
						startAngle,
						endAngle,
						r: newRadius,
						lineWidth,
						lineCap: 'round'
					}, style)
				})
			}
		}
	})

// ...for 上面的for循环代码处
	for(let i = 0; i < 2; i++) {

	// 在配置颜色后面加入
		chart.interval().position('x*y').color('l(90) 0:#00B7BF 1:#77DDC9')
		.size(8)
		.shape('tick') // 这个也要加上
		.animate({
			appear: {
				duration: 1200,
				easing: 'cubicIn',
				animation: function animation(shape, animateCfg) { // ！！！这里用来显示圆角的代码
					const startAngle = shape.attr('startAngle');
					const endAngle = shape.attr('endAngle');
					shape.attr('endAngle', startAngle);
					shape.animate().to(Util.mix({
						attrs: {
							endAngle
						}
					}, animateCfg)).onUpdate(function(frame) {
					});
				}
			}
		})
	}
}
自定义插入文字图片等
	chart.guide().html({
		position: [ '50%', '45%' ],
		html: `<div style="width: 250px;height: 40px;text-align: center;">
		<div style="font-family: PingFangSC-Regular;font-size: 12px;color: #8D99AE;margin-top: 6px;">自定义文字</div>
			<div style="font-family: PingFangSC-Medium;font-size: 14px;color: #00B7BF;">
			<img src="图片地址" style="width: 16px;height: 16px;" />
			75%
			</div>
		</div>`
	})
综上，完整代码如下：
initDataChart() {
	Shape.registerShape('interval', 'tick', {
		draw: function draw(cfg, container) {
			const points = this.parsePoints(cfg.points)
			const style = Util.mix({
				stroke: cfg.color
			}, Global.shape.interval, cfg.style)
			if (cfg.isInCircle) {
				let newPoints = points.slice(0)
				if (this._coord.transposed) {
					newPoints = [points[0], points[3], points[2], points[1]]
				}
	
				const _cfg$center = cfg.center,
					x = _cfg$center.x,
					y = _cfg$center.y
	
				const v = [1, 0]
				const v0 = [newPoints[0].x - x, newPoints[0].y - y]
				const v1 = [newPoints[1].x - x, newPoints[1].y - y]
				const v2 = [newPoints[2].x - x, newPoints[2].y - y]
	
				let startAngle = Vector2.angleTo(v, v1)
				let endAngle = Vector2.angleTo(v, v2)
				const r0 = Vector2.length(v0)
				const r = Vector2.length(v1)
				if (startAngle >= 1.5 * Math.PI) {
					startAngle = startAngle - 2 * Math.PI
				}
	
				if (endAngle >= 1.5 * Math.PI) {
					endAngle = endAngle - 2 * Math.PI
				}
	
				const lineWidth = r - r0
				const newRadius = r - lineWidth / 2
	
				return container.addShape('Arc', {
					className: 'interval',
					attrs: Util.mix({
						x,
						y,
						startAngle,
						endAngle,
						r: newRadius,
						lineWidth,
						lineCap: 'round'
					}, style)
				})
			}
		}
	})
	
	for(let i = 0; i < 4; i++) {
		const chart = new F2.Chart({
			id: `data_chart${i}`,
			pixelRatio: window.devicePixelRatio,
			width: 92,
			height: 92,
			padding: [0, 0, 0, 0] // 分别设置上、右、下、左边距
		})
		const data = [{
			x: '1',
			y: 85
		}]
		chart.source(data, {
			y: {
				max: 100,
				min: 0
			}
		})
	
		chart.axis(false)
		chart.tooltip(false)
		chart.coord('polar', {
			transposed: true,
			innerRadius: 0.8,
			radius: 0.85
		})
		chart.guide().arc({
			start: [0, 0],
			end: [1, 99.98],
			top: false,
			style: {
				lineWidth: 8,
				stroke: 'rgba(195,201,212,0.2)'
			}
		})
		chart.guide().html({
			position: [ '50%', '45%' ],
			html: `<div style="width: 250px;height: 40px;text-align: center;">
						<div style="font-family: PingFangSC-Regular;font-size: 12px;color: #8D99AE;margin-top: 6px;">文字</div>
						<div style="font-family: PingFangSC-Medium;font-size: 14px;color: #00B7BF;">
						<img src="图片地址" style="width: 16px;height: 16px;" />
						75%
						</div>
					</div>`
		})
	
		if (i % 2 === 0) {
			chart.interval().position('x*y').color('l(90) 0:#00B7BF 1:#77DDC9')
				.size(8)
				.shape('tick')
				.animate({
					appear: {
						duration: 1200,
						easing: 'cubicIn',
						animation: function animation(shape, animateCfg) {
							const startAngle = shape.attr('startAngle');
							const endAngle = shape.attr('endAngle');
							shape.attr('endAngle', startAngle);
							shape.animate().to(Util.mix({
								attrs: {
									endAngle
								}
							}, animateCfg)).onUpdate(function(frame) {
							});
						}
					}
				})
		} else {
			chart.interval().position('x*y').color('l(90) 0:#FF3366 1:#FF8989')
				.size(8)
				.shape('tick')
				.animate({
					appear: {
						duration: 1200,
						easing: 'cubicIn',
						animation: function animation(shape, animateCfg) {
							const startAngle = shape.attr('startAngle');
							const endAngle = shape.attr('endAngle');
							shape.attr('endAngle', startAngle);
							shape.animate().to(Util.mix({
								attrs: {
									endAngle
								}
							}, animateCfg)).onUpdate(function(frame) {
							});
						}
					}
				})
		}
		chart.render()
	}
}
我替你们把坑都踩完了，点个赞吧^^
zxo_apple
关注
  • 5
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用antV中的f2制作含百分比文字的环形图
小土豆
11-27 7799
是在原有例子上添加了两行代码，测试过的   &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.
antv G2 修改图表背景颜色
qq_36940740的博客
09-10 4098
chart .interval() .position('vals') .color('title',[ 'red', 'blue', 'yellow','green','yellow']) .label('vals', { content: (data) => { return `${data.title}: ${data.vals * 100}%`; }, }).adjust('stack'); 此处的title为数据里的title. data : [ {...
微信小程序–使用antv F2绘制环形图表
最新发布
weixin_46561899的博客
05-14 260
参考网址：https://blog.csdn.net/miracle__Y/article/details/105081681。官网地址：https://f2.antv.antgroup.com/tutorial/getting-started。
支付宝/钉钉小程序使用antv/f2图表 制作圆环进度条 动态参数
认知，坚持
05-31 1463
** 支付宝小程序使用antv/f2图表 制作圆环进度条 动态参数 ** 相关文档： https://github.com/antvis/my-f2 https://www.yuque.com/antv/f2 https://f2.antv.vision/zh/examples/pie/donut#progress-bar 1. 安装依赖 项目默认初始化出来的是没有package.json的，需要新增package.json后再安装 npm install @antv/my-f2 --save
taro引入f2图表_Package - taro-f2
weixin_39852688的博客
12-20 709
Taro多端F2图表 目前支持: H5、微信小程序、支付宝小程序直接克隆代码 可查阅示例更新日志2.1.2: onCanvasInit 增加scope导出, 增加导出图片示例, 如果h5编译报错可以尝试将@tarojs/webpack-runner降级到 1.2.x。具体参见:#182.1.0: 支持了按需引用onInit 修改为 onCanvasInit,回调不再返回F2增加 F2Canvas....
AntV F2和vue-cli构建移动端可视化视图过程详解
12-13
AntV F2是蚂蚁金服旗下的一个专注于移动，开箱即用的可视化解决方案，完美支持 H5 环境同时兼容多种环境（Node, 小程序，Weex），完备的图形语法理论，满足你的各种可视化需求，专业的移动设计指引为你带来最佳的...
antv-l7地图可视化，全国地图支持省级下钻、悬浮预警、时间区间搜索
07-15
antv-l7地图可视化，全国地图支持省级下钻、悬浮预警、时间区间搜索
react-native-f2chart:F2本机图表
05-11
react-native-f2chart 本机图表 安装 1， yarn add react-native-f2chart or npm i react-native-f2chart 2，将node_moules/react-native-f2chart/src/f2chart.html到android/app/src/main/assets/f2chart.html ...
gatsby-theme-antv:documentationPolished Gatsby主题文档网站
04-29
适用于AntV的盖茨比主题 :atom_symbol: :sparkles: 文档网站的优美Gatsby主题。特征 :atom_symbol: 呈现静态站点 :globe_showing_Americas: i18next的国际化支持 :memo: 基于Markdown的文档和菜单 :clapper_board: ...
vue-shape.rar
02-05
Vue.js 是一款非常流行的前端JavaScript框架，用于构建用户界面，而AntV X6是阿里蚂蚁金服推出的一个强大的可扩展的图编辑引擎。它提供了丰富的图形绘制和交互能力，广泛应用于流程图、思维导图、网络拓扑图等领域。...
关于antv-f2如何修改纵坐标轴数值的颜色
beichen3997的博客
09-27 3083
上代码 使用chart.axios来进行canvas绘画，stroke进行颜色赋值 chart.axis('totalBattery',{ label: (text, index, total) => { const cfg = { // flll: 'red', ..
环形渐变进度条组件
yjxkq99的博客
07-12 402
自己封装的组件，
大屏中使用antv g2绘制的环图借助定时器实现联动效果
weixin_44027616的博客
04-20 1553
大屏页面中绘制的统计图实现动态变换的效果 在项目中，有一个大屏页面，主要是对项目中的数据进行整体的展示，既然是大屏，那么就不会是“死页面”，就必然要有动态效果。其中有一个需求就是让 通过antv g2绘制出的环图动起来，主要是动态改变图标每一项的样式，以及中间的Annotation。 基本样式就是这样 主要是要让他动态的放大某项并且中间的annotation也要展示对应已经放大项的数据； 在官网中查阅，基本上都是通过鼠标hover到图表项或者图例项时会出现想要的联动样式效果，这里可以参考这个实例 饼图图
vue开发移动端Antv-f2的使用
weixin_38673922的博客
07-07 1808
AntV 是蚂蚁金服全新一代数据可视化解决方案，致力于提供一套简单方便、专业可靠、无限可能的数据可视化最佳实践。 F2 是一个专注于移动，开箱即用的可视化解决方案，完美支持 H5 环境同时兼容多种环境（Node, 小程序，Weex），完备的图形语法理论，满足你的各种可视化需求，专业的移动设计指引为你带来最佳的移动端图表体验。 一、黑屏终端 npm install @antv/f2 --save 二、main.js中全局引入 import F2 from '@antv/f2' Vue.prototyp
Antd/g2plot 渐变色设置 折线图 环形通用
weixin_45343465的博客
11-02 1730
antd/g2plot 渐变色配置
Vue 结合 Antv-F2开发混合图表
CN_czj的博客
06-10 565
Vue 结合 Antv-F2开发混合图表 一、npm安装 npm install @antv/f2 --save复制代码 二、在main.js中引入 import F2 from '@antv/f2' Vue.prototype.$F2= F2; 三、在vue页面组件中创建canvas <template> <div id="app"> <canvas id="caseChart" style="width: 100%;height: 230px;"&g
自定义控件的shape属性详解
星枫的博客
04-03 2805
一. shape的属性        rectangle（矩形）      //  默认        oval（椭圆）        line（线性）        ring（环形）：                android：innerRaddus             //  内环的半径，值为尺寸                android：thickness            ...
钉钉小程序使用antv/my-f2
qq_40092909的博客
03-15 2100
移动端小程序使用antv/my-f2，antv/f2不适合小程序使用 小程序开发者工具引入@antv/my-f2 开发环境引入(使用npm 或 cnpm) 开发依赖直接开发工具导入失败 所以手动导入 npm install @antv/my-f2 --save -dev cnpm install @antv/my-f2 --save -dev 下载完成后，进行init配置package.json 直接空格即可自动根据依赖生成 npm init 或者 cnpm init 生成json自动添加在packag
antv-g2 如何设置饼图颜色渐变
06-03
在antv-g2中，可以通过设置饼图的color字段来设置饼图的颜色。如果要设置颜色渐变，可以使用linear-gradient或radial-gradient等CSS渐变样式。具体步骤如下： 1. 在color字段中使用一个渐变的CSS样式。例如： ```javascript const data = [ { type: '分类1', value: 27 }, { type: '分类2', value: 25 }, { type: '分类3', value: 18 }, { type: '分类4', value: 15 }, { type: '分类5', value: 10 }, { type: '分类6', value: 5 } ]; const chart = new G2.Chart({ container: 'container', forceFit: true, height: 500 }); chart.source(data); chart.coord('theta', { radius: 0.75 }); chart.intervalStack() .position('value') .color('type', [ 'linear-gradient(135deg, #c9dfdb 0%, #e3e7e9 100%)', 'linear-gradient(135deg, #a3dbd4 0%, #d5e1dd 100%)', 'linear-gradient(135deg, #69c2b0 0%, #a3dbd4 100%)', 'linear-gradient(135deg, #5fa8d3 0%, #8fc3e9 100%)', 'linear-gradient(135deg, #547ba4 0%, #8fc3e9 100%)', 'linear-gradient(135deg, #4b5c77 0%, #547ba4 100%)' ]) .label('type', { offset: -20 }) .style({ lineWidth: 1, stroke: '#fff' }); chart.render(); ``` 这个例子中，使用了linear-gradient样式来设置饼图的颜色。其中，每个颜色都是一个渐变的CSS样式，可以根据需要进行调整。 2. 在color字段中使用一个回调函数，根据数据动态生成渐变样式。例如： ```javascript const data = [ { type: '分类1', value: 27 }, { type: '分类2', value: 25 }, { type: '分类3', value: 18 }, { type: '分类4', value: 15 }, { type: '分类5', value: 10 }, { type: '分类6', value: 5 } ]; const chart = new G2.Chart({ container: 'container', forceFit: true, height: 500 }); chart.source(data); chart.coord('theta', { radius: 0.75 }); chart.intervalStack() .position('value') .color('type', function(val) { return 'linear-gradient(135deg, #fff 0%, ' + (val % 2 === 0 ? '#69c2b0' : '#547ba4') + ' 100%)'; }) .label('type', { offset: -20 }) .style({ lineWidth: 1, stroke: '#fff' }); chart.render(); ``` 这个例子中，使用了一个回调函数来动态生成渐变样式。根据数据的奇偶性判断使用哪种颜色渐变。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值