echarts 不连接的南丁格尔玫瑰图

一个假的前端男

已于 2022-07-13 16:33:21 修改

阅读量758

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： echarts vue.js javascript

于 2022-07-13 15:13:21 首次发布

本文链接：https://blog.youkuaiyun.com/IT_iosers/article/details/125764410

vue 专栏收录该内容

79 篇文章

订阅专栏

本文讲述了在项目中遇到的三个图表问题：数据连续性处理、图表标题位置调整以避免溢出，并分享了使用ECharts解决饼图标题显示与布局的方法。通过加入空数据和自定义labelLayout函数，确保了图表的美观和信息完整。

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

效果图

在这里插入图片描述

项目中遇到的问题

1、如何使它不连续 解决方案 我给他的数据在最后加入了两条空数据

const data = [
	{ value: 100, name: "我是首页1" },
	{ value: 80, name: "我是首页2" },
	{ value: 70, name: "我是首页3" },
	{ value: 65, name: "我是首页4" },
	{ value: 60, name: "我是首页5" },
	{ value: 55, name: "我是首页6" },
	{ value: 50, name: "我是首页7" },
	{ value: 45, name: "我是首页8" },
	{ value: 40, name: "我是首页9" },
	{ value: 35, name: "我是首页10" },
	{ value: 0, name: "" },
	{ value: 0, name: "" }
];

2、去掉只指引线后发现标题距离图表较远如下图 解决方法：通过labelLayout这个字段对别个标题的位置进行布局只需改option即可

在这里插入图片描述

labelLayout(params) {
	// console.log(params, "值");
	if (params.dataIndex < 3) {
		return {
			x: params?.labelLinePoints[0][0] + 15,
			y: params?.labelLinePoints[0][1] + 10
		};
	} else if (params.dataIndex == 3) {
		return {
			x: params?.labelLinePoints[0][0] + 15,
			y: params?.labelLinePoints[0][1] + 15
		};
	} else if (params.dataIndex == 4) {
		return {
			x: params?.labelLinePoints[0][0] + -5,
			y: params?.labelLinePoints[0][1] + 30
		};
	} else if (params.dataIndex == 5) {
		return {
			x: params?.labelLinePoints[0][0] + 10,
			y: params?.labelLinePoints[0][1] + 20
		};
	} else if (params.dataIndex == 6) {
		return {
			x: params?.labelLinePoints[0][0] - 20,
			y: params?.labelLinePoints[0][1] + 10
		};
	} else if (params.dataIndex == 9) {
		return {
			x: params?.labelLinePoints[0][0] - 15,
			y: params?.labelLinePoints[0][1] - 10
		};
	} else {
		return {
			x: params?.labelLinePoints[0][0] - 40,
			y: params?.labelLinePoints[0][1] + 10
		};
	}
},

3、标题超出会省略号解决overflow: "none"
完整代码 :注本文是vue+vite + ts 有单独封装hooks 不可直接粘贴

<template>
	<div class="box">
		<div class="top">
			<div class="top-left">
				<div class="vertical-line"></div>
				<div class="font1">系统发布商品类别排名（前10）</div>
			</div>
		</div>
		<div class="imgContent">
			<div v-for="(item, index) in imgList" :key="index" class="item">
				<img :src="item" alt="" style="width: 17.72px" />
				<div style="margin-left: 4px; font-size: 12px; color: #606266">{{ data[index].name }}</div>
			</div>
		</div>
		<!-- 饼图 -->
		<div ref="echartsRef" class="pie-box"></div>
	</div>
</template>

<script setup lang="ts" name="pieChart">
import { ref, onMounted, reactive } from "vue";
import * as echarts from "echarts";
import { useEcharts } from "@/hooks/useEcharts";
const echartsRef = ref<HTMLElement>();
const imgList = reactive([
	new URL("../../../../assets/images/smallFirstC.png", import.meta.url).href,
	new URL("../../../../assets/images/smallSecondC.png", import.meta.url).href,
	new URL("../../../../assets/images/smallThirdC.png", import.meta.url).href,
	new URL("../../../../assets/images/home4.png", import.meta.url).href,
	new URL("../../../../assets/images/home5.png", import.meta.url).href,
	new URL("../../../../assets/images/home6.png", import.meta.url).href,
	new URL("../../../../assets/images/home7.png", import.meta.url).href,
	new URL("../../../../assets/images/home8.png", import.meta.url).href,
	new URL("../../../../assets/images/home9.png", import.meta.url).href,
	new URL("../../../../assets/images/home10.png", import.meta.url).href
]);
const data = [
	{ value: 100, name: "我是首页1" },
	{ value: 80, name: "我是首页2" },
	{ value: 70, name: "我是首页3" },
	{ value: 65, name: "我是首页4" },
	{ value: 60, name: "我是首页5" },
	{ value: 55, name: "我是首页6" },
	{ value: 50, name: "我是首页7" },
	{ value: 45, name: "我是首页8" },
	{ value: 40, name: "我是首页9" },
	{ value: 35, name: "我是首页10" },
	{ value: 0, name: "" },
	{ value: 0, name: "" }
];
onMounted(() => {
	let myChart: echarts.ECharts = echarts.init(echartsRef.value as HTMLElement);
	// let maxArr = new Array(datas.length).fill(100);

	let option: echarts.EChartsOption = {
		color: [
			"#EB5757",
			"#FAA53B",
			"#4CCCD4",
			"#4475C6",
			"#4CCCD4",
			"#5E9EE3",
			"#95BEEB",
			"#C2D1FE",
			"#CEE2F6",
			"#E1E1F0",
			"#E8E8F8"
		],
		tooltip: {
			trigger: "item",
			formatter: "{b} : {c}"
		},
		series: [
			{
				type: "pie",
				radius: [0, "100%"],
				center: ["45%", "55%"],
				roseType: "area",
				label: {
					color: "inherit",
					position: "outside",
					overflow: "none",
					align: "center",
					rich: {
						a: {
							align: "center"
						}
					},
					formatter: param => {
						console.log(param, "来了");
						if (param.value != 0) {
							return "{a|" + param.name + "\n" + param.value + "种}";
						} else {
							return "";
						}
					}
				},
				labelLine: {
					show: false
				},
				labelLayout(params) {
					// console.log(params, "值");
					if (params.dataIndex < 3) {
						return {
							x: params?.labelLinePoints[0][0] + 15,
							y: params?.labelLinePoints[0][1] + 10
						};
					} else if (params.dataIndex == 3) {
						return {
							x: params?.labelLinePoints[0][0] + 15,
							y: params?.labelLinePoints[0][1] + 15
						};
					} else if (params.dataIndex == 4) {
						return {
							x: params?.labelLinePoints[0][0] + -5,
							y: params?.labelLinePoints[0][1] + 30
						};
					} else if (params.dataIndex == 5) {
						return {
							x: params?.labelLinePoints[0][0] + 10,
							y: params?.labelLinePoints[0][1] + 20
						};
					} else if (params.dataIndex == 6) {
						return {
							x: params?.labelLinePoints[0][0] - 20,
							y: params?.labelLinePoints[0][1] + 10
						};
					} else if (params.dataIndex == 9) {
						return {
							x: params?.labelLinePoints[0][0] - 15,
							y: params?.labelLinePoints[0][1] - 10
						};
					} else {
						return {
							x: params?.labelLinePoints[0][0] - 40,
							y: params?.labelLinePoints[0][1] + 10
						};
					}
				},
				data: data,
				left: 0,
				right: 0,
				startAngle: 60
			}
		]
	};
	useEcharts(myChart, option);
});
</script>