Echarts数据可视化

文章目录

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
  }
};

渲染效果

在这里插入图片描述

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

可以像下面这样实现

<!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>

浏览器渲染效果

在这里插入图片描述

# echarts # 信息可视化 # 前端
Logo
腾讯云开发者社区

腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。

更多推荐

终极指南：Flink SQL连接器版本管理从混乱到有序的升级之路

Apache Flink作为流处理领域的佼佼者，其SQL连接器的版本管理一直是开发者面临的核心挑战。本文将系统讲解Flink SQL连接器版本管理的最佳实践，帮助你轻松应对版本兼容性问题，实现从混乱到有序的升级之旅。## 连接器版本管理的常见痛点 😫在Flink应用开发中，连接器版本管理常常让开发者头疼不已。不同版本的连接器可能导致各种兼容性问题，例如API变更、功能差异甚至运行时错误。

avatar 腾讯云开发者社区

Elasticsearch复杂数据类型终极指南：从入门到精通

Elasticsearch作为功能强大的搜索引擎，支持多种复杂数据类型，让开发者能够灵活处理各种结构化和非结构化数据。本文将带你全面了解Elasticsearch中的复杂数据类型，从基础概念到实际应用，助你轻松掌握数据建模的核心技巧。## 内部对象：构建层级化数据结构在Elasticsearch中，对象类型（Object）是最基础的复杂数据类型之一，用于表示具有嵌套关系的数据。例如，我们可

avatar 腾讯云开发者社区

如何快速搭建Neon无服务器PostgreSQL：面向初学者的完整指南

Neon是一款革命性的无服务器PostgreSQL解决方案，它通过分离存储和计算层，实现了自动扩缩容、类代码式数据库分支以及零级扩展能力。本指南将帮助你从零开始搭建Neon开发环境，体验这款创新数据库的强大功能。## 准备工作：环境要求与依赖项在开始搭建Neon环境前，请确保你的系统满足以下要求：- Linux操作系统（推荐Ubuntu 20.04+或Debian 11+）- Git

avatar 腾讯云开发者社区