echarts柱状图重叠去除点击最大值覆盖最小值的样式和实现最小值排列在最前面

 效果图：

 

// 从大到小排序
    sortList(arr) {
      return arr.sort((a, b) => {
        return b.value - a.value
      })
    },
    initBar() {
      // 数据处理
      const aList = [5, 25, 13, 5]
      const bList = [10, 20, 49, 15]
      const cList = [15, 10, 23, 35]
      const dList = [25, 7, 18, 33]
      const aBar = []
      const bBar = []
      const cBar = []
      const dBar = []
      for (let i=0; i < aList.length; i++) {
        const tempArr = [
          {
            value: aList[i],
            color: 'blue'
          },
          {
            value: bList[i],
            color: 'green'
          },
          {
            value: cList[i],
            color: 'red'
          },
          {
            value: dList[i],
            color: 'orange'
          }
        ]
        const sortedArr = this.sortList(tempArr)
        aBar.push({
          value: sortedArr[0].value,
          type: 'blue',
          itemStyle: {
            color: sortedArr[0].color
          }
        })
        bBar.push({
          value: sortedArr[1].value,
          type: 'green',
          itemStyle: {
            color: sortedArr[1].color
          }
        })
        cBar.push({
          value: sortedArr[2].value,
          type: 'red',
          itemStyle: {
            color: sortedArr[2].color
          }
        })
        dBar.push({
          value: sortedArr[3].value,
          type: 'orange',
          itemStyle: {
            color: sortedArr[3].color
          }
        })
      }

      var chartDom = document.getElementById('pieChart');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
          xAxis: {
              data: ['a', 'b', 'c', 'd'],
              axisTick: {show: false},
              axisLabel: {
                  formatter: 'barGap: \'-100%\''
              }
          },
          yAxis: {
              splitLine: {show: false}
          },
          animationDurationUpdate: 1200,
          series: [{
              type: 'bar',
              itemStyle: {
                  normal: {
                      color: '#ddd'
                  }
              },
              silent: false,
              barWidth: 40,
              barGap: '-100%', // Make series be overlap
              data: [60, 60, 60, 60]
          }, {
              type: 'bar',
              barWidth: 40,
              z: 10,//柱状图组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。
              data: aBar
          }, {
              type: 'bar',
              barWidth: 40,
              z: 11,//柱状图组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。
              data: bBar
          }, {
              type: 'bar',
              barWidth: 40,
              z: 12,//柱状图组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。
              data: cBar
          }, {
              type: 'bar',
              barWidth: 40,
              z: 13,//柱状图组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。
              data: dBar
          }]
      };

      option && myChart.setOption(option);
      myChart.on('click', function (param) {  
        //param参数包含的内容有： 
        //param.name：X轴的值 
        //param.data：Y轴的值 
        //param.value：Y轴的值 
        //param.type：点击事件均为click 
        //param.seriesName：legend的名称 
        //param.seriesIndex：系列序号（series中当前图形是第几个图形第几个） 
        //param.dataIndex：数值序列（X轴上当前点是第几个点）
        //alert(param.seriesName);  //legend的名称
        // console.log(param);  //X轴的值
        console.log(option.series[param.seriesIndex].data[param.dataIndex]);//获取自定义的值
      });
    }