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之简单的入门——【二】再增加一个柱状图和图例组件的更多相关文章

  1. Python简单爬虫入门二

    接着上一次爬虫我们继续研究BeautifulSoup Python简单爬虫入门一 上一次我们爬虫我们已经成功的爬下了网页的源代码,那么这一次我们将继续来写怎么抓去具体想要的元素 首先回顾以下我们Bea ...

  2. echarts之简单的入门——【一】做个带时间轴的柱状统计图

    百度Echarts 官网首页  http://echarts.baidu.com/ 配置项手册 http://echarts.baidu.com/option.html#title GL配置项手册 h ...

  3. 四博智慧物联系统入门示例-1.增加一个DHT11温湿度传感器

    1.准备工作 DOIT农业控制开发板或者esp32模组,并下载 四博智慧物联系统快速入门-2.准备工作 章节中的固件 DHT11连接在端口01 使用快速入门注册的管理账号和用户 2.配置网络 3.绑定 ...

  4. Python简单爬虫入门三

    我们继续研究BeautifulSoup分类打印输出 Python简单爬虫入门一 Python简单爬虫入门二 前两部主要讲述我们如何用BeautifulSoup怎去抓取网页信息以及获取相应的图片标题等信 ...

  5. MongoDB最简单的入门教程之二 使用nodejs访问MongoDB

    在前一篇教程 MongoDB最简单的入门教程之一 环境搭建 里,我们已经完成了MongoDB的环境搭建. 在localhost:27017的服务器上,在数据库admin下面创建了一个名为person的 ...

  6. echarts的简单应用之(二)饼图

    接上一篇文章: echarts的简单应用之(一)柱形图:https://www.cnblogs.com/jylee/p/9359363.html 本篇文章讲述饼图,撇过折线图不说,是因为折线图与柱形图 ...

  7. GJM : Python简单爬虫入门(二) [转载]

    感谢您的阅读.喜欢的.有用的就请大哥大嫂们高抬贵手"推荐一下"吧!你的精神支持是博主强大的写作动力以及转载收藏动力.欢迎转载! 版权声明:本文原创发表于 [请点击连接前往] ,未经 ...

  8. MongoDB最简单的入门教程之三 使用Java代码往MongoDB里插入数据

    前两篇教程我们介绍了如何搭建MongoDB的本地环境: MongoDB最简单的入门教程之一 环境搭建 以及如何用nodejs读取MongoDB里的记录: MongoDB最简单的入门教程之二 使用nod ...

  9. 【原创】NIO框架入门(二):服务端基于MINA2的UDP双向通信Demo演示

    前言 NIO框架的流行,使得开发大并发.高性能的互联网服务端成为可能.这其中最流行的无非就是MINA和Netty了,MINA目前的主要版本是MINA2.而Netty的主要版本是Netty3和Netty ...

随机推荐

  1. C#集合Collections购物车Shopping Cart

    这篇是对象与集合操练,物件的创建,集合的一些基本功能,如添加,编辑,删除等功能. 对象,即是网店的商品物件,Insus.NET只为其添加2个属性,物件的ID的Key和名称ItemName以及2个构造函 ...

  2. BootStrap学习(2)_下拉菜单&按钮组

    一.下拉菜单 1.基本下拉菜单 如需使用下列菜单,只需要在class .dropdown 内加上下拉菜单即可.下面的实例演示了基本的下拉菜单: <!DOCTYPE html> <ht ...

  3. 汇编 OD 标志位 置位相关指令

    知识点: l 标志位 置位相关指令   l 标志寄存器PSW 标志寄存器PSW(程序状态字寄存器PSW)    标志寄存器PSW是一个16为的寄存器.它反映了CPU运算的状态特征并且存放某些控制标志. ...

  4. Mac 启动 ssh 服务

    Mac 本身有 ssh,只是没有默认开启,需要手动开启. 启动 sudo launchctl load -w /System/Library/LaunchDaemons/ssh.plist 关闭 su ...

  5. WPF 矩形框8个控制点伸缩及拖拽

    最近在研发图片控件矩形框8个控制点进行控制边框的大小.位置等信息,之前查阅了相关的信息,比如别人整合的类:ControlResizer 这个类虽然是好,但是很大程度上是有限制,换句话说,它需要你二次更 ...

  6. linux下监控某个目录是否被更改

    需求:对一个目录(比如/data/test)进行监控,当这个目录下文件或子目录出现变动(如修改.创建.删除.更名等操作)时,就发送邮件!针对上面的需求,编写shell脚本如下: [root@cento ...

  7. css-preprocessors

    what ? 预处理器是css 能够使用 变量.操作符.函数.mixins.interpolations 等类似于js 功能的一种语言. 目前比较常用是三种:SASS.less .stylus . W ...

  8. linux-IO重定向-文本流重定向

    输出重定向的追加和覆盖 标准输出就这两种: 覆盖和追加 >> 是重定向操作符 1 是 命令的文件描述符 重定向操作符合文件描述符之间不能存在空白符 否则1会被当做是文件被读取 将正确和错误 ...

  9. Individual Reading Assignment

    1.What exactly does 'agile' mean? 1)Agile software development does not means a invariable mode of p ...

  10. vue 单文件 样式写了scoped 不能覆盖框架原有样式的解决办法

    vue 单文件 样式写了scoped 不能覆盖框架原有样式的解决办法 在vue 里面<style scoped></style> 是为了让样式只影响本身自己组件的样式,不改变全 ...