echarts3.0 本期累计堆叠
@{
ViewBag.Title = "barlj";
}
<h2>barlj</h2>
<div id="main" style="width: 1000px;height:800px;"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'), 'shine', { width: });
option = {
title: {
text: 'ECharts2 vs ECharts1',
subtext: 'Chrome下测试数据'
},
tooltip: {
trigger: 'axis',
formatter: function (params) {
var s = '';
s += params[].name + '<br />';
var l = params.length;
for (var i = ; i < l; i++) {
s += params[i].seriesName + ': ' + params[i].value + '<br />';
}
return s;
}
},
legend: {
//中间空字符为换行???
data: ['本期收入', '同期收入', '', '本期累计', '同期累计'],
selected: {
'本期收入': true,
'同期收入': true,
'本期累计': true,
'同期累计': true
}
},
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true },
saveAsImage: { show: true }
}
},
//拖动项,3.0不支持
calculable: true,
//grid: { y: 70, y2: 30, x2: 20 },
xAxis: [
{
type: 'category',
data: ['Line', 'Bar', 'Scatter', 'K', 'Map']
},
{
type: 'category',
axisLine: { show: false },
axisTick: { show: false },
axisLabel: { show: false },
splitArea: { show: false },
splitLine: { show: false },
data: ['Line', 'Bar', 'Scatter', 'K', 'Map']
}
],
yAxis: [
{
type: 'value',
axisLabel: { formatter: '{value} ms' }
}
],
series: [
{
name: '本期收入',
type: 'bar',
itemStyle: { normal: { color: 'rgba(193,35,43,1)', label: { show: true, position: 'top' } } },
data: [, , , , ]
},
{
name: '同期收入',
type: 'bar',
itemStyle: { normal: { color: 'rgba(181,195,52,1)', label: { show: true, position: 'top', textStyle: { color: '#27727B' } } } },
data: [, , , , ]
},
{
name: '本期累计',
type: 'bar',
xAxisIndex: ,
itemStyle: { normal: { color: 'rgba(193,35,43,0.5)', label: { show: true, position: 'top', formatter: function (p) { return p.value > ? (p.value /*+ '\n'*/) : ''; } } } },
data: [, , , , ]
},
{
name: '同期累计',
type: 'bar',
xAxisIndex: ,
itemStyle: { normal: { color: 'rgba(181,195,52,0.5)', label: { show: true, position: 'top' } } },
data: [, , , , ]
}
]
};
myChart.on('legendselectchanged', function (params) {
if (params.name == '本期收入') {
if (params.selected['本期收入']) {
option.legend.selected['本期收入'] = true;
option.legend.selected['同期收入'] = true;
}
else {
option.legend.selected['本期收入'] = false;
option.legend.selected['同期收入'] = false;
}
}
if (params.name == '同期收入') {
if (params.selected['同期收入']) {
option.legend.selected['本期收入'] = true;
option.legend.selected['同期收入'] = true;
}
else {
option.legend.selected['本期收入'] = false;
option.legend.selected['同期收入'] = false;
}
}
if (params.name == '本期累计') {
if (params.selected['本期累计']) {
option.legend.selected['本期累计'] = true;
option.legend.selected['同期累计'] = true;
}
else {
option.legend.selected['本期累计'] = false;
option.legend.selected['同期累计'] = false;
}
}
if (params.name == '同期累计') {
if (params.selected['同期累计']) {
option.legend.selected['本期累计'] = true;
option.legend.selected['同期累计'] = true;
}
else {
option.legend.selected['本期累计'] = false;
option.legend.selected['同期累计'] = false;
}
}
myChart.setOption(option);
});
myChart.setOption(option);
</script>

路过的感觉对你有用的帮忙配下色 :)
echarts3.0 本期累计堆叠的更多相关文章
- asp.net mvc5+Echarts3.0+AspNet.SignalR2.0 实时监控cpu占用率推送
先看看效果: 感谢QQ群18668853的群主,无私的公开课,全是干货,当初学的时候,群主用的是jquery.flot做图表,我这里改成百度的Echarts3.0,这算是自己的修改吧,喜欢的可以去下载 ...
- Echarts3.0 引入百度地图(转载)
转载来源: https://blog.csdn.net/yc_1993/article/details/52431989 Echarts3.0引入百度地图 update: 由于目前echarts3.8 ...
- vue cli3.0 结合echarts3.0和地图的使用方法
echarts 提供了直观,交互丰富,可高度个性化定制的数据可视化图表.而vue更合适操纵数据. 最近一直忙着搬家,就没有更新博客,今天抽出空来写一篇关于vue和echarts的博客.下面是结合地图的 ...
- vue中使用 echarts3.0 或 echarts2.0 (模拟迁徙图,折线图)
一.echarts3.0(官网: http://echarts.baidu.com/) 首先通过npm安装echarts依赖,安装的为3.0版本 npm install echarts -s 也可以使 ...
- echarts3.0 仪表盘实例更改完成占用率实例
需要完成的项目效果 官方实例效果 基本思路: 首先引入jquery和echarts3.0库. 需要两个仪表盘,一个仪表盘是纯色灰色,在底部.startAngle 和endAngle永远是最大值,默认为 ...
- echarts3.0之关系图详解
近期需要使用echarts关系图,当我打开echarts3.0官方demo后发现,对于新手而言,直接看懂有点儿难度,固写这样一篇文章让自己加深记忆,也便新手迅速上手.话不多说,开整生气! echart ...
- 基于SpringMVC框架使用ECharts3.0实现堆叠条形图的绘制(下篇)
<script type="text/javascript"> $().ready(function() { var myChart = echarts.init(do ...
- echarts3.0使用总结
echarts的使用和例子传送门 1.安装echarts npm install echarts --save 这里配置好了,直接输入 npm install //下载插件 npm start //运 ...
- ECharts3.0饼状图使用问题总结
前提:本人使用的是IE9浏览器 1.IE中无法显示,谷歌却显示正常的问题: 1)情况一 var myChart_cols<%=i%> = echarts.init(document.get ...
随机推荐
- Sql Server 优化技巧
1.查看执行时间和cpu占用时间 set statistics time on select * from dbo.Product set statistics time off 打开你查询之后的消息 ...
- Dubbo学习笔记1:使用Zookeeper搭建服务治理中心
Zookeeper是Apache Hadoop的子项目,是一个树形的目录服务,支持变更推送,适合作为Dubbo服务的注册中心,工业强度较高,推荐生成环境使用. , 下面结合上图介绍Zookeeper在 ...
- 戴尔PowerEdge R430 机架式服务器 安装ubuntu server 14.04.1 LTS 64 位
硬件配置: 服务编号:5Z04X72 软件配置 1.Ubuntu 系统下载地址: https://certification.ubuntu.com/certification/hardware/201 ...
- [NOIP2013提高&洛谷P1966]火柴排队 题解(树状数组求逆序对)
[NOIP2013提高&洛谷P1966]火柴排队 Description 涵涵有两盒火柴,每盒装有 n 根火柴,每根火柴都有一个高度. 现在将每盒中的火柴各自排成一列, 同一列火柴的高度互不相 ...
- 【leetcode 简单】 第七十四题 缺失数字
给定一个包含 0, 1, 2, ..., n 中 n 个数的序列,找出 0 .. n 中没有出现在序列中的那个数. 示例 1: 输入: [3,0,1] 输出: 2 示例 2: 输入: [9,6,4,2 ...
- EOJ Monthly 2019.2 (based on February Selection) F.方差
题目链接: https://acm.ecnu.edu.cn/contest/140/problem/F/ 题目: 思路: 因为方差是用来评估数据的离散程度的,因此最优的m个数一定是排序后连续的,所以我 ...
- 天梯赛 L2-013. (并查集) 红色警报
题目链接 题目描述 战争中保持各个城市间的连通性非常重要.本题要求你编写一个报警程序,当失去一个城市导致国家被分裂为多个无法连通的区域时,就发出红色警报.注意:若该国本来就不完全连通,是分裂的k个区域 ...
- Django认证系统实现的web页面
结合数据库.ajax.js.Djangoform表单和认证系统的web页面 一:数据模块 扩展了Django中的user表,增加了自定义的字段 from django.db import models ...
- Halcon编程-基于形状特征的模板匹配
halcon软件最高效的一个方面在于模板匹配,号称可以快速进行柔性模板匹配,能够非常方便的用于缺陷检测.目标定位.下面以一个简单的例子说明基于形状特征的模板匹配. 为了在右图中,定位图中的三 ...
- golang的json序列化
json就是简单的数据交换格式,语法类似javascript的对象和列表,是最常见的后端和运行在网页上的js之间的通信格式. encoding: 编码json数据需要使用到Marshal()函数. f ...