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.mzph.cn/news/157341.shtml

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

相关文章

【JavaScript】2.4 JavaScript和浏览器

文章目录 DOM 操作选择元素修改元素创建和删除元素 事件处理监听事件阻止默认行为 异步编程回调函数Promiseasync/await 总结 JavaScript最初是为了在浏览器中使用而创建的&#xff0c;它是Web开发的重要组成部分。在这一章节中&#xff0c;我们将学习如何使用JavaScript与浏览…

Gitlab安装与操作

GitLab 是一个用于仓库管理系统的开源项目&#xff0c;使用Git作为代码管理工具&#xff0c;并在此基础上搭建起来的Web服务。 可通过Web界面进行访问公开的或者私人项目。它拥有与Github类似的功能&#xff0c;能够浏览源代码&#xff0c;管理缺陷和注释。可以管理团队对仓库的…

shell基础

一.Shell脚本编程概述 1.基本概念 将要执行的命令按顺序保存到一个文本文件&#xff1b; 给该文件可执行权限&#xff1b; 可结合各种Shell控制语句以完成更复杂的操作。 2.作用 Linux系统中的Shell是一个特殊的应用程序&#xff0c;它介于操作系统内核与用户之间&#x…

单链表——OJ题(一)

目录 ​一.前言 二.移除链表元素 三.返回链表中间节点 四.链表中倒数第K个节点 五.合并两个有序链表 六.反转链表 七.链表分割 八.链表的回文结构 九.相交链表 十.环形链表 十一.环形链表&#xff08;二&#xff09; ​六.结语 一.前言 本文主要对平时的链表OJ进行…

Day33力扣打卡

打卡记录 最大和查询&#xff08;排序单调栈上二分&#xff09; 链接 大佬的题解 class Solution:def maximumSumQueries(self, nums1: List[int], nums2: List[int], queries: List[List[int]]) -> List[int]:ans [-1] * len(queries)a sorted(((a, b) for a, b in zi…

JSon(基本介绍+基本语法+基本代码)

JSON&#xff08;JavaScript Object Notation&#xff09;是一种轻量级的数据交换格式&#xff0c;它易于人阅读和编写&#xff0c;也易于机器解析和生成。JSON 是一种基于文本的数据格式&#xff0c;独立于编程语言&#xff0c;但使用了类似于 JavaScript 对象定义的语法。 J…

机器学习第11天:降维

文章目录 机器学习专栏 主要思想 主流方法 1.投影 二维投射到一维 三维投射到二维 2.流形学习 一、PCA主成分分析 介绍 代码 二、三内核PCA 具体代码 三、LLE 结语 机器学习专栏 机器学习_Nowl的博客-CSDN博客 主要思想 介绍&#xff1a;当一个任务有很多特征…

如何在IAR软件中使用STLINK V2编译下载和调试stm8单片机

安装使用IAR后&#xff0c;如使用系统默认设置&#xff0c;往往很难正常实现用stlink v2来下载和调试stm8芯片&#xff0c;我的解决方法如下&#xff1a; 1、打开项目的options菜单&#xff1a; 2、在项目的选项菜单中选择ST-LINK作为调试工具&#xff1a; 3、选择额外的输出…

C++ DAY07 模板

简介 一种用于实现通用编程的机制。 通过使用模板&#xff0c;我们可以编写可复用的代码&#xff0c;可以适用于多种数据类型。 C 模板的语法使用角括号 (< >) 来表示泛型类型&#xff0c;并使用关键字 template 来定义和声明模板。 示例 #include <iostream> //…

IDEA JRebel安装使用教程

1、下载插件 版本列表&#xff1a;https://plugins.jetbrains.com/plugin/4441-jrebel-and-xrebel/versions 下载&#xff1a;JRebel and XRebel 2022.4.1 这里下载2022.4.1版本&#xff0c;因为后续新版本获取凭证会比较麻烦。下载完成会是一个压缩包。 2、安装 选择第一步…

使用VSCode+PlatformIO搭建ESP32开发环境

Arduino IDE本来就是为创客们开发的&#xff0c;虽然没代码提示功能&#xff0c;文件的关系也不清晰&#xff0c;函数不能跳转&#xff0c;头文件也打不开&#xff0c;但人家的初衷就是为了简单而生的&#xff1b;但还是有一些同学喜欢高级点的IDE&#xff0c;也没问题&#xf…

C语言经典好题:字符串左旋(详解)

这题还是比较简单的&#xff0c;各位看完有收获吗 #include<stdio.h> #include<string.h> void leftturn(char arr[],int k) {int len strlen(arr);for (int i 0;i <k;i)//左旋k个字符{//创建临时变量char tmp 0;tmp arr[0];//将数组第一个字符存储到临时变…

【C++进阶之路】第五篇:哈希

文章目录 一、unordered系列关联式容器1.unordered_map&#xff08;1&#xff09;unordered_map的介绍&#xff08;2&#xff09;unordered_map的接口说明 2. unordered_set3.性能对比 二、底层结构1.哈希概念2.哈希冲突3.哈希函数4.哈希冲突解决&#xff08;1&#xff09;闭散…

ArmSoM-RK3588编解码之mpp编码demo解析:mpi_enc_test

一. 简介 [RK3588从入门到精通] 专栏总目录mpi_enc_test 是rockchip官方编码 demo本篇文章进行mpi_enc_test 的代码解析&#xff0c;编码流程解析 二. 环境介绍 硬件环境&#xff1a; ArmSoM-W3 RK3588开发板 软件版本&#xff1a; OS&#xff1a;ArmSoM-W3 Debian11 三. …

【算法】二叉树的存储与遍历模板

二叉树的存储与遍历 const int N 1e6 10;// 二叉树的存储,l数组为左节点,r数组为右结点 int l[N], r[N]; // 存储节点的数据 char w[N]; // 节点的下标指针 int idx 0;// 先序创建 int pre_create(int n) {cin >> w[n];if (w[n] #) return -1;l[n] pre_create(idx)…

nginx配置参数详细解析

文章目录 一、第一级参数&#xff08;全局参数&#xff09;二、第二级参数events使用http使用 三、第三级参数log_format使用server使用error_log使用use使用&#xff08;配置事件驱动模型&#xff09; 四、第四级参数location使用 参考文档 一、第一级参数&#xff08;全局参数…

Python---变量的作用域

变量作用域&#xff1a;指的是变量的作用范围&#xff08;变量在哪里可用&#xff0c;在哪里不可用&#xff09;&#xff0c;主要分为两类&#xff1a;局部变量和全局变量。 定义在函数外部的变量就称之为全局变量&#xff1b; 定义在函数内部的变量就称之为局部变量。 # 定义…

nodejs+vue线上生活超市购物商城系统w2c42

超市管理系统的开发流程包括对超市管理系统的需求分析&#xff0c;软件的设计建模以及编写程序实现系统所需功能这三个阶段。对超市管理系统的需求分析。在这个阶段&#xff0c;通过查阅书籍&#xff0c;走访商场搜集相关资料&#xff0c;了解经营者对软件功能的具体所需和建议…

angular 实现模块共享

angular 实现共享模块 新建共享模块: ng g m material material.module.ts import {NgModule } from @angular/core; import {OverlayModule } from @angular/cdk/overlay; import {CdkTreeModule } f

QML Image、AnimatedImage 加载 Gif动图

文章目录 前言一、Image二、AnimatedImage1. cache false2. cache true&#xff08;默认为true&#xff09; 总结 前言 Image、AnimatedImage 加载 Gif动图&#xff0c;以及AnimatedImage加载Gif是否缓存会导致的问题 一、Image 使用Image加载Gif&#xff0c;显示的只是一张图…