Problem description

Use rich text tags to make Echarts look better. In this article, we will record the use of rich text tags and formatter function to achieve the optimization of the Legend style.

  • Name rendering
  • Value value presentation
  • Percentage of calculated data
  • Style Alignment

rendering

The pie chart data and the corresponding calculated percentage are also shown in Legend, and at the same time, set the text style and alignment. The alignment method is to set the width of each item through the rich text, which can be aligned. Of course, you need to splice it in the formatter function.

The following code

  • Legend -> textStyle -> rich
  • Legend –> formatter
<template> <div> <div class="echartsBox" id="main"></div> </div> </template> <script> export default { data() { return { Data: [{value: 110, the name: "language result"}, {value: 5, name: "mathematics"}, {value: 140.5, name: "English"},],}; }, Mounted () {// Get echarts to render this.echartsinit (); }, methods: { echartsInit() { let main = document.getElementById("main"); $echarts.init(main).setOption({title: {zlevel: 2, top: 1) {$echarts.init(main).setOption({title: {zlevel: 2, top: 1) {$echarts.init(main).setOption({title: {zlevel: 2, top: 1); }, tooltip: {trigger: "item", // Show: Legend: {Orient: "vertical"}, Legend: {Orient: "vertical"}, Legend: {Orient: "vertical", // Control horizontal array top: "36%", // Adjusts position right: "6%", // From the right position icon: }}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}} "#828282", rich: {// style each item with rich text, the following oneone, twotwo, threethree can be read as "each column" style oneone: {// set text, math, English column style 50, color: "#000000", fontSize: 12, fontWeight: "bolder",}, twotwo: {width: 35, color: = "#000000"; "#333", fontSize: 12,}, threeThree: {width: 20, color: "#E0E0E0", fontSize: 12,},}, formatter: "#333", fontSize: 12,},}, (name) => {// Formatter console.log(name); var total = 0; // Calculate the total var target; Var I = 0; 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 | ${n} %} `; },}, color: ["#baf", "#bfa", "#cde"], color: [{name: "report card ", type: "Pie ", // type of pie radius: ["30%", "50%"], // two pie charts with different radii to form a circle. The two entries in the radius array are the inner and outer diameters (relative to the percentage of the canvas) center: ["32%", "50%"], // Data on the Pie Chart is obtained by calling backtick LabelOverlap: true, // Label: {normal: {show: true, position: "outside", // "{d}%", // The template variables are {a}, {b}, {c}, {d}, respectively, which represent the series name, data name, data value, and percentage. {d} will calculate the percentage according to the value. FONTSIZE: 12, FONTWEIGHT: "Bolder ", COLOR: "#333",},},}, Labelline: },},],}); ,}}}; </script> <style lang="less" scoped> .echartsBox { width: 600px; height: 400px; } </style>

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