在之前的文章中，我们学习了如何设置散点图、雷达图。想了解的朋友可以查看这篇文章。同时，希望我的文章能帮助到你，如果觉得我的文章写的不错，请留下你宝贵的点赞，谢谢
数据可视化-ECharts Html项目实战（5）-CSDN博客
https://blog.csdn.net/qq_49513817/article/details/136977084?spm=1001.2014.3001.5501今天的文章，会带着大家学习ECharts特殊图标中的漏斗图与仪表图，希望你能有所收获。
目录
一、知识回顾
二、漏斗图
三、仪表盘
拓展-提示框组件设置
一、知识回顾
首先散点图我们需要将type属性设置为scatter，并且取消图表中的step属性，就像这样：
而在我们的雷达图也是蜘蛛网图的时候，需要定义雷达图的指示器（indicator）数组，并且修改type为radar。
现在之前的知识回顾完了，开始今天的学习吧。
二、漏斗图
设置漏斗图只需要写一个简单的图表然后将type属性更改一下为funnel就行了，如同;
我们运行一下，看看效果：
可以看到，图表就像一个漏斗一样
<!DOCTYPE html>
<html>
<head> <meta charset="utf-8"> <title>ECharts 仪表盘示例</title> <!-- 引入 ECharts 文件 --> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/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')); // 指定图表的配置项和数据 var option = { tooltip: { trigger: 'item', formatter: '{b}: <br/>平均分: {c} 分' }, xAxis: { type: 'value', min: 0, axisLabel: { formatter: '{value} 分' } }, yAxis: { type: 'category', data: ['大数据搭建', '数据可视化', '数据结构', 'Python', 'Linux', 'Java'], axisLabel: { interval: 0 // 显示全部标签 }, inverse: true // 翻转y轴，使得最高分在最上面 }, series: [{ type: 'funnel', data: [90, 85, 80, 75, 70, 65], // 各科成绩平均分，自定数据 barWidth: '30%', itemStyle: { normal: { borderColor: 'rgba(0,0,0,0)', shadowColor: 'rgba(0, 0, 0, 0.5)', shadowBlur: 10 } }, showBackground: true, backgroundStyle: { color: 'rgba(220, 220, 220, 0.8)' }, label: { show: true, position: 'top', formatter: '{c}' } }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script>
</body>
</html>现在，快去试试吧
三、仪表盘
设置仪表盘我们需要设置仪表盘的半径，仪表盘的起始角度和结束角度，仪表盘的指针与刻度，将type更改为gauge，就如图中：
name: '业务指标', type: 'gauge', // 仪表盘的半径，数组的第一项是内半径，第二项是外半径 radius: '50%', // 仪表盘的起始角度和结束角度 startAngle: 90, endAngle: -270, // 仪表盘的指针 axisLine: { lineStyle: { width: 10 } }, // 仪表盘上的刻度 axisTick: { splitNumber: 10, length: 12, }, // 仪表盘上的指针 pointer: { width: 5 }, // 仪表盘上的数据 detail: { formatter: '{value}%', textStyle: { fontWeight: 'bolder' } }, data: [{value: 60, name: '完成率'}] 现在，将它写入一个完整的盒子中看看效果：
可以看到，一个仪表盘出现了，现在去试试吧。
<!DOCTYPE html>
<html>
<head> <meta charset="utf-8"> <title>ECharts 仪表盘示例</title> <!-- 引入 ECharts 文件 --> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
</head>
<body> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div id="main" style="width: 800px;height:600px;"></div> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { tooltip: { formatter: "{a} <br/>{b} : {c}%" }, toolbox: { feature: { restore: {}, saveAsImage: {} } }, series: [ { name: '业务指标', type: 'gauge', // 仪表盘的半径，数组的第一项是内半径，第二项是外半径 radius: '50%', // 仪表盘的起始角度和结束角度 startAngle: 90, endAngle: -270, // 仪表盘的指针 axisLine: { lineStyle: { width: 10 } }, // 仪表盘上的刻度 axisTick: { splitNumber: 10, length: 12, }, // 仪表盘上的指针 pointer: { width: 5}, // 仪表盘上的数据 detail: { formatter: '{value}%', textStyle: { fontWeight: 'bolder' } }, data: [{value: 60, name: '完成率'}] } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script>
</body>
</html>拓展-提示框组件设置
| 关键词 | 类型 | 描述 |
|---|---|---|
trigger | String | 触发类型。可选值包括：'item'（数据项图形触发，主要在散点图，柱状图等无类目轴的图表中使用），'axis'（坐标轴触发，主要在柱状图、折线图等会使用类目轴的图表中使用），'none'（不触发）。 |
triggerOn | String | 触发提示框的行为。可选值包括：'mousemove'（鼠标移动时触发），'click'（鼠标点击时触发），'none'（不触发）。 |
show | Boolean | 是否显示提示框组件，默认为 true。 |
showContent | Boolean | 是否显示提示框内容，默认为 true。 |
alwaysShowContent | Boolean | 是否总是显示提示框内容，而不只是当 trigger 为 'item' 且数据项图形被触发时才显示，默认为 false。 |
showBackground | Boolean | 是否显示提示框的背景，默认为 true。 |
backgroundColor | String | 提示框的背景颜色，默认为 rgba(0,0,0,0.8)。 |
borderRadius | Number | 提示框边框的圆角，单位为像素，默认为 4。 |
padding | Number/Array | 提示框的内边距，单位为像素，可以是单一数值或 [上, 右, 下, 左] 的数组形式，默认为 [5, 10]。 |
textStyle | Object | 提示框文本样式，包括 color（文字颜色）、fontStyle（字体风格）、fontWeight（字体粗细）、fontFamily（字体类型）、fontSize（字体大小）、lineHeight（行高）等属性。 |
formatter | String/Function | 提示框内容格式器，支持字符串模板和回调函数两种形式。字符串模板使用 {a}、{b}、{c} 等占位符来引用系列（series）的数据和名称、数据项（data）的值等。回调函数则可以根据参数自定义返回内容。 |
position | String/Function | 提示框的位置，可以是固定的字符串值（如 'top'、'left'、'right'、'bottom'、'inside' 等）或自定义的函数，用于计算提示框的位置。 |
offset | Number/Array | 提示框距离鼠标的位置。可以是单一数值或 [x, y] 的数组形式，单位为像素，默认为 [0, 0]。 |
enterable | Boolean | 鼠标是否可以进入提示框浮层中，默认为 false。 |
confine | Boolean | 是否将提示框限制在图表的区域内，默认为 true。 |
transitionDuration | Number | 提示框出现的过渡时间，单位为毫秒，默认为 0.4s。 |
transitionEasing | String | 提示框出现时的缓动函数，默认为 'cubicOut'。 |
zlevel | Number | 提示框的 z-level 值，控制图形绘制在 z 轴上的层级，默认为 0。 |
z | Number | 提示框的 z 值，同一层级下 z 值越大越会绘制在上层，默认为 2。 |
