Echarts数据可视化第11章 Echarts高级功能 11.1 使用富文本标签

痛定思痛。 2024-03-25 20:46 61阅读 0赞

#### Echarts数据可视化 ####

#### 文章目录 ####

*   *   *  Echarts数据可视化
         *  第11章 Echarts高级功能
         *   *  11.1 使用富文本标签

> Echarts数据可视化：入门、实战与进阶

#### 第11章 Echarts高级功能 ####

##### 11.1 使用富文本标签 #####

Echarts 从3.7 版本之后就开始支持富文本标签。

富文本标签的主要功能：

*  支持对文本块的部分片段定义特殊格式
 *  支持在文本中使用图片制作图标或者背景
 *  支持定制文本块的整体样式

首先我们要区分文本块和文本片段，也就是本文标签的部分(文本片段) 与整体(文本块) 的关系。

option = {
        
      series: [
        {
        
          type: 'scatter',
          data: [
            {
        
              value: [0, 0], // 位置
              label: {
        
                // 富文本内容
                normal: {
        
                  // 文本块样式定义
                  show: true,
                  formatter: [
                    '默认文字样式',
                    '{a|文字描边宽度与颜色}',
                    '{b|带背景色边界圆角}',
                    '{c|带有色阴影且阴影在x、y轴偏移}'
                  ].join('\n'),
                  backgroundColor: '#ddd', // 文本块背景色
                  borderColor: '#444', // 描边颜色
                  borderWidth: 4, // 描边宽度
                  borderRadius: 10, // 描边半径
                  padding: 15, // 描边扩充空间
                  color: '#000', // 默认字体颜色
                  fontSize: 20, // 默认字体大小
                  shadowBlur: 50, // 阴影模糊等级
                  shadowColor: '#666', // 阴影颜色
                  shadowOffsetX: 3, // 阴影x轴偏移
                  shadowOffsetY: 3, // 阴影y轴偏移
                  lineHeight: 30, // 行高
                  rich: {
        
                    // 文本片段样式定义
                    a: {
        
                      // 样式a
                      fontSize: 30, // 字体大小
                      textBorderColor: '#00F', // 文字描边颜色
                      textBorderWidth: 4, // 文字描边宽度
                      color: '#ff0' // 文字颜色
                    },
                    b: {
        
                      backgroundColor: '#F0F', // 文字背景色
                      color: '#000', // 文字颜色
                      fontSize: 15, // 文字大小
                      borderRadius: 10, // 文字边角半径
                      padding: 6 // 文字边界扩充
                    },
                    c: {
        
                      backgroundColor: '#04f',
                      padding: 4, // 文字边界扩充
                      color: '#FFF', // 文字颜色
                      shadowBlur: 5, // 阴影模糊等级
                      shadowColor: '#0F0', // 阴影颜色
                      shadowOffsetX: 8, // 阴影x轴偏移
                      shadowOffsetY: 8 // 阴影y轴偏移
                    }
                  }
                }
              }
            }
          ]
        }
      ],
      xAxis: {
        
        // 不显示x轴
        axisLabel: {
         show: false },
        axisLine: {
         show: false },
        splitLine: {
         show: false },
        axisTick: {
         show: false },
        min: -1,
        max: 1
      },
      yAxis: {
        
        // 不显示y轴
        axisLabel: {
         show: false },
        axisLine: {
         show: false },
        splitLine: {
         show: false },
        axisTick: {
         show: false },
        min: -1,
        max: 1
      }
    };

渲染效果

![在这里插入图片描述][e56c754ac7eb4e5fbdcd389d59318dc3.png_pic_center]

有些时候，我们需要在可视化中使用图标让可视化效果更具感染力和辨识度。

可以像下面这样实现

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../js/echarts.js"></script>
    </head>
    <body>
    <div id="main" style="width: 900px;height: 600px;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById("main"));
        var Icons = {
           // 图标本地路径
            'Subway': "小汽车.png",
            'Car': "高铁.png",
            'Bicycle': "自行车.png"
        };
        var Label = {
          normal: {
          show: true}};
        option = {
           // 数据和设置部分
            title: {
          
                text: '出行交通工具统计', // 标题
                x: 'center'
            },
            tooltip: {
          
                trigger: 'axis',
                axisPointer: {
          type: 'shadow'}
            },
            legend: {
          
                data: ['A职场', 'B职场', 'C职场'], // 图例
                x: '70%'
            },
            grid: {
          left: 90}, // 网格
            xAxis: {
          
                type: 'value', // x轴
                axisLabel: {
          formatter: '{value}'}
            },
            yAxis: {
          
                type: 'category', // y轴
                inverse: true,
                data: ['Subway', 'Car', 'Bicycle'],
                axisLabel: {
          
                    formatter: function (value) {
          
                        return '{' + value + '| }\n{value|'
                            + value + '}';
                    },
                    margin: 15,
                    rich: {
          
                        value: {
          
                            lineHeight: 20,
                            align: 'center'
                        },
                        Subway: {
          
                            height: 60,
                            align: 'center',
                            backgroundColor: {
          
                                image: Icons.Subway
                            }
                        },
                        Car: {
          
                            height: 60,
                            align: 'center',
                            backgroundColor: {
          
                                image: Icons.Car
                            }
                        },
                        Bicycle: {
          
                            height: 60,
                            align: 'center',
                            backgroundColor: {
          
                                image: Icons.Bicycle
                            }
                        }
                    }
                }
            },
            series: [{
          
                name: 'A职场', // 数据部分
                type: 'bar',
                data: [67, 40, 39],
                label: Label
            },
                {
          
                    name: 'B职场',
                    type: 'bar',
                    label: Label,
                    data: [98, 54, 40]
                },
                {
          
                    name: 'C职场',
                    type: 'bar',
                    label: Label,
                    data: [76, 25, 72]
                }]
        };
        myChart.setOption(option);
    </script>
    </html>

浏览器渲染效果

![在这里插入图片描述][963865cd02e14c2ebdf66e1a4069aa62.png_pic_center]

[e56c754ac7eb4e5fbdcd389d59318dc3.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/64fe288c8891418d8adda53081956bad.png
[963865cd02e14c2ebdf66e1a4069aa62.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/3bfccb23253848548c3616d53eb48936.png