ECharts 实例2

之前做过一个 ECharts 例子;再做一个看一下;

<!DOCTYPE html>
<html>
<head>
    <meta charset="gb2312">
    <title> 多bar 实例</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>

    <div id="jinbars" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        
        var myChart = echarts.init(document.getElementById('jinbars'));
 
        var option = {
            legend: {},
            tooltip: {},
            dataset: {
                source: [
                    ['product', '2050', '2051', '2052'],
                    ['金条', 50, 60, 70],
                    ['金砖', 50, 99, 55],
                    ['金元宝', 60, 95, 40],
                    ['银条', 80, 123, 79]
                ]
            },
            // 默认情况类目轴对应到 dataset 第一列
            xAxis: {type: 'category'},
            // Y 轴,数值轴
            yAxis: {},
            // 声明多个 bar ,默认自动对应到 dataset 的每一列;
            series: [
                {type: 'bar'},
                {type: 'bar'},
                {type: 'bar'}
            ]
        };
 
        myChart.setOption(option);
    </script>
</body>
</html>

图表是包含在series里面;之前的例子 series 里面包含一个图表,此例子在series里包含三个图表;并且为了提供数据,使用了dataset属性;

显示如下;


tooltip属性提供了鼠标移上去的提示;

legend 是顶部的三个;可以选中一个、多个、全部;

 

如果全部不选就是空的;

 

前面提过type属性是图表类型,上面的是bar;

换一个类型,比如pictorialBar看一下;显示如下;看上去不是需要的;

 

多数的时候还是在series里只有一个图表; 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【每日一题】2216.美化数组的最少删除数-2023.11.21

题目&#xff1a; 2216. 美化数组的最少删除数 给你一个下标从 0 开始的整数数组 nums &#xff0c;如果满足下述条件&#xff0c;则认为数组 nums 是一个 美丽数组 &#xff1a; nums.length 为偶数对所有满足 i % 2 0 的下标 i &#xff0c;nums[i] ! nums[i 1] 均成立 …

【网络安全】-网络安全的分类详解

文章目录 介绍1. 网络层安全&#xff08;Network Layer Security&#xff09;理论实操使用VPN保护隐私 2. 应用层安全&#xff08;Application Layer Security&#xff09;理论实操使用密码管理器 3. 端点安全&#xff08;Endpoint Security&#xff09;理论实操定期更新防病毒…

使用iframe 发现样式错位的解决办法

原理就是默认隐藏 点击的时候&#xff08;或者需要的时候&#xff09;展示出来 方法二 宽高为0

【学习记录】从0开始的Linux学习之旅——编译linux内核

一、学习背景 从接触嵌入式至今&#xff0c;除了安装过双系统接触了一丢丢linux外&#xff0c;linux在我眼中向来是个传说。而如今得到了一块树莓派&#xff0c;于是决心把linux搞起来。 二、概念学习 Linux操作系统通常是基于Linux内核&#xff0c;并结合GNU项目中的工具和应…

13 redis中的复制的拓扑结构

1、一主一从 为了性能考虑&#xff0c;主节点可以不开启AOF&#xff0c;但是要避免重启。 2、一主多从 适用于读操作的场景。由于从节点多&#xff0c;所以主的复制压力大 3、树状主从 数据先同步到redisB,redisC从节点C,E来看&#xff0c;redisB相当于主机了&#xff0c;可以…

【算法】二分查找-20231122

这里写目录标题 一、1089. 复写零二、917. 仅仅反转字母三、88. 合并两个有序数组四、283. 移动零 一、1089. 复写零 提示 简单 266 相关企业 给你一个长度固定的整数数组 arr &#xff0c;请你将该数组中出现的每个零都复写一遍&#xff0c;并将其余的元素向右平移。 注意&a…

使用MONAI轻松加载医学公开数据集,包括医学分割十项全能挑战数据集和MedMNIST分类数据集

在深度学习中&#xff0c;使用公开数据集具有以下优点&#xff1a; 提供了一个标准化的基准来比较不同算法或模型的性能&#xff0c;因为这些公共数据集被广泛使用&#xff0c;许多研究人员都使用它们来评估他们的方法。可以节省大量的时间和金钱&#xff0c;因为这些数据集已…

机器视觉系统选型-环形光源分类及应用场景

环形光源主要分为&#xff1f; 1.环形光源(高角度) 照射光线与水平方向成高角度夹角 外观缺陷检测字符识别PCB基板检测二维码读取- 2.环形光源(低角度) 照射光线与水平方向成低角度夹角各种边缘提取字符识别玻璃断面的损伤检测金属表面刻印、损伤 3.环形光源(高亮) 高亮度远…

C练习题_15

一、单项选择题(本大题共20小题&#xff0c;每小题2分&#xff0c;共40分。在每小题给出的四个备选项中&#xff0c;选出一个正确的答案,并将所选项前的字母填写在答题纸的相应位置上。) 在下列说法中&#xff0c;&#xff08;&#xff09;是正确的。 A.C程序从第一个函数开始…

gitBash中如何使用Linux中的tree命令

文章目录 在gitBash中安装tree的目的如何安装安装完成,就可以直接完美适配Linux系统了在gitBash中安装tree的目的 如下图,powershell虽然可以看做是window下的Linux系统,但是根本就不适配很多Linux中的命令 如何安装 tree.exe安装网址 下载 tree 命令的 二进制包,安装 tr…

前端--vscode常用插件

一、实时预览效果live server 安装插件后&#xff0c;需要搜索“auto save”&#xff0c;设置“files:auto save”为“afterDelay” 和 1000 二、显示缩进indent-rainbow 三、以不同颜色区分括号bracket pair colorizer 四、格式化代码form 步骤&#xff1a;在设置中搜索“…

基于 Eureka 的 Ribbon 负载均衡实现原理【SpringCloud 源码分析】

目录 一、前言 二、源码分析 三、负载均衡策略 一、前言 如下图&#xff0c;我们在 orderserver 中通过 restTemplate 向 usersever 发起 http 请求&#xff0c;在服务拉取的时候&#xff0c;主机名 localhost 是用服务名 userserver 代替的&#xff0c;那么该 url 是一个可…

Leetcode刷题之有效的括号(C语言版)

Leetcode刷题之有效的括号&#xff08;C语言版&#xff09; 一、题目描述二、题目测试用例三、题目分析四、完整代码 一、题目描述 20、有效的括号 给定一个只包括 (&#xff0c;)&#xff0c;{&#xff0c;}&#xff0c;[&#xff0c;] 的字符串 s &#xff0c;判断字符串是…

k8s无法删除pv,pvc问题

问题&#xff1a; 在k8s里面创建了pv&#xff0c;pvc删除时报错&#xff1a;error: resource(s) were provided, but no name was specified 解决&#xff1a; 正确的删除顺序&#xff1a;1.先删除pod2.再删除pv 3.在删除pvc 删除pv&#xff0c;pvc命令&#xff1a; kubect…

《QT从基础到进阶·三十六》QWidget实现收缩栏的效果

功能&#xff1a; 1、可以在收缩栏插件中添加界面 2、可以把界面展开或收缩 3、可以用鼠标拖动界面改变界面的排放顺序 源码放在最下方 1、可以在收缩栏插件中添加界面 virtual void addWidget(QWidget* widget, const QString& label, const QIcon& icon QIcon())…

error: ‘ui/ui_uimainwindow.h‘ file not found

问题&#xff1a;在刚好创建的Qt Designer Form Class类中&#xff0c;发现类的.cpp文件中有ui头文件未找到 原因&#xff1a;.ui文件没有被识别到&#xff0c;或者.ui文件不存在&#xff0c;导致ui头文件未创建而报错。 解决&#xff1a;若修改了.ui文件&#xff0c;随手ctrls…

汇编-MOVSXD64位带符号扩展传送

允许源操作数为32位的寄存器或内存操作数 ExitProcess PROTO .code main PROCmov ebx, 0FFFFFFFFh movsxd rax, ebx ;RAX FFFFFFFFFFFFFFFFhmov ebx, 01FFFFFFFh movsxd rdx, ebx ;RDX 000000001FFFFFFFhmov ecx,0 ;结束程序call ExitProcess main ENDP E…

TS类型全解

使用TypeScript开发的程序更安全&#xff0c;常见的错误都能检查出来。TS能让程序员事半功倍。而原因在于TS的“类型安全”&#xff08;借助类型避免程序做无效的事情&#xff09;。 图 运行程序的过程 但是TS不会直接编译成字节码&#xff0c;而是编译成JavaScript代码。TS编…

智能座舱架构与芯片- (8) 视觉篇

一、概述 相比起用于ADAS感知系统的摄像头&#xff0c;用于智能座舱内部的摄像头&#xff0c;其功能特性和性能要求相对简单。例如&#xff0c;OMS乘客监控摄像头&#xff0c;一般达到5MP即可有良好的效果。同时&#xff0c;OMS也可应用于车内会议系统&#xff0c;还应用于车内…

如何将Docker的构建时间减少40%

与许多公司类似&#xff0c;我们为产品中使用的所有组件构建docker映像。随着时间的推移&#xff0c;其中一些映像变得越来越大&#xff0c;我们的CI构建花费的时间也越来越长。我的目标是CI构建不超过5分钟——差不多是喝杯咖啡休息的理想时间。如果构建花费的时间超过这个时间…