imaginary histogram

Color array: [{ 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=[];//Type
  let influenceAmountList=[];//Original amount
  let influenceAmountList1=[];//Take the absolute value
  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];//Overdue days
  //const data1 = influenceAmountList1;//[100,80,70,90,30,29,22,21,20,19];//Overdue days
  const data0 = [-100,90,-80,70,-60,50,40,30,20,10,9,8,7,6,-5];//Overdue days
  const data1 = [100,90,80,70,60,50,40,30,20,10,9,8,7,6,5];//Overdue days
  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: { // mouseover display
      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: { // axis text
        color: "rgba(0,0,0, 0.4)",
        show:true,
        fontSize:10,
        interval:0,
        // text wrap
        formatter: function (value) {
          var ret = "";//splicing and adding\nreturned category items
          var maxLength = 7;//Number of displayed text for each item
          var valLength = value.length;//The number of text of the X-axis category item
          var rowN = Math.ceil(valLength / maxLength); //The number of lines that need to be wrapped for category items
          if (rowN > 1) {//If the text of the category item is greater than 3,
            for (var i = 0; i < rowN; i++) {
              var temp = "";//The string intercepted each time
              var start = i * maxLength;//Start interception position
              var end = start + maxLength;//end interception position
              //You can also add a judgment on whether it is the last line here, but if you don't add it, it won't affect it, so don't add it
              temp = value.substring(start, end) + "\n";
              ret += temp; //With the final string
            }
            return ret;
          } else {
            return value;
          }
        }
      },
      axisTick: { // axis separation
        show: false
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#DDDDDD"
        }
      },
      triggerEvent: false,
      z: 10
    },
    yAxis: {
      axisLine: { // coordinate axis
        show: true,
        lineStyle: {
          color: "#DDDDDD"
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: "rgba(0,0,0, 0.3)"
      },
      splitLine: { // The dividing line of the coordinate axis in the grid area
        show: true,
        lineStyle: {
          type: "dashed", // dashed line
          color: ["#EEEEEE"]
        }
      }
    },
    /*dataZoom: [ { type: "inside" } ],*/
    series: [
      {
        type: "bar",
        barWidth: 16,
        itemStyle: { // different colors for different cylinders
          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
      },
      {
        // separate
        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: "outer frame",
        type: "bar",
        barGap: "-110%", // set the frame thickness
        data: [],
        barWidth: 16,
        itemStyle: {
          normal: {
            color: "transparent", // fill color
            label: {
              // label display position
              show: false,
              position: "top" // insideTop or horizontal insideLeft
            }
          }
        },
        z: 0
      }
    ]
  };
  /*let changeTypeList=[];//type
  let influenceAmountList=[];//quantity
  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:'day',
      interval: 25,
      type: 'value'
    },
    series: [
      {
        label:{
          normal:{
            show:true,
            position:'inside',
            textStyle:{
              color:'#fff'
            }
          }
        },
        data: influenceAmountList,
        type: 'bar',
        barWidth:'50%',
        itemStyle: {
          normal: {
            //Here is the color
            color: function(params) {
              //Note that if there are too few colors, the subsequent colors will not automatically cycle, it is better to define more colors let colorList = ['#00A3E0','#FFA100', '#ffc0cb', '#CCCCCC', '# BBFFAA','#749f83','#ca8622'];
              if (params.value > 0) {
                return "#0091FF";
              } else {
                return "#F7B500";
              }
            }
          }
        }
      }
    ]
  };*/
  /*if(this.allDataMsg.taskDeviation.length==0){
    //If the atac impact amount data is empty, it will show that there is no data
    this.processEachart=false;
  }else{*/
    option && myChart.setOption(option);
  //}
},