echart2 用单独空数据求总和 & 用背景条求总和
2017-01-04 14:54
211 查看
用背景条求总和
hideBarOption4 = {
title: {
text: '粗剪进度',
x: 'center',
textStyle: {
baseline: 'middle',//文字位置
fontSize: '19',//文字大小
color: '#d5d5d5',
fontFamily: '微软雅黑',
fontWeight: 700
}
},
tooltip: {
show: false,
},
toolbox: {
show: false,
},
calculable: false,
grid: {
x: 110,
x2: 50,
y2: 10,
y: 100,
borderWidth: 0,
},
xAxis: [
{
type: 'value',
axisLabel: {
show: false,
interval: 'auto',
4000
// {number}
textStyle: {
color: '#fff',
fontFamily: '微软雅黑',
fontSize: 15,
}
},
axisLine: { // 轴线
show: false,
},
splitLine: {//中间分隔线
show: false,
},
}
],
yAxis: [
{
type: 'category',
axisLabel: {
show: true,
interval: 'auto', // {number}
textStyle: {
color: '#fff',
fontFamily: '微软雅黑',
fontSize: 15,
}
},
axisLine: { // 轴线
show: false,
},
splitLine: {//中间分隔线
show: false,
},
data: ['进度：', ]
},
//辅助x轴
{
type: 'category',
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitArea: {
show: false
},
splitLine: {
show: false
},
data: ['进度：',]
}
],
series: [
{
name: '',
type: 'bar',
barGap: 10,
barWidth: 20,
stack: '1',
itemStyle: {
normal: {
color: 'rgb(217,86,82)',
label: {
show: false,
position: 'insideRight',
formatter: '{c} 个'
}
},
emphasis: {
color: 'rgba(0,0,0,0)',
barBorderWidth: 1,
barBorderColor: 'rgba(0,0,0,0)',
}
},
data: [
{
value: 45,
},
]
},
{
name: '',
type: 'bar',
barWidth: 20,
yAxisIndex: 1,
itemStyle: {
normal:
{
color: 'rgba(0,0,0,0)',
barBorderWidth: 1,
barBorderColor: 'rgb(217,86,82)',
label: {
show: true,
position: 'right',
formatter: function (params) {
for (var i = 0, l = hideBarOption4.yAxis[0].data.length; i < l; i++) {
if (hideBarOption4.yAxis[0].data[i] == params.name) {
return hideBarOption4.series[0].data[i].value + ' %';
}
}
},
textStyle: {
color: '#d5d5d5'
}
}
},
emphasis: {
color: 'rgba(0,0,0,0)',
barBorderWidth: 1,
barBorderColor: 'rgba(0,0,0,0)',
},
},
data: [100, ]
},
]
};
myChartHideBar4.setOption(hideBarOption4);
2. 利用一条空数据求总和
hideBarOption3 = {
title: {
text: '费用统计',
x: 'center',
textStyle: {
baseline: 'middle',//文字位置
fontSize: '19',//文字大小
color: '#d5d5d5',
fontFamily: '微软雅黑',
fontWeight: 700
}
},
tooltip: {
show: false,
},
toolbox: {
show: false,
},
calculable: false,
grid: {
x: 100,
x2: 50,
y2: 40,
y: 50,
borderWidth: 0,
},
xAxis: [
{
type: 'value',
axisLabel: {
show: false,
interval: 'auto', // {number}
textStyle: {
color: '#fff',
fontFamily: '微软雅黑',
fontSize: 15,
}
},
axisLine: { // 轴线
show: false,
},
splitLine: {//中间分隔线
show: false,
},
}
],
yAxis: [
{
type: 'category',
axisLabel: {
show: true,
interval: 'auto', // {number}
textStyle: {
color: '#fff',
fontFamily: '微软雅黑',
fontSize: 15,
}
},
axisLine: { // 轴线
show: false,
},
splitLine: {//中间分隔线
show: false,
},
data: ['1：', '2：', '3：', '4：', '5：', ]
},
],
series: [
{
name: '',
type: 'bar',
barGap: 10,
barWidth: 20,
stack: '1',
itemStyle: {
normal: {
color: '#a4a4a4',
label: {
show: false,
position: 'insideRight',
formatter: '{c} 元'
}
},
emphasis: {
color: 'rgba(0,0,0,0)',
barBorderWidth: 1,
barBorderColor: 'rgba(0,0,0,0)',
}
},
data: [52,56,37,23,52]
},
{
name: '',
type: 'bar',
stack: '1',
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)',
barBorderWidth: 1,
barBorderColor: '#a4a4a4',
label: {
show: true,
position: 'insideRight',
formatter: '{c} 元'
}
},
emphasis: {
color: 'rgba(0,0,0,0)',
barBorderWidth: 1,
barBorderColor: 'rgba(0,0,0,0)',
}
},
data: [78, 55, 63, 54,
85,
]
},
{
name: '',
type: 'bar',
stack: '1',
itemStyle: {
normal:
{
label: {
show: true,
position: 'right',
formatter: function (params) {
//计算汇总值
b4bf
var name = params.name;
var index; //x轴序列顺序
for (var i = 0; i < hideBarOption3.yAxis[0].data.length; i++) {
if (name == hideBarOption3.yAxis[0].data[i]) {
index = i;
break;
}
}
var total = 0;
for (var i = 0; i < hideBarOption3.series.length; i++) {
if (hideBarOption3.series[i].stack == params.series.stack) {
total += hideBarOption3.series[i].data[index];
}
}
return 100 * hideBarOption3.series[0].data[index] / total + '%';
},
textStyle: {
color: '#d5d5d5'
}
}
}
},
data: [0, 0, 0, 0, 0, ]
},
]
};
myChartHideBar3.setOption(hideBarOption3);
requre进来
可对比不同之处
hideBarOption4 = {
title: {
text: '粗剪进度',
x: 'center',
textStyle: {
baseline: 'middle',//文字位置
fontSize: '19',//文字大小
color: '#d5d5d5',
fontFamily: '微软雅黑',
fontWeight: 700
}
},
tooltip: {
show: false,
},
toolbox: {
show: false,
},
calculable: false,
grid: {
x: 110,
x2: 50,
y2: 10,
y: 100,
borderWidth: 0,
},
xAxis: [
{
type: 'value',
axisLabel: {
show: false,
interval: 'auto',
4000
// {number}
textStyle: {
color: '#fff',
fontFamily: '微软雅黑',
fontSize: 15,
}
},
axisLine: { // 轴线
show: false,
},
splitLine: {//中间分隔线
show: false,
},
}
],
yAxis: [
{
type: 'category',
axisLabel: {
show: true,
interval: 'auto', // {number}
textStyle: {
color: '#fff',
fontFamily: '微软雅黑',
fontSize: 15,
}
},
axisLine: { // 轴线
show: false,
},
splitLine: {//中间分隔线
show: false,
},
data: ['进度：', ]
},
//辅助x轴
{
type: 'category',
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitArea: {
show: false
},
splitLine: {
show: false
},
data: ['进度：',]
}
],
series: [
{
name: '',
type: 'bar',
barGap: 10,
barWidth: 20,
stack: '1',
itemStyle: {
normal: {
color: 'rgb(217,86,82)',
label: {
show: false,
position: 'insideRight',
formatter: '{c} 个'
}
},
emphasis: {
color: 'rgba(0,0,0,0)',
barBorderWidth: 1,
barBorderColor: 'rgba(0,0,0,0)',
}
},
data: [
{
value: 45,
},
]
},
{
name: '',
type: 'bar',
barWidth: 20,
yAxisIndex: 1,
itemStyle: {
normal:
{
color: 'rgba(0,0,0,0)',
barBorderWidth: 1,
barBorderColor: 'rgb(217,86,82)',
label: {
show: true,
position: 'right',
formatter: function (params) {
for (var i = 0, l = hideBarOption4.yAxis[0].data.length; i < l; i++) {
if (hideBarOption4.yAxis[0].data[i] == params.name) {
return hideBarOption4.series[0].data[i].value + ' %';
}
}
},
textStyle: {
color: '#d5d5d5'
}
}
},
emphasis: {
color: 'rgba(0,0,0,0)',
barBorderWidth: 1,
barBorderColor: 'rgba(0,0,0,0)',
},
},
data: [100, ]
},
]
};
myChartHideBar4.setOption(hideBarOption4);
2. 利用一条空数据求总和
hideBarOption3 = {
title: {
text: '费用统计',
x: 'center',
textStyle: {
baseline: 'middle',//文字位置
fontSize: '19',//文字大小
color: '#d5d5d5',
fontFamily: '微软雅黑',
fontWeight: 700
}
},
tooltip: {
show: false,
},
toolbox: {
show: false,
},
calculable: false,
grid: {
x: 100,
x2: 50,
y2: 40,
y: 50,
borderWidth: 0,
},
xAxis: [
{
type: 'value',
axisLabel: {
show: false,
interval: 'auto', // {number}
textStyle: {
color: '#fff',
fontFamily: '微软雅黑',
fontSize: 15,
}
},
axisLine: { // 轴线
show: false,
},
splitLine: {//中间分隔线
show: false,
},
}
],
yAxis: [
{
type: 'category',
axisLabel: {
show: true,
interval: 'auto', // {number}
textStyle: {
color: '#fff',
fontFamily: '微软雅黑',
fontSize: 15,
}
},
axisLine: { // 轴线
show: false,
},
splitLine: {//中间分隔线
show: false,
},
data: ['1：', '2：', '3：', '4：', '5：', ]
},
],
series: [
{
name: '',
type: 'bar',
barGap: 10,
barWidth: 20,
stack: '1',
itemStyle: {
normal: {
color: '#a4a4a4',
label: {
show: false,
position: 'insideRight',
formatter: '{c} 元'
}
},
emphasis: {
color: 'rgba(0,0,0,0)',
barBorderWidth: 1,
barBorderColor: 'rgba(0,0,0,0)',
}
},
data: [52,56,37,23,52]
},
{
name: '',
type: 'bar',
stack: '1',
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)',
barBorderWidth: 1,
barBorderColor: '#a4a4a4',
label: {
show: true,
position: 'insideRight',
formatter: '{c} 元'
}
},
emphasis: {
color: 'rgba(0,0,0,0)',
barBorderWidth: 1,
barBorderColor: 'rgba(0,0,0,0)',
}
},
data: [78, 55, 63, 54,
85,
]
},
{
name: '',
type: 'bar',
stack: '1',
itemStyle: {
normal:
{
label: {
show: true,
position: 'right',
formatter: function (params) {
//计算汇总值
b4bf
var name = params.name;
var index; //x轴序列顺序
for (var i = 0; i < hideBarOption3.yAxis[0].data.length; i++) {
if (name == hideBarOption3.yAxis[0].data[i]) {
index = i;
break;
}
}
var total = 0;
for (var i = 0; i < hideBarOption3.series.length; i++) {
if (hideBarOption3.series[i].stack == params.series.stack) {
total += hideBarOption3.series[i].data[index];
}
}
return 100 * hideBarOption3.series[0].data[index] / total + '%';
},
textStyle: {
color: '#d5d5d5'
}
}
}
},
data: [0, 0, 0, 0, 0, ]
},
]
};
myChartHideBar3.setOption(hideBarOption3);
requre进来
可对比不同之处
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- DOS命令学习
- matlab文件如何封装成exe文件
- 吞吐量
- 列表标签
- 嵌套ajax解决对同一张表在同一时间做新增+查询操作的问题？
- （原创）通过ActivityManager杀死第三方应用方式
- 蓝牙笔记
- 扛得住MySQL 之 MySQL体系结构
- how to force CDT to rebuild index with my new include.
- 父页面得到子页面的值
- Android-JavaWeb okhttp框架
- Android剥洋葱式解析JSON数据
- Mysql Err:1366, u"Incorrect string value
- 每天一个linux命令（6）：rmdir 命令
- windows安装ubuntu16.04后，启动时无法选择window
- 数字图像处理
- CCS中时间统计方法（profile）
- jquery+ajax实现省市区三级联动效果简单示例
- Linux用户管理
- mysql主从同步原理