虚柱状图画法

颜色数组：[{ top: "rgb(172, 43, 0, 1)", center: "rgb(252, 150, 11, 0.5)", bottom: "rgb(255, 197, 143, 0.5)" },
{ top: "rgb(3, 113, 224, 1)", center: "rgb(3, 113, 224, 0.5)", bottom: "rgb(104, 168, 251, 0.5)" },]
processStatic(){
  let changeTypeList=[];//类型
  let influenceAmountList=[];//原始数量
  let influenceAmountList1=[];//取绝对值数量
  if(this.allDataMsg.taskDeviation!=null){
    this.allDataMsg.taskDeviation.forEach(item=>{
      changeTypeList.push(item.ptName);
      influenceAmountList.push(item.rateDeviation);
      influenceAmountList1.push(Math.abs(Number(item.rateDeviation)));
    })
  }
  const self = this;
  const dataAxis =changeTypeList;// ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"];
  //const data0 = influenceAmountList;//[100,80,70,90,30,29,22,21,20,19];//超期天数
  //const data1 = influenceAmountList1;//[100,80,70,90,30,29,22,21,20,19];//超期天数
  const data0 = [-100,90,-80,70,-60,50,40,30,20,10,9,8,7,6,-5];//超期天数
  const data1 = [100,90,80,70,60,50,40,30,20,10,9,8,7,6,5];//超期天数
  var myChart = echarts.init(document.getElementById("processAmount"));
  const option = {
    backgroundColor: "transparent",
    animation: true,
    title: {
      textStyle: {
        fontSize: 16,
        fontWeight: 500
      },
      left: -5
    },
    grid: {
      left: "50px",
      right: "60px"
    },
    tooltip: { // 鼠标悬浮显示
      trigger: "axis",
      axisPointer: {
        type: "none"
      },
      formatter: function(params) {
        const title = changeTypeList[params[0].dataIndex];
        let colorNum = {};
        if(data0[params[0].dataIndex]>=0){
          colorNum = colorarrays[4];
        }else{
          colorNum = colorarrays[1];
        }
        const icon = `<i class="fa fa-circle" style="color: ${colorNum.center}"></i>`;
        return `${title} <br/> ${icon} ${params[0].value}`;
      }
    },
    xAxis: {
      data: dataAxis,
      axisLabel: { // 坐标轴文字
        color: "rgba(0,0,0, 0.4)",
        show:true,
        fontSize:10,
        interval:0,
        //文字换行
        formatter: function (value) {
          var ret = "";//拼接加\n返回的类目项
          var maxLength = 7;//每项显示文字个数
          var valLength = value.length;//X轴类目项的文字个数
          var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
          if (rowN > 1) {//如果类目项的文字大于3,
            for (var i = 0; i < rowN; i++) {
              var temp = "";//每次截取的字符串
              var start = i * maxLength;//开始截取的位置
              var end = start + maxLength;//结束截取的位置
              //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
              temp = value.substring(start, end) + "\n";
              ret += temp; //凭借最终的字符串
            }
            return ret;
          } else {
            return value;
          }
        }
      },
      axisTick: { // 坐标轴分隔
        show: false
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#DDDDDD"
        }
      },
      triggerEvent: false,
      z: 10
    },
    yAxis: {
      axisLine: { // 坐标轴线
        show: true,
        lineStyle: {
          color: "#DDDDDD"
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: "rgba(0,0,0, 0.3)"
      },
      splitLine: { // 坐标轴在 grid 区域中的分隔线
        show: true,
        lineStyle: {
          type: "dashed", // 虚线
          color: ["#EEEEEE"]
        }
      }
    },
    /*dataZoom: [ { type: "inside" } ],*/
    series: [
      {
        type: "bar",
        barWidth: 16,
        itemStyle: { // 不同柱体不同颜色
          color: function(params) {
            if(data0[params.dataIndex]>=0){
              return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: colorarrays[4].bottom },
                // { offset: 0.5, color: colorarrays[params.dataIndex].center },
                { offset: 1, color: colorarrays[4].top }
              ]);
            }else{
              return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: colorarrays[1].bottom },
                { offset: 1, color: colorarrays[1].top }
              ]);
            }
          }
        },
        label:{
          normal:{
            show:true,
            position:'top',
            textStyle:{
              color:'rgba(0,0,0,0.7)'
            }
          }
        },
        data: data1,
        z: 10,
        zlevel: 0
      },
      {
        // 分隔
        type: "pictorialBar",
        itemStyle: {
          normal: {
            color: "#ffffff "
          }
        },
        symbolRepeat: "fixed",
        symbolMargin: 2.5,
        symbol: "rect",
        symbolClip: true,
        symbolSize: [28, 2],
        symbolPosition: "center",
        symbolOffset: [2, -1],
        data: data1,
        z: 0,
        zlevel: 1
      },
      {
        name: "外框",
        type: "bar",
        barGap: "-110%", // 设置外框粗细
        data: [],
        barWidth: 16,
        itemStyle: {
          normal: {
            color: "transparent", // 填充色
            label: {
              // 标签显示位置
              show: false,
              position: "top" // insideTop 或者横向的 insideLeft
            }
          }
        },
        z: 0
      }
    ]
  };
  /*let changeTypeList=[];//类型
  let influenceAmountList=[];//数量
  if(this.allDataMsg.taskDeviation!=null){
    this.allDataMsg.taskDeviation.forEach(item=>{
      changeTypeList.push(item.ptName);
      influenceAmountList.push(item.rateDeviation);
    })
  }
  let chartDom = document.getElementById('processAmount');
  let myChart = echarts.init(chartDom);
  let option;
  option = {
    xAxis: {
      type: 'category',
      data: changeTypeList,
      axisLabel: {
        interval: 0,
        rotate: "45"
      }
    },
    grid: {left: '3%',bottom:'36%'},
    tooltip: {},
    yAxis: {
      name:'天',
      interval: 25,
      type: 'value'
    },
    series: [
      {
        label:{
          normal:{
            show:true,
            position:'inside',
            textStyle:{
              color:'#fff'
            }
          }
        },
        data: influenceAmountList,
        type: 'bar',
        barWidth:'50%',
        itemStyle: {
          normal: {
            //这里是颜色
            color: function(params) {
              //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色let colorList = ['#00A3E0','#FFA100', '#ffc0cb', '#CCCCCC', '#BBFFAA','#749f83', '#ca8622'];
              if (params.value > 0) {
                return "#0091FF";
              } else {
                return "#F7B500";
              }
            }
          }
        }
      }
    ]
  };*/
  /*if(this.allDataMsg.taskDeviation.length==0){
    //如果atac影响金额数据为空，则显示暂无数据
    this.processEachart=false;
  }else{*/
    option && myChart.setOption(option);
  //}
},