vue2+echarts绘制圆环图

UI图

圆环图是在饼图的基础上绘制的，首先拿到这张图与基本饼图相比需要配置的点较多

1、每项之间有间隔，并且有圆角效果

2、每项填充颜色为渐变色

3、legend文本需要自定义

4、图表标题背景效果

找到配置点后一次查找配置项修改

1，

2、渐变色直接使用echarts内置的渐变色生成器，官方文档没找到。这位博主写的有参数解释echarts设置渐变色_new echarts.graphic.lineargradient-CSDN博客z

				color: [
					new echarts.graphic.LinearGradient(0, 0, 0, 1, [
						{
							offset: 0,
							color: 'rgba(125, 64, 255, 1)' // 0% 处的颜色
						},

						{
							offset: 1,
							color: 'rgba(2, 164, 255, 1)' // 100% 处的颜色
						}
					]),
					new echarts.graphic.LinearGradient(0, 0, 0, 1, [
						{
							offset: 0,
							color: 'rgba(255, 146, 45, 1)' // 0% 处的颜色
						},

						{
							offset: 1,
							color: 'rgba(255, 45, 46, 1)' // 100% 处的颜色
						}
					]),
					'#9292C1'
				],

 3、rich富文本标签和formatter函数来设置legend4

	legend: {
					bottom: '5%',
					left: 'center',
					icon: 'circle',
					orient: 'vertical',
					itemWidth: this.$cu.chartSize(8),
					itemHeigth: this.$cu.chartSize(8),
          width:'100%',
					textStyle: {
						color: '#fff',
						fontSize: this.$cu.chartSize(14),
						rich: {
							// 通过富文本rich给每个项设置样式，下面的oneone、twotwo、threethree可以理解为"每一列"的样式
							one: {
								// 设置文字、数学、英语这一列的样式
								width: this.$cu.chartSize(60)
								// color: "#fff",
							},
							two: {
								// 设置10分、20分、30分这一列的样式
								width: this.$cu.chartSize(50)
								// color: "#fff",
							},
							three: {
								// 设置百分比这一列的样式
								width: this.$cu.chartSize(40)
								// color: "#fff",
							}
						}
					}
				},
				formatter: (name) => {
					var target
					this.echartsData.forEach((item) => {
						if (item.name == name) {
							target = item.value
						}
					})
					var v = (target / this.deviceTotal) * 100
					return `{one|${name}}  {two|${target}}   {three|${v}%}`
				},

4、使用内圆绘制标题背景效果 

{
						type: 'pie',
						radius: ['0', '30%'],
						center: ['50%', '30%'],
						z: 0,
						itemStyle: {
							normal: {
								color: '#2B2B40',
								label: {
									show: false
								},
								labelLine: {
									show: false
								}
							}
						},
						label: {
							normal: {
								position: 'center'
							}
						},
						data: [100]
					},

效果图

 

我的padAngle不生效，暂时没找到是哪个属性影响到了

全部代码

<template>
  <div class="container">
    <div ref="myChart" class="chartBox"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
	name: '',
	data() {
		return {
			// 存放echarts组装的数据
			echartsData: [
				{ value: 25, name: '正常设备' },
				{ value: 40, name: '报警设备' },
				{ value: 35, name: '离线设备' }
			],
			deviceTotal: 100,
			myChart: ''
		}
	},
	mounted() {
		this.initChart()

		// 为窗口加上宽度变化事件，当宽高发生改变时，调用echarts的resize()方法，调整图表尺寸
		window.addEventListener(
			'resize',
			() => (
				this.myChart && (this.myChart.resize(), this.initChart()),
				console.log(8888)
			)
		)
	},
	// 销毁实例
	disposeChart() {
		echarts.dispose(this.myChart)
	},
	methods: {
		initChart() {
			this.myChart = echarts.init(this.$refs.myChart)
			const _tit = {
				fontSize: this.$cu.chartSize(14)
			}
			const _subTit = {
				fontSize: this.$cu.chartSize(24)
			}
      const _wid = {
        width: this.$cu.chartSize(50)
      }
      const _minwid = {
        width: this.$cu.chartSize(30)
      }
			let option = {
				title: {
					text: '设备总数',
					subtext: this.deviceTotal,
					left: 'center',
					top: '22%', //top待调整
					textStyle: {
						color: '#fff',
						// fontSize: this.$cu.chartSize(10),
						..._tit,
						fontFamily: 'DINAlternate-Bold'
					},
					subtextStyle: {
						color: '#ff',
						// fontSize: this.$cu.chartSize(24),
						..._subTit,
						fontFamily: 'PingFangSC-Regular',
						top: 'center'
					},
					itemGap: 5 //主副标题间距
				},
				tooltip: {
					formatter: '{b0}: {c0}<br />',
					trigger: 'item',
					confine: 'false'
				},
				legend: {
					bottom: '5%',
					left: 'center',
					icon: 'circle',
					orient: 'vertical',
					itemWidth: this.$cu.chartSize(8),
					itemHeigth: this.$cu.chartSize(8),
					width: '100%',
					textStyle: {
						color: '#fff',
						// fontSize: this.$cu.chartSize(14),
            ..._subTit,
						rich: {
							// 通过富文本rich给每个项设置样式，下面的oneone、twotwo、threethree可以理解为"每一列"的样式
							one: {
								// 设置文字、数学、英语这一列的样式
								// width: this.$cu.chartSize(60)
                ..._wid,
								// color: "#fff",
							},
							two: {
								// 设置10分、20分、30分这一列的样式
								// width: this.$cu.chartSize(50)
                ..._minwid,
								// color: "#fff",
							},
							three: {
								// 设置百分比这一列的样式
                ..._minwid,
								// color: "#fff",
							}
						}
					}
				},
				formatter: (name) => {
					var target
					this.echartsData.forEach((item) => {
						if (item.name == name) {
							target = item.value
						}
					})
					var v = (target / this.deviceTotal) * 100
					return `{one|${name}}  {two|${target}}   {three|${v}%}`
				},
				color: [
					new echarts.graphic.LinearGradient(0, 0, 0, 1, [
						{
							offset: 0,
							color: 'rgba(125, 64, 255, 1)' // 0% 处的颜色
						},

						{
							offset: 1,
							color: 'rgba(2, 164, 255, 1)' // 100% 处的颜色
						}
					]),
					new echarts.graphic.LinearGradient(0, 0, 0, 1, [
						{
							offset: 0,
							color: 'rgba(255, 146, 45, 1)' // 0% 处的颜色
						},

						{
							offset: 1,
							color: 'rgba(255, 45, 46, 1)' // 100% 处的颜色
						}
					]),
					'#9292C1'
				],
				series: [
					// 内圆，标题背景
					{
						type: 'pie',
						radius: ['0', '30%'],
						center: ['50%', '30%'],
						z: 0,
						itemStyle: {
							normal: {
								color: '#2B2B40',
								label: {
									show: false
								},
								labelLine: {
									show: false
								}
							}
						},
						label: {
							normal: {
								position: 'center'
							}
						},
						data: [100]
					},
					{
						name: 'Access From',
						type: 'pie',
						radius: ['40%', '50%'],
						center: ['50%', '30%'],
						avoidLabelOverlap: false,
						padAngle: 15,
						itemStyle: {
							borderRadius: 10
						},
						label: {
							show: false,
							position: 'center'
						},
						labelLine: {
							show: false
						},
						data: this.echartsData
					}
				]
			}

			this.myChart.setOption(option)
		}
	}
}
</script>

<style lang="less">
.chartBox {
	width: 100%;
	height: 100%;
}
</style>