echarts实现2d柱状_echarts之简单的入门——【二】再增加一个柱状图和图例组件...

在不阅读文档的情况下,通过官方实例,实现ECharts中添加第二个柱状图展示日答题总次数和活跃人数。通过观察降水量和蒸发量的例子,将数据格式调整为[['日期', '答题数', '活跃人数']],并在series中添加两个bar类型的数据系列。同时,利用legend组件实现图例的显示和隐藏,以切换查看'周答题'和'周活跃'的数据。建议多读文档以提高效率。" 44306265,4306155,非递归ZKW线段树:模板与实战解析,"['线段树', '算法模板', '区间操作', '数据结构', '非递归']
摘要由CSDN通过智能技术生成

现在需求说,我需要知道日答题总次数和活跃人数,那么我们如何在上面的图表中增加一个柱状图呢?

如果你看过简单入门中的配置项手册中series那么不用我说,你也知道如何修改,但是如果你没读过的话,想直接上手的话,你也可以查看官方实例中的代码,进行修改。

文档最好读一遍!

文档最好读一遍!

文档最好读一遍!

我们现在模拟没有读过文档,想直接上手做的思路。

查看实例

寻找带有多个统计的柱状图,比如这个降水量和蒸发量

ea2ce1846f8fd08172efcabf73b63126.png

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

1c38e68cccfbcd503e4dc20c93310e0a.png

仿照此格式在自己的图表中进行添加

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:['蒸发量','降水量']

},

3c30b40d3e3928f902674d9a6d10a523.png

将代码修改成自己的项目需要的然后加入图表

legend: {

data:['周答题','周活跃']

},

最终效果

默认显示

c67dd27a5ff5cf0979c15a9f08d83298.png

只查看日活跃

e28931ba1c6a1dd6de29db42729952bc.png

我还是比较推荐多看文档,然后实操的,这样子才能达到知其然并知其所以然

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值