echarts圆环图完全指南从基础配置到高级应用轻松打造精美数据可视化效果提升报表专业度与用户体验

1. ECharts圆环图简介

ECharts是一款由百度开源的，基于JavaScript的数据可视化图表库，它提供了直观、生动、可交互、可高度个性化定制的数据可视化图表。在众多图表类型中，圆环图（Donut Chart）作为一种特殊的饼图，以其中心空白区域的特点，不仅能够展示数据的占比关系，还能在中心区域展示额外信息，使数据呈现更加丰富和美观。

圆环图相较于传统饼图，具有以下优势：

中心区域可用于展示总计数据或关键指标
视觉上更加轻盈，减少了视觉压迫感
更容易进行多层数据的嵌套展示
更适合在移动端等小屏幕设备上展示

在实际应用中，圆环图广泛用于：

销售数据占比分析
市场份额展示
预算使用情况
调查结果统计
KPI指标完成度展示

2. ECharts圆环图基础配置

2.1 环境准备

在使用ECharts之前，我们需要先引入ECharts库。有几种方式可以引入：

方式一：直接引入CDN

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts圆环图示例</title> <!-- 引入 ECharts 文件 --> <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script> </head> <body> <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 后续配置... </script> </body> </html>

方式二：使用npm安装

npm install echarts

然后在JavaScript文件中引入：

import * as echarts from 'echarts';

2.2 最简单的圆环图

下面是一个最基础的圆环图示例：

// 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: '某站点用户访问来源', left: 'center' }, tooltip: { trigger: 'item' }, legend: { orient: 'vertical', left: 'left', }, series: [ { name: '访问来源', type: 'pie', // 类型为饼图 radius: ['40%', '70%'], // 内半径和外半径，形成圆环 avoidLabelOverlap: false, itemStyle: { borderRadius: 10, borderColor: '#fff', borderWidth: 2 }, label: { show: false, position: 'center' }, emphasis: { label: { show: true, fontSize: '40', fontWeight: 'bold' } }, labelLine: { show: false }, data: [ { value: 1048, name: '搜索引擎' }, { value: 735, name: '直接访问' }, { value: 580, name: '邮件营销' }, { value: 484, name: '联盟广告' }, { value: 300, name: '视频广告' } ] } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option);

这个示例中，关键配置在于series中的radius属性，我们将其设置为['40%', '70%']，表示内半径为40%，外半径为70%，这样就形成了一个圆环图，而不是实心饼图。

2.3 圆环图基础配置详解

2.3.1 标题配置（title）

title: { text: '主标题文本', subtext: '副标题文本', left: 'center', // 水平位置，可选'left'、'center'、'right'或具体像素值 top: 'top', // 垂直位置，可选'top'、'middle'、'bottom'或具体像素值 textStyle: { color: '#333', fontSize: 18, fontWeight: 'bold' }, subtextStyle: { color: '#666', fontSize: 12 } }

2.3.2 提示框配置（tooltip）

tooltip: { trigger: 'item', // 触发方式，'item'表示数据项触发，'axis'表示坐标轴触发 formatter: '{a} <br/>{b}: {c} ({d}%)' // 提示框内容格式器 // {a}为系列名称，{b}为数据项名称，{c}为数值，{d}为百分比 }

2.3.3 图例配置（legend）

legend: { orient: 'vertical', // 图例列表的布局朝向，'horizontal'或'vertical' left: 'left', // 图例位置 top: 'middle', data: ['搜索引擎', '直接访问', '邮件营销', '联盟广告', '视频广告'], // 图例数据数组 textStyle: { color: '#333' }, selectedMode: true, // 图例选择的模式，可以是布尔值或'single'、'multiple' icon: 'circle' // 图例的图标形状 }

2.3.4 系列配置（series）

series: [ { name: '访问来源', // 系列名称 type: 'pie', // 图表类型 radius: ['40%', '70%'], // 圆环的内半径和外半径 center: ['50%', '50%'], // 圆心坐标，默认为['50%', '50%'] roseType: false, // 是否展示成南丁格尔图 startAngle: 90, // 起始角度，默认为90度 minAngle: 0, // 最小扇区角度，防止某些值过小 clockwise: true, // 是否顺时针排布 data: [ // 数据数组 { value: 1048, name: '搜索引擎' }, { value: 735, name: '直接访问' }, { value: 580, name: '邮件营销' }, { value: 484, name: '联盟广告' }, { value: 300, name: '视频广告' } ], label: { // 标签配置 show: true, // 是否显示标签 position: 'outside', // 标签位置，'outside'、'inside'、'center' formatter: '{b}: {d}%' // 标签内容格式器 }, labelLine: { // 标签视觉引导线配置 show: true // 是否显示视觉引导线 }, itemStyle: { // 图形样式配置 borderColor: '#fff', // 图形的描边颜色 borderWidth: 2, // 描边线宽 borderRadius: 0 // 圆角半径 }, emphasis: { // 高亮状态的配置 scale: true, // 是否开启高亮后扇区的放大效果 scaleSize: 5, // 高亮后扇区的放大尺寸 itemStyle: { shadowBlur: 10, // 图形阴影的模糊大小 shadowOffsetX: 0, // 阴影水平偏移 shadowColor: 'rgba(0, 0, 0, 0.5)' // 阴影颜色 } } } ]

3. 圆环图样式美化

3.1 颜色配置

ECharts提供了多种方式来配置圆环图的颜色，可以使用内置的颜色主题，也可以自定义颜色。

3.1.1 使用内置颜色主题

// 使用内置主题 var myChart = echarts.init(document.getElementById('main'), 'dark'); // 或 var myChart = echarts.init(document.getElementById('main'), 'light');

3.1.2 自定义颜色

option = { // ...其他配置 color: ['#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#FF9F7F'], series: [ { // ...系列配置 } ] };

3.1.3 渐变色配置

option = { // ...其他配置 series: [ { type: 'pie', radius: ['40%', '70%'], data: [ { value: 1048, name: '搜索引擎', itemStyle: { color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: '#37A2DA' // 0% 处的颜色 }, { offset: 1, color: '#2F541E' // 100% 处的颜色 }], global: false // 缺省为 false } } }, // 其他数据项... ] } ] };

3.2 标签美化

3.2.1 自定义标签内容和样式

series: [ { // ...其他配置 label: { show: true, position: 'outside', formatter: function(params) { // 自定义标签内容 return `${params.name}n${params.value} (${params.percent}%)`; }, fontSize: 14, fontWeight: 'bold', color: '#333', align: 'center', verticalAlign: 'middle', padding: [4, 4], // 标签内边距 backgroundColor: 'rgba(255, 255, 255, 0.7)', borderColor: '#ccc', borderWidth: 1, borderRadius: 4 }, labelLine: { show: true, length: 15, // 视觉引导线第一段的长度 length2: 10, // 视觉引导线第二段的长度 smooth: true, // 是否平滑视觉引导线 lineStyle: { width: 1, type: 'solid' } } } ]

3.2.2 中心标签显示

series: [ { // ...其他配置 label: { show: false, position: 'center' }, emphasis: { label: { show: true, fontSize: '30', fontWeight: 'bold', formatter: '{b}n{c} ({d}%)' } } } ]

3.3 圆环图中心内容

圆环图的中心区域可以用来展示额外信息，如总计数据、标题等。

option = { // ...其他配置 graphic: [ { type: 'text', // 图形元素类型 left: 'center', // 定位 top: 'center', style: { text: '总访问量', // 显示的文本 fontSize: 20, fontWeight: 'bold', fill: '#333' // 文字颜色 } }, { type: 'text', left: 'center', top: 'center', style: { text: '3147', // 显示的数值 fontSize: 24, fontWeight: 'bold', fill: '#37A2DA', y: 25 // 向下偏移25像素 } } ], series: [ // ...系列配置 ] };

3.4 圆环图边框和阴影

series: [ { // ...其他配置 itemStyle: { borderRadius: 10, // 圆角半径 borderColor: '#fff', // 边框颜色 borderWidth: 2, // 边框宽度 shadowBlur: 10, // 图形阴影的模糊大小 shadowColor: 'rgba(0, 0, 0, 0.5)', // 阴影颜色 shadowOffsetX: 3, // 阴影水平偏移 shadowOffsetY: 3 // 阴影垂直偏移 } } ]

4. 圆环图交互功能

4.1 高亮效果

series: [ { // ...其他配置 emphasis: { scale: true, // 是否开启高亮后扇区的放大效果 scaleSize: 5, // 高亮后扇区的放大尺寸 itemStyle: { shadowBlur: 10, // 图形阴影的模糊大小 shadowOffsetX: 0, // 阴影水平偏移 shadowColor: 'rgba(0, 0, 0, 0.5)' // 阴影颜色 }, label: { show: true, fontSize: '20', fontWeight: 'bold' } } } ]

4.2 点击事件

// 初始化图表 var myChart = echarts.init(document.getElementById('main')); // 设置配置项 myChart.setOption(option); // 点击事件处理 myChart.on('click', function(params) { console.log(params); // 打印参数信息 alert(`您点击了: ${params.name}n数值: ${params.value}n占比: ${params.percent}%`); // 可以在这里添加其他交互逻辑，比如跳转页面、更新数据等 });

4.3 图例交互

legend: { // ...其他配置 selectedMode: 'multiple', // 图例选择的模式，可以是布尔值或'single'、'multiple' // 默认选中状态 selected: { '搜索引擎': true, '直接访问': true, '邮件营销': false, '联盟广告': true, '视频广告': false } }

4.4 动画效果

series: [ { // ...其他配置 animationType: 'scale', // 初始动画效果，'expansion'（扩展）或'scale'（缩放） animationEasing: 'elasticOut', // 初始动画的缓动效果 animationDelay: function (idx) { return Math.random() * 200; // 每个数据项的动画延迟 } } ] // 全局动画配置 animation: true, // 是否开启动画 animationThreshold: 2000, // 动画阈值，单种图形元素数量大于这个阈值时会关闭动画 animationDuration: 1000, // 初始动画时长 animationEasing: 'cubicOut', // 初始动画的缓动效果 animationDelay: function (idx) { return idx * 100; // 每个数据项的动画延迟 }

5. 圆环图高级应用

5.1 多层圆环图

多层圆环图可以用来展示多级分类数据，例如按年份和季度展示数据。

option = { tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' }, legend: { data: ['2021-Q1', '2021-Q2', '2021-Q3', '2021-Q4', '2022-Q1', '2022-Q2', '2022-Q3', '2022-Q4'] }, series: [ { name: '2021年', type: 'pie', selectedMode: 'single', radius: [0, '30%'], label: { position: 'inner', fontSize: 14, }, labelLine: { show: false }, data: [ { value: 1548, name: '2021-Q1' }, { value: 735, name: '2021-Q2' }, { value: 580, name: '2021-Q3' }, { value: 484, name: '2021-Q4' } ] }, { name: '2022年', type: 'pie', radius: ['45%', '60%'], labelLine: { length: 30 }, label: { formatter: '{a|{a}}{abg|}n{hr|}n {b|{b}：}{c} {per|{d}%} ', backgroundColor: '#F6F8FC', borderColor: '#8C8D8E', borderWidth: 1, borderRadius: 4, rich: { a: { color: '#6E7079', lineHeight: 22, align: 'center' }, hr: { borderColor: '#8C8D8E', width: '100%', borderWidth: 1, height: 0 }, b: { color: '#4C5058', fontSize: 14, fontWeight: 'bold', lineHeight: 33 }, per: { color: '#fff', backgroundColor: '#4C5058', padding: [3, 4], borderRadius: 4 } } }, data: [ { value: 1048, name: '2022-Q1' }, { value: 735, name: '2022-Q2' }, { value: 580, name: '2022-Q3' }, { value: 484, name: '2022-Q4' } ] } ] };

5.2 南丁格尔玫瑰图

南丁格尔玫瑰图是一种特殊的圆环图，它的半径大小与数据值成正比，而不仅仅是角度。

option = { title: { text: '南丁格尔玫瑰图', left: 'center' }, tooltip: { trigger: 'item', formatter: '{a} <br/>{b} : {c} ({d}%)' }, legend: { left: 'center', top: 'bottom', data: ['rose1', 'rose2', 'rose3', 'rose4', 'rose5', 'rose6', 'rose7', 'rose8'] }, toolbox: { show: true, feature: { mark: {show: true}, dataView: {show: true, readOnly: false}, restore: {show: true}, saveAsImage: {show: true} } }, series: [ { name: '半径模式', type: 'pie', radius: ['20%', '70%'], center: ['25%', '50%'], roseType: 'radius', // 使用半径模式 itemStyle: { borderRadius: 5 }, label: { show: true }, emphasis: { label: { show: true } }, data: [ {value: 40, name: 'rose1'}, {value: 33, name: 'rose2'}, {value: 28, name: 'rose3'}, {value: 22, name: 'rose4'}, {value: 18, name: 'rose5'}, {value: 15, name: 'rose6'}, {value: 12, name: 'rose7'}, {value: 10, name: 'rose8'} ] }, { name: '面积模式', type: 'pie', radius: ['20%', '70%'], center: ['75%', '50%'], roseType: 'area', // 使用面积模式 itemStyle: { borderRadius: 5 }, data: [ {value: 40, name: 'rose1'}, {value: 33, name: 'rose2'}, {value: 28, name: 'rose3'}, {value: 22, name: 'rose4'}, {value: 18, name: 'rose5'}, {value: 15, name: 'rose6'}, {value: 12, name: 'rose7'}, {value: 10, name: 'rose8'} ] } ] };

5.3 圆环图与图表联动

实现多个图表之间的联动，例如点击圆环图的某个部分，其他图表会相应变化。

// 初始化图表 var pieChart = echarts.init(document.getElementById('pie')); var lineChart = echarts.init(document.getElementById('line')); // 设置圆环图配置 var pieOption = { // ...圆环图配置 }; pieChart.setOption(pieOption); // 设置折线图配置 var lineOption = { // ...折线图配置 }; lineChart.setOption(lineOption); // 圆环图点击事件 pieChart.on('click', function(params) { // 根据点击的数据项更新折线图数据 var newData = generateLineData(params.name); // 假设这是一个生成新数据的函数 // 更新折线图 lineChart.setOption({ series: [{ data: newData }] }); }); // 折线图点击事件 lineChart.on('click', function(params) { // 根据点击的数据点更新圆环图高亮 pieChart.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: params.dataIndex }); });

5.4 动态数据更新

实现圆环图数据的动态更新，例如定时刷新数据。

// 初始化图表 var myChart = echarts.init(document.getElementById('main')); // 初始数据 var data = [ {value: 1048, name: '搜索引擎'}, {value: 735, name: '直接访问'}, {value: 580, name: '邮件营销'}, {value: 484, name: '联盟广告'}, {value: 300, name: '视频广告'} ]; // 初始配置 var option = { // ...其他配置 series: [{ data: data }] }; // 设置配置项 myChart.setOption(option); // 定时更新数据 setInterval(function() { // 生成随机数据 data.forEach(function(item) { item.value = Math.round(Math.random() * 1000 + 500); }); // 更新图表 myChart.setOption({ series: [{ data: data }] }); }, 2000);

5.5 自定义动画效果

option = { // ...其他配置 series: [ { // ...其他配置 animationType: 'scale', // 初始动画效果 animationEasing: 'elasticOut', // 初始动画的缓动效果 animationDelay: function (idx) { return Math.random() * 200; // 每个数据项的动画延迟 } } ] }; // 自定义加载动画 myChart.showLoading({ text: '数据加载中...', color: '#c23531', textColor: '#fff', maskColor: 'rgba(0, 0, 0, 0.3)', zlevel: 0 }); // 模拟数据加载 setTimeout(function() { myChart.hideLoading(); myChart.setOption(option); }, 1500);

6. 实际案例分析

6.1 销售数据占比分析

假设我们需要展示一个公司不同产品线的销售占比情况，并在中心区域显示总销售额。

option = { title: { text: '2023年产品线销售占比', left: 'center', top: 20, textStyle: { fontSize: 18, fontWeight: 'bold' } }, tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c}万元 ({d}%)' }, legend: { orient: 'vertical', left: 'left', data: ['手机', '电脑', '平板', '耳机', '配件'] }, color: ['#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C'], series: [ { name: '销售额', type: 'pie', radius: ['40%', '70%'], avoidLabelOverlap: false, itemStyle: { borderRadius: 10, borderColor: '#fff', borderWidth: 2 }, label: { show: true, formatter: '{b}: {d}%', position: 'outside' }, emphasis: { label: { show: true, fontSize: '16', fontWeight: 'bold' } }, labelLine: { show: true }, data: [ { value: 3350, name: '手机' }, { value: 2340, name: '电脑' }, { value: 1580, name: '平板' }, { value: 1250, name: '耳机' }, { value: 980, name: '配件' } ] } ], // 中心区域显示总销售额 graphic: [ { type: 'text', left: 'center', top: 'center', style: { text: '总销售额', fontSize: 16, fontWeight: 'bold', fill: '#333' } }, { type: 'text', left: 'center', top: 'center', style: { text: '9500万元', fontSize: 24, fontWeight: 'bold', fill: '#37A2DA', y: 25 } } ] };

6.2 项目进度展示

使用圆环图展示项目的完成进度，并在中心区域显示进度百分比。

option = { title: { text: '项目完成进度', left: 'center', top: 20, textStyle: { fontSize: 18, fontWeight: 'bold' } }, series: [ { name: '进度', type: 'pie', radius: ['60%', '70%'], avoidLabelOverlap: false, itemStyle: { borderRadius: 10, borderColor: '#fff', borderWidth: 2 }, label: { show: false, position: 'center' }, emphasis: { label: { show: false } }, labelLine: { show: false }, data: [ { value: 75, name: '已完成', itemStyle: { color: '#67E0E3' } }, { value: 25, name: '未完成', itemStyle: { color: '#E6E6E6' } } ] } ], // 中心区域显示进度百分比 graphic: [ { type: 'text', left: 'center', top: 'center', style: { text: '75%', fontSize: 36, fontWeight: 'bold', fill: '#67E0E3' } }, { type: 'text', left: 'center', top: 'center', style: { text: '已完成', fontSize: 14, fill: '#666', y: 30 } } ] };

6.3 多维度数据分析

使用多层圆环图展示不同维度的数据分析，例如按地区和产品类型分析销售数据。

option = { title: { text: '多维度销售数据分析', left: 'center', top: 20, textStyle: { fontSize: 18, fontWeight: 'bold' } }, tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c}万元 ({d}%)' }, legend: { orient: 'vertical', left: 'left', top: 'middle', data: ['华北', '华东', '华南', '西部', '手机', '电脑', '平板', '配件'] }, color: ['#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#FF9F7F', '#FB7293', '#E062AE'], series: [ { name: '地区', type: 'pie', selectedMode: 'single', radius: [0, '30%'], label: { position: 'inner', fontSize: 14, }, labelLine: { show: false }, data: [ { value: 3350, name: '华北' }, { value: 3100, name: '华东' }, { value: 2340, name: '华南' }, { value: 1350, name: '西部' } ] }, { name: '产品类型', type: 'pie', radius: ['45%', '60%'], labelLine: { length: 30 }, label: { formatter: '{a|{a}}{abg|}n{hr|}n {b|{b}：}{c}万元 {per|{d}%} ', backgroundColor: '#F6F8FC', borderColor: '#8C8D8E', borderWidth: 1, borderRadius: 4, rich: { a: { color: '#6E7079', lineHeight: 22, align: 'center' }, hr: { borderColor: '#8C8D8E', width: '100%', borderWidth: 1, height: 0 }, b: { color: '#4C5058', fontSize: 14, fontWeight: 'bold', lineHeight: 33 }, per: { color: '#fff', backgroundColor: '#4C5058', padding: [3, 4], borderRadius: 4 } } }, data: [ { value: 3350, name: '手机' }, { value: 2340, name: '电脑' }, { value: 1580, name: '平板' }, { value: 1350, name: '配件' } ] } ] };

7. 性能优化建议

7.1 数据量优化

当圆环图需要展示大量数据时，可能会影响性能。以下是一些优化建议：

// 1. 数据聚合：将小数据项合并为"其他"类别 function aggregateData(data, threshold) { var result = []; var otherValue = 0; data.forEach(function(item) { if (item.value < threshold) { otherValue += item.value; } else { result.push(item); } }); if (otherValue > 0) { result.push({ name: '其他', value: otherValue }); } return result; } // 使用示例 var rawData = [ {value: 1048, name: '搜索引擎'}, {value: 735, name: '直接访问'}, {value: 580, name: '邮件营销'}, {value: 484, name: '联盟广告'}, {value: 300, name: '视频广告'}, {value: 200, name: '社交媒体'}, {value: 150, name: '论坛'}, {value: 100, name: '博客'}, {value: 80, name: '新闻网站'}, {value: 50, name: '其他网站'} ]; var aggregatedData = aggregateData(rawData, 200); // 2. 关闭动画效果 option = { animation: false, // ...其他配置 series: [{ // ...系列配置 data: aggregatedData }] }; // 3. 简化标签和引导线 option = { // ...其他配置 series: [{ // ...系列配置 label: { show: false // 关闭标签 }, labelLine: { show: false // 关闭引导线 } }] };

7.2 渲染优化

// 1. 使用Canvas渲染而非SVG（默认就是Canvas） var myChart = echarts.init(document.getElementById('main'), null, { renderer: 'canvas' // 'canvas' 或 'svg' }); // 2. 延迟渲染 function renderChart() { var myChart = echarts.init(document.getElementById('main')); myChart.setOption(option); } // 页面加载完成后延迟渲染 window.addEventListener('load', function() { setTimeout(renderChart, 100); }); // 3. 按需渲染，在图表不可见时不渲染 var myChart = null; var chartVisible = false; function initChart() { if (!myChart) { myChart = echarts.init(document.getElementById('main')); myChart.setOption(option); } } function handleVisibilityChange() { if (document.hidden) { // 页面不可见，可以销毁图表释放资源 if (myChart) { myChart.dispose(); myChart = null; } } else { // 页面可见，重新初始化图表 initChart(); } } document.addEventListener('visibilitychange', handleVisibilityChange);

7.3 内存优化

// 1. 及时销毁不再使用的图表实例 function destroyChart(chartInstance) { if (chartInstance) { chartInstance.dispose(); chartInstance = null; } } // 2. 使用事件委托处理多个图表的事件 document.getElementById('chartContainer').addEventListener('click', function(e) { var target = e.target; var chartDom = target.closest('.chart'); if (chartDom) { var chartInstance = echarts.getInstanceByDom(chartDom); if (chartInstance) { // 处理图表点击事件 console.log('Chart clicked'); } } }); // 3. 避免频繁更新数据，使用防抖函数 function debounce(func, wait) { var timeout; return function() { var context = this; var args = arguments; clearTimeout(timeout); timeout = setTimeout(function() { func.apply(context, args); }, wait); }; } // 使用防抖函数处理窗口大小变化 window.addEventListener('resize', debounce(function() { if (myChart) { myChart.resize(); } }, 300));

8. 常见问题解决

8.1 圆环图不显示

问题：圆环图不显示，只显示一个空白区域。

解决方案：

检查DOM元素是否存在

var chartDom = document.getElementById('main'); if (!chartDom) { console.error('DOM元素不存在'); return; }

检查DOM元素是否有宽高

// 确保DOM元素有明确的宽高 var chartDom = document.getElementById('main'); chartDom.style.width = '600px'; chartDom.style.height = '400px';

检查数据格式是否正确

// 确保数据格式正确 var data = [ {value: 1048, name: '搜索引擎'}, {value: 735, name: '直接访问'} // 确保每个数据项都有value和name属性 ];

检查是否正确调用setOption方法

var myChart = echarts.init(chartDom); myChart.setOption(option); // 确保调用了这个方法

8.2 圆环图显示为饼图

问题：配置了圆环图，但显示为实心饼图。

解决方案：

检查radius配置是否正确：

series: [{ type: 'pie', // 圆环图需要设置内半径和外半径，形成环状 radius: ['40%', '70%'], // 内半径40%，外半径70% data: data }]

8.3 标签重叠

问题：圆环图的标签重叠在一起，影响阅读。

解决方案：

使用avoidLabelOverlap属性

series: [{ type: 'pie', avoidLabelOverlap: true, // 防止标签重叠 label: { show: true, position: 'outside' }, data: data }]

调整标签位置

series: [{ type: 'pie', label: { show: true, position: 'outside', // 可以尝试'inside'或'center' alignTo: 'edge', // 标签对齐方式，可以是'labelLine'、'edge'或None minShowLabelAngle: 0 // 小于这个角度（0-360）的扇区不显示标签 }, data: data }]

自定义标签位置

series: [{ type: 'pie', label: { show: true, position: function(params) { // 根据角度计算标签位置 var angle = params.startAngle + (params.endAngle - params.startAngle) / 2; if (angle > 90 && angle < 270) { return 'left'; } else { return 'right'; } }, distance: 20 // 标签距离图形的距离 }, data: data }]

8.4 图表不自适应容器大小

问题：当容器大小变化时，图表不自适应调整大小。

解决方案：

监听窗口大小变化事件

window.addEventListener('resize', function() { myChart.resize(); });

使用防抖函数优化性能

function debounce(func, wait) { var timeout; return function() { var context = this; var args = arguments; clearTimeout(timeout); timeout = setTimeout(function() { func.apply(context, args); }, wait); }; } window.addEventListener('resize', debounce(function() { myChart.resize(); }, 300));

监听容器大小变化（使用ResizeObserver）

if (typeof ResizeObserver !== 'undefined') { var resizeObserver = new ResizeObserver(function(entries) { for (var entry of entries) { if (entry.target === chartDom) { myChart.resize(); } } }); resizeObserver.observe(chartDom); }

8.5 数据更新后图表不刷新

问题：数据更新后，图表没有相应更新。

解决方案：

确保使用setOption方法更新数据

// 错误方式：直接修改option中的数据 option.series[0].data = newData; // 正确方式：使用setOption方法 myChart.setOption({ series: [{ data: newData }] });

使用notMerge参数

// 如果需要完全替换配置，而不是合并 myChart.setOption(newOption, true); // 第二个参数为true表示不合并

确保数据格式正确

// 确保新数据格式与原数据格式一致 var newData = [ {value: 1048, name: '搜索引擎'}, {value: 735, name: '直接访问'} // 确保每个数据项都有value和name属性 ];

8.6 移动端适配问题

问题：圆环图在移动端显示效果不佳。

解决方案：

根据屏幕大小调整图表配置

function isMobile() { return window.innerWidth <= 768; } function getChartOption() { var baseOption = { // 基础配置 }; if (isMobile()) { // 移动端适配 baseOption.legend = { orient: 'horizontal', // 图例横向排列 bottom: 10, // 图例位置 itemWidth: 10, // 图例标记宽度 itemHeight: 10, // 图例标记高度 textStyle: { fontSize: 10 // 图例文字大小 } }; baseOption.series = [{ // 减小圆环大小，适应小屏幕 radius: ['30%', '50%'], // 简化标签显示 label: { fontSize: 10 } }]; } return baseOption; } // 初始化图表 var myChart = echarts.init(document.getElementById('main')); myChart.setOption(getChartOption()); // 响应屏幕大小变化 window.addEventListener('resize', debounce(function() { myChart.setOption(getChartOption()); myChart.resize(); }, 300));

使用响应式布局

<div class="chart-container" style="width: 100%; height: 0; padding-bottom: 75%; position: relative;"> <div id="main" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></div> </div>

.chart-container { max-width: 600px; margin: 0 auto; }

9. 总结与展望

ECharts圆环图作为一种直观、美观的数据可视化方式，在各类报表和数据分析场景中得到了广泛应用。通过本文的详细介绍，我们从基础配置到高级应用，全面了解了ECharts圆环图的使用方法和技巧。

9.1 关键要点回顾

基础配置：掌握了圆环图的基本配置方法，包括环境准备、基础配置项的使用等。
样式美化：学习了如何通过颜色配置、标签美化、中心内容设置等方式提升圆环图的视觉效果。
交互功能：了解了高亮效果、点击事件、图例交互等交互功能的实现方法。
高级应用：掌握了多层圆环图、南丁格尔玫瑰图、图表联动、动态数据更新等高级应用技巧。
性能优化：学习了如何通过数据量优化、渲染优化、内存优化等方式提升圆环图的性能。
问题解决：了解了常见问题的解决方法，能够快速定位和解决问题。

9.2 最佳实践建议

数据设计：在设计圆环图时，确保数据分类清晰，避免过多的小数据项，必要时进行数据聚合。
颜色选择：选择对比度适中、视觉舒适的颜色方案，避免使用过于刺眼或难以区分的颜色。
标签处理：合理设置标签位置和样式，避免标签重叠，确保信息的清晰传达。
交互设计：添加适当的交互效果，如高亮、点击事件等，提升用户体验。
响应式设计：考虑不同设备和屏幕尺寸，确保圆环图在各种环境下都能良好显示。
性能考虑：对于大数据量的情况，采取适当的优化措施，确保图表的流畅性和响应速度。

9.3 未来发展趋势

随着数据可视化技术的不断发展，ECharts圆环图也在不断演进，未来可能的发展趋势包括：

更丰富的动画效果：更加自然、流畅的动画效果，提升视觉体验。
更强的交互能力：更丰富的交互方式，如手势操作、语音控制等。
更智能的数据处理：自动数据聚合、异常检测等智能化功能。
更好的跨平台支持：在更多平台和环境中的一致性体验。
更优的性能表现：更高效的渲染算法和内存管理，支持更大规模的数据可视化。

通过不断学习和实践，我们可以更好地掌握ECharts圆环图的使用技巧，打造出更加精美、专业的数据可视化效果，提升报表的专业度和用户体验。希望本文能够对读者在实际工作中使用ECharts圆环图有所帮助。