问题形容

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