返回 导航

其他

hangge.com

ECharts - 自定义label标签的样式(formatter、rich、添加图标)

作者:hangge | 2021-10-27 08:10
      在使用 Echarts 图表时,如果觉得默认标签的内容或者样式不能满足需求,可以借助 formatter 内容格式器来进行调整。同时 formatter 支持字符串模板和回调函数两种形式,下面通过样例进行演示。

1,默认效果

(1)这里以饼图为例,默认 label 样式如下:

(2)样例代码如下:
<template>
  <div style="width: 40%; height: 50%" ref="chart">
  </div>
</template>

<script>
let Echarts = require('echarts'); //基础实例 注意不要使用import

export default {
  name: 'Home',
  data () {
    return {
      chart: null //图表实例
    }
  },
  mounted() {
    this.showChart();
  },
  methods:{
    //显示图表
    showChart() {
      //1.初始化
       this.chart = Echarts.init(this.$refs.chart);
       //2.配置数据
       let option = {
          tooltip: {
            trigger: 'item'
          },
          series: [
            {
              name: '--- 访客来源 ---',
              type: 'pie',
              radius: '50%',
              data: [
                { value: 1048, name: '直接访问' },
                { value: 735, name: '搜索引擎' },
                { value: 580, name: 'Email' },
                { value: 484, name: '广告' }
              ]
            }
          ]
        };
       // 3.传入数据
       this.chart.setOption(option);
    }
  }
}
</script>

<style scoped>
</style>


2,使用字符串模板方式进行格式化

(1)下面通过 formatter 进行文本内容的格式化,效果图如下:

(2)样例代码如下:
这里我使用字符串模板进行设置,其中模版变量 {a}, {b}, {c}, {d} 在不同图表类型下代表数据含义为:
  • 折线(区域)图、柱状(条形)图、K 线图 : {a}(系列名称),{b}(类目值),{c}(数值), {d}(无)
  • 散点图(气泡)图 : {a}(系列名称),{b}(数据名称),{c}(数值数组), {d}(无)
  • 地图 : {a}(系列名称),{b}(区域名称),{c}(合并数值), {d}(无)
  • 饼图、仪表盘、漏斗图: {a}(系列名称),{b}(数据项名称),{c}(数值), {d}(百分比)
//1.初始化
this.chart = Echarts.init(this.$refs.chart);
//2.配置数据
let option = {
  tooltip: {
    trigger: 'item'
  },
  series: [
    {
      name: '--- 访客来源 ---',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: '直接访问' },
        { value: 735, name: '搜索引擎' },
        { value: 580, name: 'Email' },
        { value: 484, name: '广告' }
      ],
      label: {
        normal: {
          formatter: '{a}\n来源:{b}\n数量:{c}\n比例:{d}%'
        }
      }
    }
  ]
};
// 3.传入数据
this.chart.setOption(option);

3,使用富文本标签样式

(1)虽然 label 无法设置 html 文本,echarts 提供了丰富的文本标签配置项进行样式设置,效果图如下:

(2)样例代码如下:
echarts 提供了丰富的文本标签配置项,包括:
  • 字体基本样式设置fontStylefontWeightfontSizefontFamily
  • 文字颜色color
  • 文字描边textBorderColortextBorderWidth
  • 文字阴影textShadowColortextShadowBlurtextShadowOffsetXtextShadowOffsetY
  • 文本块或文本片段大小lineHeightwidthheightpadding
  • 文本块或文本片段的对齐alignverticalAlign
  • 文本块或文本片段的边框、背景(颜色或图片)backgroundColorborderColorborderWidthborderRadius
  • 文本块或文本片段的阴影shadowColorshadowBlurshadowOffsetXshadowOffsetY
  • 文本块的位置和旋转positiondistancerotate
//1.初始化
this.chart = Echarts.init(this.$refs.chart);
//2.配置数据
let option = {
   tooltip: {
     trigger: 'item'
   },
   series: [
     {
       name: '--- 访客来源 ---',
       type: 'pie',
       radius: '50%',
       data: [
         { value: 1048, name: '直接访问' },
         { value: 735, name: '搜索引擎' },
         { value: 580, name: 'Email' },
         { value: 484, name: '广告' }
       ],
       label: {
         normal: {
           formatter: '{title|{a}}{abg|}\n{bTitle|来源:}{bValue|{b}}\n{hr|}\n' 
           + '{leftGap|}{cIcon|}{cValue|{c}}\n{leftGap|}{dIcon|}{cValue|{d}%}',
           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]
            },
            bTitle: {
              color: '#333',
              height: 24,
              padding: [0, 5, 0, 5],
              align: 'left'
            },
            bValue: {
              color: '#333',
              height: 24,
              padding: [0, 5, 0, 5],
              align: 'right'
            },
            hr: {
              borderColor: '#777',
              width: '100%',
              borderWidth: 0.5,
              height: 0
            },
            leftGap: {
              width:5,
              align: 'left',
            },
            cIcon: {
              height: 15,
              align: 'left',
              margin: [0, 5, 0, 5],
              backgroundColor: {
                 image: '/static/countIcon.png'
              }
            },
            cValue: {
              height: 25,
              padding: [0, 10, 0, 30],
              align: 'right'
            },
            dIcon: {
              height: 15,
              align: 'left',
              backgroundColor: {
                 image: '/static/percentIcon.png'
              }
            },
            dValue: {
              height: 25,
              padding: [0, 10, 0, 30],
              align: 'right'
            },
           }
         } 
       }
     }
   ]
 };
// 3.传入数据
this.chart.setOption(option);

4,使用回调函数进行内容格式化

(1)通过回调函数方式可以对格式化内容进行更自由的设置,比如下面样例只有“直接访问”这个区块使用大标签,其他都是用小标签:

(2)样例代码如下:
//1.初始化
this.chart = Echarts.init(this.$refs.chart);
//2.配置数据
let option = {
   tooltip: {
     trigger: 'item'
   },
   series: [
     {
       name: '--- 访客来源 ---',
       type: 'pie',
       radius: '50%',
       data: [
         { value: 1048, name: '直接访问' },
         { value: 735, name: '搜索引擎' },
         { value: 580, name: 'Email' },
         { value: 484, name: '广告' }
       ],
       label: {
         normal: {
           formatter: (params) => {
             console.log(params);
             //只有“直接访问”使用大标签,其他都使用小标签
             if(params.data.name == '直接访问') {
               return '{title|' + params.seriesName +'}{abg|}\n{bTitle|来源:}{bValue|' 
               + params.data.name + '}\n{hr|}\n{leftGap|}{cIcon|}{cValue|' 
               + params.data.value + '}\n{leftGap|}{dIcon|}{cValue|' 
               + params.percent + '%}';
             } else {
               return '{bTitle|来源:}{bValue|' + params.data.name + '}';
             }
           },
           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]
            },
            bTitle: {
              color: '#333',
              height: 24,
              padding: [0, 5, 0, 5],
              align: 'left'
            },
            bValue: {
              color: '#333',
              height: 24,
              padding: [0, 5, 0, 5],
              align: 'right'
            },
            hr: {
              borderColor: '#777',
              width: '100%',
              borderWidth: 0.5,
              height: 0
            },
            leftGap: {
              width:5,
              align: 'left',
            },
            cIcon: {
              height: 15,
              align: 'left',
              margin: [0, 5, 0, 5],
              backgroundColor: {
                 image: '/static/countIcon.png'
              }
            },
            cValue: {
              height: 25,
              padding: [0, 10, 0, 30],
              align: 'right'
            },
            dIcon: {
              height: 15,
              align: 'left',
              backgroundColor: {
                 image: '/static/percentIcon.png'
              }
            },
            dValue: {
              height: 25,
              padding: [0, 10, 0, 30],
              align: 'right'
            },
           }
         } 
       }
     }
   ]
 };
// 3.传入数据
this.chart.setOption(option);
评论

全部评论(0)

回到顶部