app.title = '堆叠条形图';

option = {
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
legend: {
data: ['直接访问', '邮件营销','联盟广告','视频广告','搜索引擎']
},
toolbox: {
show: true,
feature: {
dataZoom: {
yAxisIndex: 'none'
},
dataView: {readOnly: false},
magicType: {type: ['line', 'bar']},
restore: {},
saveAsImage: {}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: { type: 'category',
data: ['周一','周二','周三','周四','周五','周六','周日']
},
yAxis: {
type: 'value'
},
series: [
{
name: '直接访问',
type: 'bar',
stack: '总量',
smooth: true,
label: {
normal: {
show: true,
position: 'insideTop',
formatter: function(v) {
return v.value || ""
}
}
}, data: [302, 302, 301, 334, 390, 330, 320]
},
{
name: '邮件营销',
type: 'bar',
stack: '总量',
smooth: true,
label: {
normal: {
show: true,
position: 'insideTop',
formatter: function(v) {
return v.value || ""
}
}
},
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '联盟广告',
type: 'bar',
stack: '总量',
smooth: true,
label: {
normal: {
show: true,
position: 'insideTop',
formatter: function(v) {
return v.value || ""
}
}
},
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '视频广告',
type: 'bar',
stack: '总量',
smooth: true,
label: {
normal: {
show: true,
position: 'insideTop',
formatter: function(v) {
return v.value || ""
}
}
},
data: [150, 212, 201, 154, 190, 330, 410]
},
{
name: '搜索引擎',
type: 'bar',
stack: '总量',
smooth: true,
label: {
normal: {
show: true,
position: 'insideTop',
formatter: function(v) {
return v.value || ""
}
}
},
data: [820, 832, 901, 934, 1290, 1330, 1320]
},
{
name: '总计',
type: 'bar',
stack: '总计',
barGap: '-100%',
smooth: true,
label: {
normal: {
show: true,
position: 'top',
textStyle: { color: '#000' },
formatter: function(v) {
return "总计:" + (v.value)
}
}
},
itemStyle: {
normal: {
color: 'rgba(128, 128, 128, 0)',
borderWidth: 1,
borderColor: '#1FBCD2'
}
},
data: [1600,1600,1600,1600,1600,2600]
}
]
};

  

源代码直接带走

echarts堆叠图计算总数和各部分的更多相关文章

  1. echarts堆叠图添加总量

    echarts在使用中往往会遇到需要展示总量信息的情况,比较典型的就是3维统计的堆叠柱状图 堆叠是在柱状图的基础上,给几项设置同一stack来实现的.不考虑在tips中实现总和,有两种方式可以实现总和 ...

  2. echarts堆叠图展示,根据数据维度的粒度判断是否展示数据

    1.定义一个参数,返回根据判断什么条件是否显示值; 2.var a = '<%=(String)request.getAttribute("type")%&>' ...

  3. ECharts折线图堆叠设置为不堆叠的方法

    下图是ECharts折线图堆叠的官方源码,设置折线图不堆叠只需要将每一个stack的值设置为不一样的名称或者将stack属性删除即可. option = { title: { text: '折线图堆叠 ...

  4. echarts BAR堆叠图显示百分比

    在使用echarts的堆叠图时,我们鼠标悬停的浮窗里的信息可能并不是我们想要的信息,这个时候需要我们配置一下,因为堆叠图的trigger的类型是坐标轴触发的,数据是多组数据,所以我们需要遍历一下数据, ...

  5. echarts柱图自定义为硬币堆叠的形式

    看这标题,可能会有一些人不太明白,那么直接上图,就是柱图展示形式如下图(兼容IE8) 要想实现这样展示效果.我们想用echarts直接实现不行的,即使是纹理填充也不可行的,但是我们可以借助echart ...

  6. 06. Matplotlib 2 |折线图| 柱状图| 堆叠图| 面积图| 填图| 饼图| 直方图| 散点图| 极坐标| 图箱型图

    1.基本图表绘制 plt.plot() 图表类别:线形图.柱状图.密度图,以横纵坐标两个维度为主同时可延展出多种其他图表样式 plt.plot(kind='line', ax=None, figsiz ...

  7. d3.js 教程 模仿echarts折线图

    今天我们来仿echarts折线图,这个图在echarts是折线图堆叠,但是我用d3改造成了普通的折线图,只为了大家学习(其实在简单的写一个布局就可以).废话不多说商行代码. 1 制作 Line 类 c ...

  8. python数据可视化-matplotlib入门(5)-饼图和堆叠图

    饼图常用于统计学模块,画饼图用到的方法为:pie( ) 一.pie()函数用来绘制饼图 pie(x, explode=None, labels=None, colors=None, autopct=N ...

  9. Spark入门实战系列--9.Spark图计算GraphX介绍及实例

    [注]该系列文章以及使用到安装包/测试数据 可以在<倾情大奉送--Spark入门实战系列>获取 .GraphX介绍 1.1 GraphX应用背景 Spark GraphX是一个分布式图处理 ...

随机推荐

  1. ACL(访问控制列表)

    第六部分,访问控制列表.访问控制列表(Access Control List,ACL) 是路由器和交换机接口的指令列表,用来控制端口进出的数据包.应用场景有校园网中教师网和学生网分别管理,通过acl控 ...

  2. IoTClient开发5 - ModBusRtu协议

    前言 前面我们介绍了ModBusTcp协议.今天我们接着来介绍ModBusRtu协议.和ModBusTcp不同的是ModBusRtu基于串口通信,ModBusTcp是基于Tcp以太网通信. 所以我们在 ...

  3. 6张图说清楚Tomcat原理及请求流程

    前言 很多东西在时序图中体现的已经非常清楚了,没有必要再一步一步的作介绍,本文以图为主,然后对部分内容加以简单解释. 绘制图形使用的工具是 PlantUML + Visual Studio Code ...

  4. 带你使用Visual Studio 2019创建一个MVC Web应用

    工欲善其事必先利其器,我们既然有Visual Studio2019这样的IDE为什么不用?学.Net Core而不用Visual Studio进行开发可谓是多么另类呀!既然你已经安装了VS2019的话 ...

  5. Js 与浮点数

    同步发表在我的博客:jmingzi 当你学习一个知识点没有方向时,可以尝试以解决问题的角度来理解它. 例如这个知识点我们可以从以下问题开始: 你看的到 1 真的是整数 1 吗? 为什么0.1 + 0. ...

  6. 说说 WebSocket,3 分钟让你全面认识它

    "WebSocket 是一项先进的技术,它可以在用户的浏览器和服务器之间打开交互式通信会话.通过 WebSocket,您可以向服务器发送消息并实时接收响应,而无需通过传统的轮询服务器的方式来 ...

  7. Ubuntu 18.04 美化配置

    网上很多关于Ubuntu 18.04 美化的配置,但每个人遇见的问题都有些不太一样, 现将本人配置的过程整理如下 更新源为阿里云 找到Software & Updates,将源更新为阿里云的源 ...

  8. 《Java练习题》Java编程题合集(全)

    前言:不仅仅要实现,更要提升性能,精益求精,用尽量少的时间复杂度和空间复杂度解决问题. 初学者: <Java练习题>习题集一   https://www.cnblogs.com/jssj/ ...

  9. AI行业精选日报_人工智能(12·20)

    IDC:中国智能家居市场2020年十大预测 12 月 20 日消息,「IDC 咨询」官方公众号发布「中国智能家居 2020 年十大预测」.具体内容如下:互联平台加速整合.语音助手广泛赋能.智能电视显著 ...

  10. asp.net core 3.0 MVC JSON 全局配置

    asp.net core 3.0 MVC JSON 全局配置 System.Text.Json(default) startup配置代码如下: using System.Text.Encodings. ...