vue组件实现：

<template>
	<div class="roseWrap">
		<div :id="chartId" style="width: 100%; height: 300px"></div>
	</div>
</template>

<script>
	import * as echarts from "echarts";
	export default {
		name: "rosePie", //玫瑰饼图
		props: {
			chartId: {
				type: String,
				default: "rosePie",
			},
		},
		data() {
			return {};
		},
		mounted() {
			this.initChart();
		},
		methods: {
			initChart() {
				// 基于准备好的dom，初始化echarts实例
				let chartDom = document.getElementById(this.chartId);
				let myChart = echarts.init(chartDom);
				const option = this.getChartOption();
				option && myChart.setOption(option);
			},
			getChartOption() {
				const option = {
					series: [{
						// name: '',
						type: "pie",
						radius: [0, "80%"],
						startAngle: 90, // 设置起始旋转角度为180度，即从圆形的底部开始绘制
						center: ["50%", "50%"],
						roseType: "radius",
						itemStyle: {
							borderRadius: 0,
						},
						label: {
							show: true,
							fontFamily: "siyuan",
							fontWeight: 500,
							fontSize: 16,
						},
						labelLine: {
							length: 3, // 设置示意线的长度
							length2: 2, // 设置示意线的第二段的长度
							show: true,
							// 设置示意线的颜色
							lineStyle: {
								color: "#2D67BA",
							},
						},
						data: [{
								value: 32,
								name: "商服业",
								itemStyle: {
									color: {
										type: "li