富文本及formatter的使用

先看效果图：该饼图统计总共的数据，其中每块饼图旁边显示了3条相应的详细数据

其中后端提供的数据结构如下

{
  "code": 0,
  "randomSelectedList": [
    {
      "username": "a1",
      "newsName": "北京大学-悉尼大学食物安全和农业可持续发展联合中心揭牌仪式暨学术研讨会举行"
    },
    {
      "username": "a1",
      "newsName": "“沉浸式传播视域下传统文化+虚拟现实的创新路径”研讨会在北京大学举行"
    },
    {
      "username": "a1",
      "newsName": "美国气象学会理事长访问北京大学"
    },
    {
      "username": "a1",
      "newsName": "巴基斯坦前总理阿巴西访问北京大学"
    },
    {
      "username": "a1",
      "newsName": "张辛：小雪"
    },
    {
      "username": "a1",
      "newsName": "“异彩同风，共鸣未名”——北京大学第二十一届国际文化节举行"
    },
    {
      "username": "a1",
      "newsName": "电子学院张志勇教授团队在碳基高灵敏红外探测领域取得进展"
    },
    {
      "username": "a1",
      "newsName": "校领导率队赴云南弥渡推进定点帮扶工作"
    },
    {
      "username": "a1",
      "newsName": "“国别和区域研究视域下的库尔德问题”研讨会暨《伊拉克库尔德问题研究（1958—2003）》新书发布会举行"
    },
    {
      "username": "a1",
      "newsName": "北京大学召开党纪学习教育动员暨2024年深化全面从严治党工作会议"
    },
    {
      "username": "a2",
      "newsName": "北京大学格致论坛（第23讲）暗物质粒子寻找的科学之旅"
    },
    {
      "username": "a2",
      "newsName": "田晖：我们的目光，正跃出太阳系"
    },
    {
      "username": "a2",
      "newsName": "“国别和区域研究视域下的库尔德问题”研讨会暨《伊拉克库尔德问题研究（1958—2003）》新书发布会举行"
    },
    {
      "username": "a3",
      "newsName": "“国别和区域研究视域下的库尔德问题”研讨会暨《伊拉克库尔德问题研究（1958—2003）》新书发布会举行"
    },
    {
      "username": "a3",
      "newsName": "校领导率队赴云南弥渡推进定点帮扶工作"
    },
    {
      "username": "a3",
      "newsName": "弘工匠精神，展后勤风采——北京大学首届后勤系统职工职业技能大赛举行"
    }
  ]
}

对data数据进行如下的处理

let res = data.list;
let randomSelectedList = data.randomSelectedList
let yAxis = [];
let xAxis = [];
var option = {};

let paraData = []
for (let i = 0; i < res.length; i++) {
  yAxis.push(res[i].userCollection);
  xAxis.push(res[i].username);
  let details = [];
  for (let j = 0; j < randomSelectedList.length; j++) {
    if (res[i].username == randomSelectedList[j].username) {
      details.push(randomSelectedList[j].newsName)
    }
  }
  paraData.push({
    name: res[i].username,
    value: res[i].userCollection,
    details: details
  })
}

对应的option

option = {
  title: {
    text: '收藏统计',
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c} ({d}%)'
  },
  series: [
    {
      name: '收藏数',
      type: 'pie',
      radius: '65%',
      center: ['50%', '50%'],
      selectedMode: 'single',
      data: paraData,
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      },
      label: {
        formatter: function (params) {
          let data = params.data
          var arr = 
            '{title|用户名：'+ data.name +'}{abg|}\n'+
            '{weatherHead|收藏的新闻}\n'+
            '{hr|}\n'

          var length = data.details.length
          var detail = data.details
          if(length > 3){
            length = 3
          }
          for (let i =0 ;i<length;i++){
            arr = arr +' {value|'+ detail[i] +'}\n'

          }
          console.log(arr)
          return arr;
        },
        // formatter: [
        //   '{title|{b}}{abg|}',
        //   '  {weatherHead|收藏的新闻}',
        //   '{hr|}',
        //   '  {value|}',
        //   '  {value|142}',
        //   '  {value|21}'
        // ].join('\n'),
        backgroundColor: '#eee',
        borderColor: '#777',
        borderWidth: 1,
        borderRadius: 4,
        rich: {
          title: {
            color: '#eee',
            align: 'center'
          },
          abg: {
            backgroundColor: '#333',
            width: '100%',
            align: 'right',
            height: 25,
            borderRadius: [4, 4, 0, 0]
          },
          Sunny: {
            height: 30,
            align: 'left',
            backgroundColor: {

            }
          },
          Cloudy: {
            height: 30,
            align: 'left',
            backgroundColor: {

            }
          },
          Showers: {
            height: 30,
            align: 'left',
            backgroundColor: {

            }
          },
          weatherHead: {
            color: '#333',
            height: 24,
            align: 'center'
          },
          hr: {
            borderColor: '#777',
            width: '100%',
            borderWidth: 0.5,
                        height: 0
                    },
                    value: {
                        width: 40,
                        padding: [0, 20, 0, 30],
                        align: 'center'
                    },
                    valueHead: {
                        color: '#333',
                        width: 20,
                        padding: [0, 20, 0, 30],
                        align: 'center'
                    },
                    rate: {
                        width: 40,
                        align: 'right',
                        padding: [0, 10, 0, 0]
                    },
                    rateHead: {
                        color: '#333',
                        width: 40,
                        align: 'center',
                        padding: [0, 10, 0, 0]
                    }
                }
            }
        },

    ]
};

1. 定义富文本样式：
   • 在label.rich中，定义了多个样式名称（如title, abg, weatherHead, hr, value等），并为每个样式指定了属性（如颜色、对齐方式、背景颜色、宽度、高度、边框颜色、边框宽度、内边距等）。
   • 这些样式名称可以在formatter函数中被引用，以应用特定的样式到文本的某一部分。
2. 使用富文本样式：
   • 在formatter函数中，通过模板字符串（使用反引号`）和占位符（如{title|用户名：...}）来构建标签的文本内容。
   • 每个占位符中的第一个部分（如title）是rich中定义的样式名称，后面的部分（如用户名：...）是要显示的文本。
   • 这种方式允许在标签的不同部分应用不同的样式。
3. 动态内容：
   • formatter函数可以根据数据（params.data）动态生成标签内容。
   • 在这个例子中，它用于显示用户的收藏统计，包括用户名、收藏的新闻标题，以及（如果可用的话）前三条新闻标题。
4. 特殊样式：
   • abg样式被用作一个特殊的背景块，可能用于分隔文本或提供视觉上的层次感。
   • hr样式模拟了一个水平分隔线，通过指定宽度、边框颜色、边框宽度和高度来实现。
5. 未使用的样式：
   • 在rich中定义了一些样式（如Sunny, Cloudy, Showers），但在formatter函数中并未使用。这些可能是为了其他目的而预留的，或者是在示例中被省略了。
6. 调试：
   • console.log(arr)语句用于在控制台输出构建的标签文本，这有助于调试和验证formatter函数的输出。

综上所述，富文本的使用在ECharts中提供了一种灵活的方式来定制图表标签的样式和内容，使其能够更直观地展示数据和提供用户友好的界面。

echarts官网来源： https://echarts.apache.org/examples/zh/editor.html?c=pie-rich-text