echarts之简单的入门——【二】再增加一个柱状图和图例组件
echarts之简单的入门——【一】做个带时间轴的柱状统计图
现在需求说,我需要知道日答题总次数和活跃人数,那么我们如何在上面的图表中增加一个柱状图呢?
如果你看过简单入门中的配置项手册中series那么不用我说,你也知道如何修改,但是如果你没读过的话,想直接上手的话,你也可以查看官方实例中的代码,进行修改。
文档最好读一遍!
文档最好读一遍!
文档最好读一遍!
我们现在模拟没有读过文档,想直接上手做的思路。
查看实例
寻找带有多个统计的柱状图,比如这个降水量和蒸发量

进入后,找到代码,看到代码格式,是数组中有两个json数据

仿照此格式在自己的图表中进行添加
series: [
{
name: '月答题',
type: 'bar',
data: data.map(function (item) {
return item[1];//json数组中的第二位
}),
},
{
name: '月活跃',
type: 'bar',
data: data.map(function (item) {
return item[2]; //json数据中的第三位
}),
}
]
数据格式如下(为什么是这样的通过map读取很轻易的就可以推测出来)
[["2018-12-03",11,4],["2018-12-04",8,6],["2018-12-05",10,5],["2018-12-06",10,5]]
两个在一起我看不清,我想让他一个可以随意的显示隐藏,怎么办?
我还不想看文档,那就直接找例子呗~
不过你觉得这种方法高效呢?还是你读过文档之后写起来高效呢?
legend: {
data:['蒸发量','降水量']
},

将代码修改成自己的项目需要的然后加入图表
legend: {
data:['周答题','周活跃']
},
最终效果
默认显示

只查看日活跃

我还是比较推荐多看文档,然后实操的,这样子才能达到知其然并知其所以然
echarts之简单的入门——【二】再增加一个柱状图和图例组件的更多相关文章
- Python简单爬虫入门二
接着上一次爬虫我们继续研究BeautifulSoup Python简单爬虫入门一 上一次我们爬虫我们已经成功的爬下了网页的源代码,那么这一次我们将继续来写怎么抓去具体想要的元素 首先回顾以下我们Bea ...
- echarts之简单的入门——【一】做个带时间轴的柱状统计图
百度Echarts 官网首页 http://echarts.baidu.com/ 配置项手册 http://echarts.baidu.com/option.html#title GL配置项手册 h ...
- 四博智慧物联系统入门示例-1.增加一个DHT11温湿度传感器
1.准备工作 DOIT农业控制开发板或者esp32模组,并下载 四博智慧物联系统快速入门-2.准备工作 章节中的固件 DHT11连接在端口01 使用快速入门注册的管理账号和用户 2.配置网络 3.绑定 ...
- Python简单爬虫入门三
我们继续研究BeautifulSoup分类打印输出 Python简单爬虫入门一 Python简单爬虫入门二 前两部主要讲述我们如何用BeautifulSoup怎去抓取网页信息以及获取相应的图片标题等信 ...
- MongoDB最简单的入门教程之二 使用nodejs访问MongoDB
在前一篇教程 MongoDB最简单的入门教程之一 环境搭建 里,我们已经完成了MongoDB的环境搭建. 在localhost:27017的服务器上,在数据库admin下面创建了一个名为person的 ...
- echarts的简单应用之(二)饼图
接上一篇文章: echarts的简单应用之(一)柱形图:https://www.cnblogs.com/jylee/p/9359363.html 本篇文章讲述饼图,撇过折线图不说,是因为折线图与柱形图 ...
- GJM : Python简单爬虫入门(二) [转载]
感谢您的阅读.喜欢的.有用的就请大哥大嫂们高抬贵手"推荐一下"吧!你的精神支持是博主强大的写作动力以及转载收藏动力.欢迎转载! 版权声明:本文原创发表于 [请点击连接前往] ,未经 ...
- MongoDB最简单的入门教程之三 使用Java代码往MongoDB里插入数据
前两篇教程我们介绍了如何搭建MongoDB的本地环境: MongoDB最简单的入门教程之一 环境搭建 以及如何用nodejs读取MongoDB里的记录: MongoDB最简单的入门教程之二 使用nod ...
- 【原创】NIO框架入门(二):服务端基于MINA2的UDP双向通信Demo演示
前言 NIO框架的流行,使得开发大并发.高性能的互联网服务端成为可能.这其中最流行的无非就是MINA和Netty了,MINA目前的主要版本是MINA2.而Netty的主要版本是Netty3和Netty ...
随机推荐
- Asp.net中web.config配置文件详解(一)
本文摘自Asp.net中web.config配置文件详解 web.config是一个XML文件,用来储存Asp.NET Web应用程序的配置信息,包括数据库连接字符.身份安全验证等,可以出现在Asp. ...
- Linux_软件安装管理
开始学习rpm,yum等命令的使用,下面的地址可供你学习 大部分都大同小异! 感谢作者:https://segmentfault.com/a/1190000011200461
- 3.4《想成为黑客,不知道这些命令行可不行》(Learn Enough Command Line to Be Dangerous)——grepping(检索目标行命令)
grep是检查文件内容最强大的工具之一,这也许不能代表什么,但这不是重点.的确,grep常用作动词,比如'你完全应该检索(grep)那个文件'. grep最常用于在文件中搜索子字符串.例如,我们在第三 ...
- mysql利用binlog进行数据恢复
目录 mysql利用binlog进行数据恢复 binlog基本配置和格式 binlog基本配置 查看binlog状态 binlog的三种格式 转换成sql mysql自带的mysqlbinlog 利用 ...
- Spring Cloud 入门教程(十):和RabbitMQ的整合 -- 消息总线Spring Cloud Netflix Bus
在本教程第三讲Spring Cloud 入门教程(三): 配置自动刷新中,通过POST方式向客户端发送/refresh请求, 可以让客户端获取到配置的最新变化.但试想一下, 在分布式系统中,如果存在很 ...
- 将 C# 枚举序列化为 JSON 字符串 基础理论
该转换过程需要引用 Newtonsoft.JSON,这其中的转换过程还是蛮有意思的. 一.定义枚举 /// <summary> /// 托寄物品枚举 /// </summary> ...
- 懒人小工具:T4生成实体类Model,Insert,Select,Delete以及导出Excel的方法
由于最近公司在用webform开发ERP,用到大量重复机械的代码,之前写了篇文章,懒人小工具:自动生成Model,Insert,Select,Delete以及导出Excel的方法,但是有人觉得这种方法 ...
- HTTP Error 500.22 - Internal Server Error 错误解决方案
1. 首先进入IIS ,配置IIS 应用程序池的.Net Framework版本 2. 点击左侧应用程序池,再单机右侧设置,选择版本 3. 设置为经典模式 如若遇到以下错误: 解决方案:删除confi ...
- json模块 & pickle模块
之前学习过用eval内置方法可以将一个字符串转成python对象,不过,eval方法是有局限性的,对于普通的数据类型,json.loads和eval都能用,但遇到特殊类型的时候,eval就不管用了,所 ...
- Mysql读写分离方案-Amoeba环境部署记录
Mysql的读写分离可以使用MySQL Proxy,也可以使用Amoeba.Amoeba(变形虫)项目是一个类似MySQL Proxy的分布式数据库中间代理层软件,是由陈思儒开发的一个开源的java项 ...