数据可视化-ECharts Html项目实战（6）

Peng0426.

已于 2024-04-15 15:46:57 修改

阅读量1.9k

点赞数 45

分类专栏： ECharts实战基础文章标签：信息可视化 echarts 前端 html 数据可视化大数据数据分析

于 2024-03-24 23:42:55 首次发布

本文链接：https://blog.csdn.net/qq_49513817/article/details/136998085

版权

ECharts实战基础专栏收录该内容

14 篇文章 1 订阅

订阅专栏

在之前的文章中，我们学习了如何设置散点图、雷达图。想了解的朋友可以查看这篇文章。同时，希望我的文章能帮助到你，如果觉得我的文章写的不错，请留下你宝贵的点赞，谢谢
数据可视化-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`。