问题描述
合理使用富文本标签会让echarts图做的效果更好看，本篇文章记录一下使用rich富文本标签和formatter函数去实现legend样式的优化修改，大致包含：
- name名称呈现
- value数值呈现
- 计算出的数据百分比
- 样式对齐效果
效果图
将饼图数据和相应计算的百分比在legend中也展示，同时设置一下文字的样式，对齐方式，对齐方式是通过rich富文本设置每一项的宽度，就可以对齐了。当然要在formatter函数中拼接上去。
代码如下
- 先看legend --> textStyle --> rich的富文本设置
- 然后看legend --> formatter的书写语法
<template>
<div>
<div class="echartsBox" id="main"></div>
</div>
</template>
<script>
export default {
data() {
return {
data: [
{ value: 110, name: "语文成绩" },
{ value: 5, name: "数学" },
{ value: 140.5, name: "英语成绩" },
],
};
},
mounted() {
// 在通过mounted调用让echarts渲染
this.echartsInit();
},
methods: {
echartsInit() {
let main = document.getElementById("main"); // 获取dom元素作为eacharts的容器
this.$echarts.init(main).setOption({
title: {
zlevel: 2, // 控制圆环图中间的字的层级
text: "我是小明的成绩单",
top: "47%", // 控制位置
left: "32%", // 控制位置
textAlign: "center", // 让文字居中
},
tooltip: {
trigger: "item", // 触发机制，鼠标悬浮圆环项上
show: true, // 控制鼠标悬浮是否显示数据
},
legend: {
orient: "vertical", // 控制水平排列
top: "36%", // 调整位置
right: "6%", // 距离右侧位置
icon: "circle", // 修改小图标为圆形
itemHeight: 12, // 修改圆形小图标的大小
textStyle: {
// 文字的样式
fontSize: 24, // 可控制每个legend项的间距
color: "#828282",
rich: {
// 通过富文本rich给每个项设置样式，下面的oneone、twotwo、threethree可以理解为"每一列"的样式
oneone: {
// 设置文字、数学、英语这一列的样式
width: 50,
color: "#000000",
fontSize: 12,
fontWeight: "bolder",
},
twotwo: {
// 设置10分、20分、30分这一列的样式
width: 35,
color: "#333",
fontSize: 12,
},
threethree: {
// 设置百分比这一列的样式
width: 20,
color: "#E0E0E0",
fontSize: 12,
},
},
},
formatter: (name) => {
// formatter格式化函数动态呈现数据
console.log(name);
var total = 0; // 用于计算总数
var target; // 遍历拿到数据
for (var i = 0; i < this.data.length; i++) {
total += this.data[i].value;
if (this.data[i].name == name) {
target = this.data[i].value;
}
}
var v = ((target / total) * 100).toFixed(2);
return `{oneone|${name}} {twotwo|${target}分} {threethree|${v}%}`;
// 富文本第一列样式应用 富文本第二列样式应用 富文本第三列样式应用
},
},
color: ["#baf", "#bfa", "#cde"], // 控制圆环图的颜色
series: [
{
name: "成绩单",
type: "pie", // 类型为饼图
radius: ["30%", "50%"], // 圆环分为内径和外径，就是两个半径不一样的饼图可组成一个圆环图，radius数组中的两项分别为内径和外径（相对画布的百分比）
center: ["32%", "50%"], // 调整圆环图位置
data: this.data, // 饼图的数据，一般是发请求获取的
avoidLabelOverlap: true, // 防止牵引线堆叠挤在一块
label: {
normal: {
show: true,
position: "outside", // 另有参数inside，可以让数据在圆环上
formatter: "{d}%", //模板变量有 {a}、{b}、{c}、{d}，分别表示系列名，数据名，数据值，百分比。{d}数据会根据value值计算百分比
textStyle: {
// 牵引线上的文字的样式
align: "right",
baseline: "middle",
fontFamily: "微软雅黑",
fontSize: 12,
fontWeight: "bolder",
color: "#333",
},
},
},
labelLine: {
show: true, // 是否显示延展线
length: 10, // 延展线条的长度
},
},
],
});
},
},
};
</script>
<style lang="less" scoped>
.echartsBox {
width: 600px;
height: 400px;
}
</style>
好记性不如烂笔头，记录一下
