实操专区-第15周-课堂练习专区-漏斗图与金字塔图

实操专区-第15周-课堂练习专区-漏斗图

下载安装ECharts,完成如下样式图形。
代码和截图上传
基本要求:下图3选1,完成代码和截图
完成 3.1.3.16 漏斗图中的任务点
基本要求:2个选一个完成,多做1个加2分。
请用班级+学号+姓名命名。

参考代码:

<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<!-- 引入 ECharts 文件 -->
<script src = "js/echarts.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 = { //指定图表的配置项和数据
//使用预定义的颜色
color: ["red", 'green', 'blue', '#8CC7B5', '#32CD32', '#7CFC00', '#19CAAD', 'grey'],
title: {
text: '多漏斗图和多金字塔', left: 280, top: 'top'
},
tooltip: { trigger: 'item', formatter: "{a} <br/>{b}:{c}%" },
toolbox: {
left: 750, top: 12,
orient: 'vertical', top: 'center',
feature: { dataView: { readOnly: false }, restore: {}, saveAsImage: {} }
},
legend: {
orient: 'vertical', left: 'left',
left: 22, top: 12,
data: ['展现', '点击', '访问', '咨询', '订单']
},
calculable: true,
series: [
{
name: '漏斗图', type: 'funnel', width: '40%', height: '45%', left: '5%', top: '50%',
data: [
{ value: 60, name: '访问' }, { value: 30, name: '咨询' }, { value: 10, name: '订单' },
{ value: 80, name: '点击' }, { value: 100, name: '展现' }
]
},
{
name: '金字塔', type: 'funnel', width: '40%', height: '45%', left: '5%', top: '5%',
sort: 'ascending',
data: [
{ value: 45, name: '访问' }, { value: 15, name: '咨询' }, { value: 5, name: '订单' },
{ value: 65, name: '点击' }, { value: 100, name: '展现' }]
},
{
name: '漏斗图', type: 'funnel', width: '40%', height: '45%', left: '55%', top: '5%',
label: { normal: { position: 'left' } },
data: [
{ value: 60, name: '访问' }, { value: 30, name: '咨询' },
{ value: 10, name: '订单' }, { value: 80, name: '点击' },
{ value: 100, name: '展现' }]
},
{
name: '金字塔', type: 'funnel', width: '40%', height: '45%',
left: '55%', top: '50%', sort: 'ascending',
label: { normal: { position: 'left' } },
data: [
{ value: 45, name: '访问' }, { value: 15, name: '咨询' },
{ value: 5, name: '订单' }, { value: 65, name: '点击' },
{ value: 100, name: '展现' }]
}
]
};
//使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/18690.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

银行对公贷款软件业务流程详解

对公贷款业务是指商业银行向企事业单位提供资金支持&#xff0c;用于资本扩充、生产经营、项目建设等方面的融资。其目的在于支持企事业单位的发展&#xff0c;推动经济增长。通过提供资金支持&#xff0c;企事业单位可以获得必要的资金来扩大生产规模、提高生产能力、研发新产…

第8周 分布式事务与数据一致性主流解决方案落地

第8周 分布式事务与数据一致性主流解决方案落地 1. 最终一致性原理与解析2. 微服务的解耦3. 本地消息存储4. 自定义事务管理器5. 本地消息删除********************************************************************************** 本周拓展数据的一致性落地&#xff0c;采用弱…

【Java EE】网络原理——HTTP请求

目录 1.认识URL 2.认识“方法&#xff08;method&#xff09;” 2.1GET方法 2.1.1使用Fiddler观察GET请求 2.1.2 GET请求的特点 2.2 POST方法 2.2.1 使用FIddler观察POST方法 2.2.2 POST请求的特点 3.认识请求“报头”&#xff08;header&#xff09; 3.1 Host 3.2 C…

Spring MVC 工作流程源码分析

前言&#xff1a; 我们知道 Spring MVC 的核心是前端控制器 DispatcherServlet&#xff0c;客户端所有的请求都会交给 DispatcherServlet 来处理&#xff0c;本篇我我们来分析 Spring MVC 处理客户端请求的流程&#xff0c;也就是工作流程。 Sping MVC 只是储备传送门&#x…

Java整合EasyExcel实战——3(上下列相同合并单元格策略)

参考&#xff1a;https://juejin.cn/post/7322156759443095561?searchId202405262043517631094B7CCB463FDA06https://juejin.cn/post/7322156759443095561?searchId202405262043517631094B7CCB463FDA06 准备条件 依赖 <dependency><groupId>com.alibaba</gr…

邻接矩阵广度优先遍历

关于图的遍历实际上就两种 广度优先和深度优先&#xff0c;一般关于图的遍历都是基于邻接矩阵的&#xff0c;考试这些&#xff0c;用的也是邻接矩阵。 本篇文章先介绍广度优先遍历的原理&#xff0c;和代码实现 什么是图的广度优先遍历&#xff1f; 这其实和二叉树的层序遍…

新人学习笔记之(数组1)

一、数组的概念 1.数组&#xff08;Array&#xff09;可以把一组相关的数据一起存放&#xff0c;并提供方便的访问&#xff08;获取&#xff09;方式 2.数组是指一组数据的集合&#xff0c;其中的每个数据被称作元素&#xff0c;在数组中可以存放任意类型的元素&#xff0c;数组…

数据结构——二叉树的基本应用

在此之前我们已经初步了解了二叉树&#xff0c;在介绍堆的基本应用时&#xff0c;我们已经具体介绍了完全二叉树的基本应用&#xff0c;本章我们介绍二叉树的基本应用&#xff0c;这个不止指的是完全二叉树&#xff0c;而是指泛型的二叉树。 二叉树的基本应用&#xff0c;由于…

代码随想录算法训练营第54天|● 392.判断子序列 ● 115.不同的子序列

392. 判断子序列 这个微软面试的时候考过 双指针就行 编辑距离入门题&#xff1a; 思路是一样的 相同字符1 否则从前面顺下来 class Solution:def isSubsequence(self, s: str, t: str) -> bool:dp[[0]*(len(t)1) for _ in range(len(s)1)]for i in range(1,len(s)1):f…

aspose-*的使用

文章目录 aspose-*一、依赖--maven二、需求1、word------>pdf2、doc------>docx2、xls------>xlsx aspose-* 一、依赖–maven 备注&#xff1a;第三方的jar包可以从资源中下载&#xff0c;有上传的 <!--aspose依赖--><dependency><groupId>aspose…

刷代码随想录有感(81):贪心算法——分发饼干

题干&#xff1a; class Solution { public:int findContentChildren(vector<int>& g, vector<int>& s) {sort(g.begin(), g.end());sort(s.begin(), s.end());int index s.size() - 1;int res 0;for(int i g.size() - 1; i > 0; i--){if(index >…

GitLab项目中添加用户,并设置其角色权限等

注意&#xff1a;创建用户(new user)&#xff0c;创建完用户然后再项目邀请用户&#xff0c;选择创建过的用户 一、以管理员身份登录GitLab的WebUI并创建用户 1>.使用管理员登录GitLab 使用管理员(root)用户登录成功后&#xff0c;点击如下图所示的小扳手&#xff0c;点击…

java 反射的用法

下面是一个简单的Java反射示例&#xff0c;演示了如何使用反射机制获取类的信息并调用其方法&#xff1a; import java.lang.reflect.Method;class MyClass {private String name;public void setName(String name) {this.name name;}public String getName() {return name;}…

C++数据结构之:链List

摘要&#xff1a; it人员无论是使用哪种高级语言开发东东&#xff0c;想要更高效有层次的开发程序的话都躲不开三件套&#xff1a;数据结构&#xff0c;算法和设计模式。数据结构是相互之间存在一种或多种特定关系的数据元素的集合&#xff0c;即带“结构”的数据元素的集合&am…

在HTML和CSS当中运用显示隐藏

1.显示与隐藏 盒子显示:display:block;盒子隐藏: display:none:隐藏该元素并且该元素所占的空间也不存在了。 visibility:hidden:隐藏该元素但是该元素所占的内存空间还存在&#xff0c;即“隐身效果”。 2.圆角边框 在CSS2中添加圆角&#xff0c;我们不得不使用背景图像&am…

学习笔记——数据通信基础——数据通信网络(网络工程师)

网络工程师 网络工程&#xff0c;就是围绕着网络进行的一系列的活动&#xff0c;包括∶网络规划、设计、实施、调试、排错等。网络工程设计的知识领域很宽广&#xff0c;其中路由和交换是计算机网络的基本。 网络工程师∶是在网络工程领域&#xff0c;掌握专业的网络技术&…

散户如何参与期权交易?

期权就是股票&#xff0c;唯一区别标的物上证指数&#xff0c;会看大盘吧&#xff0c;期权交易两个方向认购做多&#xff0c;认沽做空&#xff0c;双向t0交易没了&#xff0c;期权交易跟期货一样&#xff0c;对的&#xff0c;玩的也是合约&#xff0c;唯一区别没有保证金不会爆…

军工行业运维解决方案

一、引言 随着军工行业的快速发展&#xff0c;信息化建设已成为提高作战效能、保障信息安全的重要支撑。然而&#xff0c;军工行业面临着多战区、跨区域、多阵地、多数据中心的复杂运维挑战。为了满足这些挑战&#xff0c;我们提出了一套基于美信时代的军工行业运维解决方案&am…

127.0.0.1 和 localhost 以及 0.0.0.0 区别

之前用 nginx 的时候&#xff0c;发现用这几个 IP&#xff0c;都能正常访问到 nginx 的欢迎网页。一度认为这几个 IP 都是一样的。 但本质上还是有些区别的。 首先 localhost 就不叫 IP&#xff0c;它是一个域名&#xff0c;就跟 "baidu.com",是一个形式的东西&…

什么是Redis脑裂,如何解决呢

Redis 脑裂问题是指&#xff0c;在 Redis 哨兵模式或集群模式中&#xff0c;由于网络原因&#xff0c;导致主节点&#xff08;Master&#xff09;与哨兵&#xff08;Sentinel&#xff09;和从节点&#xff08;Slave&#xff09;的通讯中断&#xff0c;此时哨兵就会误以为主节点…