Echarts 设置样式 formatter

最新推荐文章于 2024-08-01 23:45:55 发布

原创最新推荐文章于 2024-08-01 23:45:55 发布 · 2.1k 阅读

1 ·

CC 4.0 BY-SA版权

前端同时被 2 个专栏收录

9 篇文章

订阅专栏

Echarts

4 篇文章

订阅专栏

本文探讨了ECharts中使用富文本格式进行数据展示的方法，包括如何通过formatter函数定制图表元素的显示样式，以及如何利用富文本标签实现数据与样式的灵活结合，适用于前端开发者提升数据可视化效果。

formatter: function (params) {
  let str = '';
  for (let i = 0; i < data.length; i++) {
    if (data[i].name === params) {
      str = '{value' + i + '|' + data[i].value + '%  ' + params + '}';
    }
  }
  return str;
},
textStyle: {
  color: '#fff',
  fontSize: 12,
  rich: {
    value0: {
      color: color[0]
    },
    value1: {
      color: color[1]
    },
    value2: {
      color: color[2]
    }
  }
}

 formatter:function(params){ 
    str = '{a|'+ params.data.flag + '} {a} {b|'+params.name+'：} {b} '
    return str
}

// {a| 表示a样式
// {a} 有固定的含义 {a}（系列名称），{b}（数据项名称），{c}（数值）