Echarts 柱状图demo

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',
                        
                        /*data: [
                            {
                                name: '经常项目',
                                icon: 'rectangle',
                                textStyle: {color: '#FFFFFF'}
                            },
                            {
                                name: '资本项目',
                                icon: 'rectangle',
                                textStyle: { color: '#FFFFFF'}
                            }
                        ]*/
                        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',
                        }
                    },
                    /*splitArea: {    // 网格区域
                        show: true  // 是否显示，默认为false
                      },*/
                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',
                        }
                    },
                    /*minorSplitLine: {
                        show: true
                    },*/
                    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,
               /*splitLine: {
                    show: false,
                    lineStyle: {
                        color: '#162a66',
                    }
               },*/
               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, 用于表示位置
                            ]
                         )
                                
                                /*normal: {
                                    show: true,
                                    color: '#4286FF',
                                    borderWidth: 0,
                                    borderColor: '#333',
                                }*/
                            },
                            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;
}