echarts环形图两层

zttbee

已于 2023-07-13 14:35:45 修改

阅读量1.3k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： echarts 文章标签： echarts 前端 javascript

于 2023-07-13 14:33:42 首次发布

本文链接：https://blog.csdn.net/qq_43840793/article/details/131701871

该文章展示了如何在Vue应用中利用Echarts库创建一个具有两层环形、扇形间有间隔且带有自定义图例图片的环形图。通过设置图表的配置项，包括数据、样式和交互，来实现特定的视觉效果，并且图表会自动适应窗口大小变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、实现效果
环形图，有两层环形，扇形之间有间隔，中间是标题，图例是自定义图片
在这里插入图片描述
2、实现
在template里写一个盒子放图表

<div class="chartMachineStyle" ref="chartMachine"></div>

在style里设置盒子尺寸

.chartMachineStyle {
   
   
			height: 200px;
			width:355px
		}

在data中声明一个变量

myChartMachine: '',

在methods写一个配置图表函数

	initChartMachine() {
   
   
				var data = [{
   
   
					name: '机器1',
					value: '30',
					icon: 'image://https://asc-test1.oss-cn-beijing.aliyuncs.com/2023/07/05/icon1.png'
				}, {
   
   
					name: '机器2',
					value: '24',
					icon: "image://https://asc-test1.oss-cn-beijing.aliyuncs.com/2023/07/05/icon2.png",
				}, {
   
   
					name: '机器3',
					value: '16',
					icon: "image://https://asc-test1.oss-cn-beijing.aliyuncs.com/2023/07/05/icon3.png",
				}, {
   
   
					name: '机器4',
					value: '6',
					icon: "image://https://asc-test1.oss-cn-beijing.aliyuncs.com/2023/07/05/icon4.png",
				}, {
   
   
					name: '机器5',
					value: '2',
					icon: "image://https://asc-test1.oss-cn-beijing.aliyuncs.com/2023/07/05/icon5.png",
				}, ]
				var subText = '78'
				let _this = this;
				this.myChartMachine = echarts.init(this.$refs.chartMachine)
				var option;
				option = {
   
   
					tooltip: {
   
   
						trigger: "item",
						formatter: "{b}<br/> {c}台  ({d}%)",
						backgroundColor