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里只有一个图表; 

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

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

相关文章

VMware三种网络模式

桥接模式 NAT(网络地址转换模式) Host-Only(仅主机模式) 参考&#xff1a; vmware虚拟机三种网络模式 - 知乎 (zhihu.com)

【大数据Hive】hive 优化策略之job任务优化

目录 一、前言 二、hive执行计划 2.1 hive explain简介 2.1.1 语法格式 2.1.2 查询计划阶段说明 2.2 操作演示 2.2.1 不加条件的查询计划分析 2.2.2 带条件的查询计划分析 三、MapReduce属性优化 3.1 本地模式 3.1.1 本地模式参数设置 3.1.2 本地模式操作演示 3.2 …

Elasticsearch 和 LangChain 合作开发可用于生产的 RAG 模板

作者&#xff1a;Aditya Tripathi 在过去的几个月里&#xff0c;我们一直与 LangChain 团队密切合作&#xff0c;他们在推出 LangServe 和 LangChain 模板方面取得了进展&#xff01; LangChain Templates 是一组用于构建生产质量的生成式 AI 应用程序的参考架构。 你可以在此处…

Flutter笔记:Matrix4矩阵变换与案例

Flutter笔记 Matrix4矩阵变换及其案例 作者&#xff1a;李俊才 &#xff08;jcLee95&#xff09;&#xff1a;https://blog.csdn.net/qq_28550263 邮箱 &#xff1a;291148484163.com 本文地址&#xff1a;https://blog.csdn.net/qq_28550263/article/details/134474764 【简介…

强化学习--多维动作状态空间的设计

目录 一、离散动作二、连续动作1、例子12、知乎给出的示例2、github里面的代码 免责声明&#xff1a;以下代码部分来自网络&#xff0c;部分来自ChatGPT&#xff0c;部分来自个人的理解。如有其他观点&#xff0c;欢迎讨论&#xff01; 一、离散动作 注意&#xff1a;本文均以…

【Docker】Docker安装Nginx配置静态资源

1.下载镜像 2.创建nginx配置文件 3.创建nginx容器运行 4.配置nginx静态资源 1.下载镜像 Dockerhub官网&#xff1a;Docker docker pull nginx docker pull nginx下载最新版本 默认latest 下载指定版本docker pull nginx:xxx 2.创建nginx配置文件 启动容器之前要创建nginx…

【云原生】初识 Service Mesh

目录 一、什么是Service Mesh 二、微服务发展历程 2.1 微服务架构演进历史 2.1.1 单体架构 2.1.2 SOA阶段 2.1.3 微服务阶段 2.2 微服务治理中的问题 2.2.1 技术栈庞杂 2.2.2 版本升级碎片化 2.2.3 侵入性强 2.2.4 中间件多&#xff0c;学习成本高 2.2.5 服务治理功…

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

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

selenium判断元素是否存在的方法

文章目录 快捷方法完整示例程序 快捷方法 selenium没有exist_xxx相关的方法&#xff0c;无法直接判断元素存在。但是锁定元素时使用的browser.find_elements(By.CSS_SELECTOR, "css元素")会返回一个列表list&#xff0c;如果不存在这个元素就会返回一个空列表。因此…

【办公常识】写好的代码如何上传?使用svn commit

首先找到对应的目录 找到文件之后点击SVN Commit

ModernCSS.dev - 来自微软前端工程师的 CSS 高级教程,讲解如何用新的 CSS 语法来解决旧的问题

今天给大家安利一套现代 CSS 的教程&#xff0c;以前写网页的问题&#xff0c;现在都可以用新的写法来解决了。 ModernCSS.dev 是一个现代 CSS 语法的教程&#xff0c;讲解新的 CSS 语法如何解决一些传统问题&#xff0c;一共有30多课。 这套教程的作者是 Stephanie Eckles&am…

git clone慢的解决办法

在网站 https://www.ipaddress.com/ 分别搜索&#xff1a; github.global.ssl.fastly.net github.com 得到ip&#xff1a; 打开hosts文件 sudo vim /etc/hosts 在hosts文件末尾添加 140.82.114.3 github.com 151.101.1.194 github.global-ssl.fastly.net 151.101.65.194 g…

汇编-间接寻址(处理数组)

直接寻址很少用于数组处理&#xff0c;因为用常数偏移量来寻址多个数组元素时&#xff0c;直接寻址并不实用。取而代之的是使用寄存器作为指针(称为间接寻址(indirect addressing) ) 并控制该寄存器的值。如果一个操作数使用的是间接寻址&#xff0c; 就称之为间接操作数(indie…

minio安装使用-linux

下载地址&#xff1a;MinIO | Code and downloads to create high performance object storage 选择 minio server 可以直接下载二进制文件。 将下载的文件传输到服务器的指定文件夹下&#xff0c;如 /opt/minio。 然后在&#xff0c;命令行启动minio&#xff1a; /opt/mini…

网工内推 | 合资公司网工,CCNP/HCIP认证优先,朝九晚六

01 中企网络通信技术有限公司 招聘岗位&#xff1a;网络工程师 职责描述&#xff1a; 1、按照工作流程和指引监控网络运行情况和客户连接状况&#xff1b; 2、确保各监控系统能正常运作&#xff1b; 3、快速响应各个网络告警事件&#xff1b; 4、判断出网络故障&#xff0c;按…

利用OpenCV实现图片中导线的识别

下面是一个需求&#xff0c;识别图片中的导线&#xff0c;要在图像中检测导线&#xff0c;我们需要采用不同于直线检测的方法。由于OpenCV没有直接的曲线检测函数&#xff0c;如同它对直线提供的HoughLines或HoughLinesP&#xff0c;检测曲线通常需要更多的图像处理步骤和算法&…

集成多元算法,打造高效字面文本相似度计算与匹配搜索解决方案,助力文本匹配冷启动[BM25、词向量、SimHash、Tfidf、SequenceMatcher]

搜索推荐系统专栏简介:搜索推荐全流程讲解(召回粗排精排重排混排)、系统架构、常见问题、算法项目实战总结、技术细节以及项目实战(含码源) 专栏详细介绍:搜索推荐系统专栏简介:搜索推荐全流程讲解(召回粗排精排重排混排)、系统架构、常见问题、算法项目实战总结、技术…

单体进化微服务:拆分、注册、调用、网关、过滤、治理、分布式事务

这里写目录标题 基本介绍生产-消费-网关父依赖生产者服务消费者服务网关服务common服务 感想 基本介绍 Spring Cloud 是一个用于构建分布式系统和微服务架构的开发工具包。它提供了一系列的功能和组件&#xff0c;用于解决微服务架构中的常见问题&#xff0c;如服务注册与发现…

Hadoop -hdfs的读写请求

1、HDFS写数据&#xff08;宏观&#xff09;&#xff1a; 1、首先&#xff0c;客户端发送一个写数据的请求&#xff0c;通过rpc与NN建立连接&#xff0c;NN会做一些简单的校验&#xff0c;文件是否存在&#xff0c;是否有空间存储数据等。 2、NN就会将校验的结果发送给客户端…

在win10上安装pytorch-gpu版本2

安装anaconda即下载了python&#xff0c;还可以创建虚拟环境。 目录 1.1 anaconda安装 1.2 pytorch-gpu安装 1.1 Anaconda安装 anaconda的安装请看我之前发的tensoflow-gpu安装&#xff0c;里面有详细的安装过程&#xff0c;这里不做重复描述&#xff0c;传送门 1.2 pyt…