Problem description

Using the rich text tag and the formatter function to optimize the Legend style will make echarts graphs look better. This article describes how to use the rich text tag and the Formatter function to optimize the Legend style.

  • Name Name rendering
  • Value Value rendering
  • Percentage of calculated data
  • Style alignment effect

rendering

Show the pie chart data and the corresponding calculated percentage in Legend. At the same time, set the text style and alignment. The alignment is to set the width of each item through rich text, so that the alignment can be done. Of course, concatenate it in the formatter function.

The following code

  • Look at the rich text Settings for Legend –> textStyle –> Rich
  • Then look at the writing syntax for Legend –> Formatter
<template>
  <div>
    <div class="echartsBox" id="main"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [{value: 110.name: "Language Performance" },
        { value: 5.name: "Mathematics" },
        { value: 140.5.name: "English score"},]}; },mounted() {
    // Make echarts render with mounted call
    this.echartsInit();
  },
  methods: {
    echartsInit() {
      let main = document.getElementById("main"); // Get the DOM element as a container for EachArts
      this.$echarts.init(main).setOption({
        title: {
          zlevel: 2.// Control the level of the word in the middle of the ring diagram
          text: "I am Xiao Ming's report card.".top: "47%".// Control the position
          left: "32%".// Control the position
          textAlign: "center".// Center the text
        },
        tooltip: {
          trigger: "item".// Trigger mechanism, mouse hover on the ring item
          show: true.// Control whether the mouse hover to display data
        },
        legend: {
          orient: "vertical".// Control horizontal alignment
          top: "36%".// Adjust the position
          right: "6%".// Distance right position
          icon: "circle".// Change the small icon to a circle
          itemHeight: 12.// Change the size of the small circle icon
          textStyle: {
            // The style of the text
            fontSize: 24.// You can control the spacing of each legend item
            color: "# 828282".rich: {
              // Use the rich text "rich" to style each item. Oneone, Twotwo, threethree can be understood as "each column"
              oneone: {
                // Set the style for the text, math and English columns
                width: 50.color: "# 000000".fontSize: 12.fontWeight: "bolder",},twotwo: {
                // Set the style for the 10, 20 and 30 points columns
                width: 35.color: "# 333".fontSize: 12,},threethree: {
                // Set the style for the percentage column
                width: 20.color: "#E0E0E0".fontSize: 12,}}},formatter: (name) = > {
            // The formatter function dynamically renders the data
            console.log(name);
            var total = 0; // Used to calculate the total
            var target; // Iterate to get the data
            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}Points} {threethree |${v}%} `;
            // Rich text first column style applies rich text second column style applies rich text third column style applies}},color: ["#baf"."#bfa"."#cde"].// Control the color of the ring diagram
        series: [{name: "Transcript".type: "pie".// The type is pie chart
            radius: ["30%"."50%"].// A circle is divided into inner diameter and outer diameter, that is, two pie charts with different radii can form a circle diagram. The two items in the RADIUS array are inner diameter and outer diameter (percentage of the canvas), respectively.
            center: ["32%"."50%"].// Adjust the position of the ring graph
            data: this.data, // The data in the pie chart is usually obtained by sending a request
            avoidLabelOverlap: true.// Prevent the traction wires from stacking together
            label: {
              normal: {
                show: true.position: "outside".// There is an inside parameter to keep the data in the ring
                formatter: "{d}%".// Template variables are {a}, {b}, {c}, {d}, respectively, representing the series name, data name, data value, percentage. The {d} data is calculated as a percentage based on the value
                textStyle: {
                  // The style of the text on the string
                  align: "right".baseline: "middle".fontFamily: Microsoft Yahei.fontSize: 12.fontWeight: "bolder".color: "# 333",}}},labelLine: {
              show: true.// Whether to display the extension line
              length: 10.// Extend the length of the line}},]}); ,}}};</script>

<style lang="less" scoped>
.echartsBox {
  width: 600px;
  height: 400px;
}
</style>
Copy the code

A good memory is better than a bad pen. Write it down