Apache ECharts 饼状图：如何轻松实现特定部分的默认突出显示？

2024-03-11 15:42:00

Apache ECharts 饼状图：如何默认突出显示特定部分

简介

Apache ECharts 是一个流行的 JavaScript 库，用于创建交互式和动态的数据可视化。饼状图是 ECharts 中常见的图表类型，用于显示数据按比例的分布情况。为了获得更清晰的展示效果，有时需要默认突出显示饼状图中的特定部分。本文将深入探讨如何通过设置特定的选项来实现这一目标。

设置突出显示

要默认突出显示 Apache ECharts 饼状图中的特定部分，请按照以下步骤操作：

1. 导入 ECharts 库

将 ECharts 库的脚本标签添加到你的 HTML 文件中：

<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>

2. 创建饼状图

使用 ECharts API 创建一个饼状图，并为其指定数据。

3. 启用单选模式

在饼状图的 series 配置中，找到要突出显示的部分，并设置 selectedMode 选项为 'single'。这将启用单选模式，确保只有一部分被突出显示。

4. 设置默认突出显示

同样在 series 配置中，为要默认突出显示的部分设置 selected 选项为 true。这将在图表初始化时自动突出显示该部分。

示例代码

var myChart = echarts.init(document.getElementById('myChart'));

var option = {
  series: [{
    type: 'pie',
    data: [{
      value: 5,
      name: 'A',
      selected: true
    }, {
      value: 10,
      name: 'B'
    }, {
      value: 15,
      name: 'C'
    }],
    selectedMode: 'single'
  }]
};

myChart.setOption(option);