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 ...
随机推荐
- twitter——数据连接
sklearn实战-乳腺癌细胞数据挖掘(博客主亲自录制视频教程) https://study.163.com/course/introduction.htm?courseId=1005269003 ...
- bzoj千题计划119:bzoj1029: [JSOI2007]建筑抢修
http://www.lydsy.com/JudgeOnline/problem.php?id=1029 把任务按截止时间从小到大排序 如果当前时间+当前任务耗时<=当前任务截止时间,把这个任务 ...
- Django 2.0.1 官方文档翻译: 如何安装 django (Page 17)
如何安装 django(Page 17) 这一部分可以让你将 Django 运行起来. 安装 Python 作为 python 的一个 web 框架,Django 依赖 Python.Python 的 ...
- UNDERSTANDING THE GAUSSIAN DISTRIBUTION
UNDERSTANDING THE GAUSSIAN DISTRIBUTION Randomness is so present in our reality that we are used to ...
- Linux Ubuntu下安装配置mysql
检查系统中是否已经安装了mysql: sudo netstat -tap | grep mysql 安装mysql: sudo apt-get install mysql-server sudo ap ...
- SVN搭建和使用
原文出处: http://www.cnblogs.com/tugenhua0707/p/3969558.html SVN简介: 为什么要使用SVN? 程序员在编写程序的过程中,每个程序员都会生成很多不 ...
- [转载]bootstrap 2.3版与3.0版的使用区别
http://www.weste.net/2013/8-20/93261.html bootstrap已经推出了3.0的新版,看起来2.3.x版本也不会再更新了.那么bootstrap 2.3版与3. ...
- JS对象中的原型
对象的原型:每个对象都连接一个原型对象,并且它可以从中继承属性.所有通过对象字面量创建的对象都连接到object.prototype.当你创建一个新对象时,你可以选择某个对象作为它的原型.原型连接在更 ...
- 20155306 2016-2017-2 《Java程序设计》第6周学习总结
20155306 2016-2017-2 <Java程序设计>第6周学习总结 教材学习内容总结 第十章 输入/输出 10.1 InputStream与OutputStream 如果要将数据 ...
- pentaho bi server 配置MySQL数据库
软件版本: jdk 1.7 MySQL 5.5 biserver-ce-6.1.0.1-196 (选择右下方的所有选项See All Activities) 一.前置环境安装 1.安装jdk(略) 2 ...