问题形容
正当应用富文本标签会让 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>好忘性不如烂笔头，记录一下