@{
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 本期累计堆叠的更多相关文章

  1. asp.net mvc5+Echarts3.0+AspNet.SignalR2.0 实时监控cpu占用率推送

    先看看效果: 感谢QQ群18668853的群主,无私的公开课,全是干货,当初学的时候,群主用的是jquery.flot做图表,我这里改成百度的Echarts3.0,这算是自己的修改吧,喜欢的可以去下载 ...

  2. Echarts3.0 引入百度地图(转载)

    转载来源: https://blog.csdn.net/yc_1993/article/details/52431989 Echarts3.0引入百度地图 update: 由于目前echarts3.8 ...

  3. vue cli3.0 结合echarts3.0和地图的使用方法

    echarts 提供了直观,交互丰富,可高度个性化定制的数据可视化图表.而vue更合适操纵数据. 最近一直忙着搬家,就没有更新博客,今天抽出空来写一篇关于vue和echarts的博客.下面是结合地图的 ...

  4. vue中使用 echarts3.0 或 echarts2.0 (模拟迁徙图,折线图)

    一.echarts3.0(官网: http://echarts.baidu.com/) 首先通过npm安装echarts依赖,安装的为3.0版本 npm install echarts -s 也可以使 ...

  5. echarts3.0 仪表盘实例更改完成占用率实例

    需要完成的项目效果 官方实例效果 基本思路: 首先引入jquery和echarts3.0库. 需要两个仪表盘,一个仪表盘是纯色灰色,在底部.startAngle 和endAngle永远是最大值,默认为 ...

  6. echarts3.0之关系图详解

    近期需要使用echarts关系图,当我打开echarts3.0官方demo后发现,对于新手而言,直接看懂有点儿难度,固写这样一篇文章让自己加深记忆,也便新手迅速上手.话不多说,开整生气! echart ...

  7. 基于SpringMVC框架使用ECharts3.0实现堆叠条形图的绘制(下篇)

    <script type="text/javascript"> $().ready(function() { var myChart = echarts.init(do ...

  8. echarts3.0使用总结

    echarts的使用和例子传送门 1.安装echarts npm install echarts --save 这里配置好了,直接输入 npm install //下载插件 npm start //运 ...

  9. ECharts3.0饼状图使用问题总结

    前提:本人使用的是IE9浏览器 1.IE中无法显示,谷歌却显示正常的问题: 1)情况一 var myChart_cols<%=i%> = echarts.init(document.get ...

随机推荐

  1. Cloudstack安装(二)

    Cloudstack安装 官方文档参考: http://docs.cloudstack.apache.org/projects/cloudstack-installation/en/4.9/qig.h ...

  2. java基础-System类常用方法介绍

    java基础-System类常用方法介绍 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.System类概念 在API中system类介绍的比较简单,我们给出定义,system中 ...

  3. 《剑指offer》面试题45 圆圈中最后剩下的数字(Java版本)

    引言 这道题网上的讲解都是直接抄书,没意思,所以想自己写一写,补充一下,便于自己理解.另外,大家都忽略了经典解法,虽然这种解法效率不及第二种,但是我觉得在项目当中阅读性其实很重要,牺牲一点点效率保证代 ...

  4. vue中的slot与slot-scope

    深入理解vue中的slot与slot-scope vue+element-ui+slot-scope或原生实现可编辑表格 vue插槽详解

  5. C#_连接数据库实现 登录注册界面

    //编写登录界面逻辑 using System; using System.Collections.Generic; using System.ComponentModel; using System ...

  6. UC手机浏览器(U3内核)相关文档整理

    Note:绝大多数API在IOS版下不支持,使用前请自行测试. UC官方的开发者中心:http://www.uc.cn/business/developer.shtml U3内核定制<meta& ...

  7. C语言入门教程-(4)常量和变量

    1.常量和变量的概念 程序执行过程中其值不能发生改变的量叫做常量,其值能发生改变的量叫做变量.常量可以直接使用,而变量则必须先定义后才能使用,否则编译器会报错. 2.常量和变量的命名规范 在介绍常量和 ...

  8. Java 对象初始化生命周期

    class Man { String name; int age = 20; public static int sex = 1; Man(String name, int age) { //supe ...

  9. markdown小记(语法+markdownpad)

    一.有道云笔记markdown语法小记 1.目录[TOC] 2.标题# 一级标题## 二级标题...###### 六级标题 3.项目列表有序列表: 1. 1. (显示为i.) 2. 3. - (显示为 ...

  10. 【方法】jQuery无插件实现 鼠标拖动切换图片/内容 功能

    前言 我就想随便叨逼叨几句,爱看就看几句,不爱看就直接跳过看正文就好啦~ 这个方法是仿写页面时我自己研究出来,可能有比我更简单的方法. 但我不管,因为我没查我不知道,我就觉得我的最好啦,耶耶耶~ 效果 ...