var h = document.documentElement.clientHeight || document.body.clientHeight;
var w = document.documentElement.clientWidth || document.body.clientWidth;
$(document).ready(function(){
monthInvoiceCountChart();
});
var dataTongBi = [-3, 5, 8, 15, 8, 17,8];
var dataJingChang = [3020, 4800, 3600, 6050, 4320, 6200,5050];
var dataZiBen = [3020, 4800, 3600, 6050, 4320, 6200,5050];
let s = dataJingChang.map(function(v, i) {//数组相加
return v + dataZiBen[i];
});
当左右Y轴都有数据的时候 用于使两条刻度线保持水平一致
var Min1 = calMin([s]);//取相加后数组的最大值
var Max1 = calMax([s]);//取相加后数组的最小值
var Min2 = calMin([dataTongBi]);
var Max2 = calMax([dataTongBi]);
var myChart_four = null;
var flag_four = 0;
function monthInvoiceCountChart(){
if(myChart_four==null){
myChart_four = echarts.init(document.getElementById("huiRuHuiKuanTotalTasDay"));
}
option = {
tooltip: {
trigger: 'axis',
confine:true,
//格式化阴影数据显示部分 {b}:代表x轴数据 ,<br/>:换行，有几个数据就写几个 <br/>{a0}增长: {c0}%
formatter:'{b} <br/>{a1}业务量(亿美元): {c1} <br/>{a2}业务量(亿美元): {c2} <br/>{a0}增长: {c0}%<br/>'，
textStyle:{
align:'left'
},
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'none' // 默认为直线，可选为：'line' | 'shadow'
}
},
legend: {
top: 10,
right:50,
itemHeight:10,
itemWidth:20,
icon: 'rectangle',
textStyle: { color: '#FFFFFF'},
data:['经常项目','资本项目']
},
grid: {
left: '3%',
right: '5%',
top:55,
bottom: '0%',
containLabel: true
},
toolbox: {
padding:[6,30,0,0], // 四个数字分别为上右下左与原位置距离
show : true,
feature : {
// mark : {show: true},
// dataView : {show: true, readOnly: false},
// magicType : {show: true, type: ['line', 'bar']},
// restore : {show: true},
// saveAsImage : {show: true},
//敲黑板，重点！！！
myTool2:{//自定义按钮 danielinbiti,这里增加，selfbuttons可以随便取名字
show:true,//是否显示
title:'下拉', //鼠标移动上去显示的文字
icon:'image://images/open.png', //图标
onclick:function() {//点击事件,这里的option1是chart的option信息
alert("下拉显示新的图表");
}
}
}
},
xAxis: [{
type: 'category',
axisTick: {
show: false,
lineStyle:{color:'#238bd4'}
},
axisLabel:{
interval:0,//代表显示所有x轴标签显示
color:'#9CCFFF'
},
axisLine: {
show: true,
lineStyle: {
color: '#238bd4',
}
},
data:["06.01","06.02","06.03","06.04","06.05","06.06","06.07"]
}],
yAxis: [{
type: 'value',
name: '亿美元',
nameTextStyle: {
color: '#fff',
padding: [0, 0, 0, -50] // 四个数字分别为上右下左与原位置距离
},
axisTick: {
show: false,
lineStyle:{color:'#238bd4'},
},
axisLine: {
show: true,
lineStyle: {
color: '#238bd4',
}
},
splitLine: {
show: true,
lineStyle: {
color: '#FFFFFF',
}
},
min: Min1,
max: Max1,
interval: (Max1 - Min1) / 5,
axisLabel:{
color:'#9CCFFF'
}
},
{
type: 'value',
name: '同比%',
nameTextStyle: {
color: '#fff',
padding: [0, -35, 0, 00] // 四个数字分别为上右下左与原位置距离
},
axisTick: {
show: false,
lineStyle:{color:'#238bd4'},
},
axisLine: {
show: true,
lineStyle: {
color: '#238bd4',
}
},
min: Min2,
max: Max2,
interval: (Max2 - Min2) / 5,
axisLabel:{
color:'#9CCFFF'
}
}],
dataZoom: [{
"show": false,
"height": 30,
"xAxisIndex": [
0
],
bottom: 30,
start: 0,
end:100,
handleSize: '110%',
handleStyle:{
color:"#d3dee5",
},
textStyle:{
color:"#fff"
},
borderColor:"#90979c"
}, {
"type": "inside",
"show": true,
"height": 15,
"start": 1,
"end": 35
}],
series: [{
name: '同比',
type: 'line',
smooth: true,
label: {
normal: {
show: false,
position: 'top',
}
},
itemStyle: {
normal: {
show: false,
color: '#238bd4',
borderWidth: 0,
borderColor: '#333',
}
},
lineStyle: {
normal: {
width: 1,
shadowColor: 'rgba(0,0,0,0.4)',
shadowBlur: 10,
shadowOffsetY: 10,
color:'#FF8C00'
}
},
// areaStyle: { //区域填充样式
// normal: {
// //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
// offset: 0,
// color: 'rgba(35,139,212,139)'
// },
// {
// offset: 1,
// color: 'rgba(0,0,0, 0)'
// }
// ], false),
// shadowColor: 'rgba(53,142,215,215)', //阴影颜色
// shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
// }
// },
yAxisIndex: 1,
data: dataTongBi
},
{
name: '经常项目',
type: 'bar',
barWidth : 25,
itemStyle: {
color: new echarts.graphic.LinearGradient(//
0, 0, 0, 1, //4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
[
{offset: 0, color: 'rgba(0,191,255,1)'},
{offset: 0.5, color: 'rgba(0,191,255,0.5)'},
{offset: 1, color: 'rgba(0,191,255,0.1)'}//数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置
]
)
},
label:{//label要加入normal才可生效,label即为x轴对应Y轴的值
normal:{
show:true,
color:'red',//设置渐变时候控制不到颜色，只能通过全局textStyle来控制
position:'top'
}
},
stack: '发票数量',
data: dataJingChang
},
{
name: '资本项目',
type: 'bar',
barWidth : 25,
itemStyle: {
normal: {
show: true,
color: '#EF18FF',
borderWidth: 0,
borderColor: '#333',
}
},
stack: '发票数量',
data: dataZiBen
}]
};
myChart_four.setOption(option,{notMerge:true,lazyUpdate:false});
if(flag_four==0){
flag_four=1;
tools.loopShowTooltip(myChart_four, option, {loopSeries: true,interval:4000});
}
}
function sleep(delay) {
var start = (new Date()).getTime();
while ((new Date()).getTime() - start < delay) {
continue;
}
}
//计算最大值,当左右Y轴都有数据的时候 用于使两条刻度线保持水平一致
function calMax(arr) {
let max = 0;
arr.forEach((el) => {
el.forEach((el1) => {
if (!(el1 === undefined || el1 === '')) {
if (max < el1) {
max = el1;
}
}
})
})
let maxint = Math.ceil(max / 9.5);//不让最高的值超过最上面的刻度
let maxval = maxint * 10;//让显示的刻度是整数
return maxval;
}
//计算最小值
function calMin(arr) {
debugger;
let min = 0;
arr.forEach((el) => {
el.forEach((el1) => {
if (!(el1 === undefined || el1 === '')) {
if (min > el1) {
min = el1;
}
}
})
})
let minint = Math.floor(min / 10);
let minval = minint * 10;//让显示的刻度是整数
return minval;
}