echarts柱状图 上月和本月(排序)

<template>
  <Page>
    <page-main>
      <div class="test-container">
        <div id="myChartBar"></div>
      </div>
    </page-main>
  </Page>
</template>

<script>
export default {
  name: 'Test',
  data () {
    return {
      myChartBar: null, // 折线图
      chartOptionBar: {
        tooltip: {
          trigger: "axis",
          // 处理鼠标悬浮提示会错乱问题
          formatter(params) {
            let a = params[0].data.value;
            let i = params[0].data.itemStyle.color;
            let b = params[1].data.value;
            let j = params[1].data.itemStyle.color;
            let resa = `<span style="display:inline-block;margin-right:5px;
            border-radius:10px;width:10px;height:10px;background-color:#5BE2F8"></span>`;
            let resb = `<span style="display:inline-block;margin-right:5px;
            border-radius:10px;width:10px;height:10px;background-color:#F4BE49"></span>`;
            return (
              params[0].name +
              "<br/>" +
              (i == "#5BE2F8"
                ? (i == "#5BE2F8" ? resa + "上月 :" : resb + "本月 :") +
                  a +
                  "<br/>" +
                  (j == "#5BE2F8" ? resa + "上月 :" : resb + "本月 :") +
                  b
                : (j == "#5BE2F8" ? resa + "上月 :" : resb + "本月 :") +
                  b +
                  "<br/>" +
                  (i == "#5BE2F8" ? resa + "上月 :" : resb + "本月 :") +
                  a)
            );
          },
        },
        xAxis: {
          type: "category",
          // 坐标轴刻度
          axisTick: {
            show: true,
            alignWithLabel: true,
          },
          axisLabel: {
            textStyle: {
              color: "#000",
              fontSize: "12px",
            },
          },
          axisLine: {
            lineStyle: {
              color: "#000",
            },
          },
          data: [
            "1",
            "2",
            "3",
            "4",
            "5",
            "6",
            "7",
            "8",
            "9",
            "10",
            "11",
            "12",
            "13",
            "14",
            "15",
            "16",
            "17",
            "18",
            "19",
            "20",
            "21",
            "22",
            "23",
            "24",
            "25",
            "26",
            "27",
            "28",
            "29",
            "30",
            "31",
          ],
        },
        legend: {
          top: 15,
          left: "center",
          itemHeight: 8,
          itemWidth: 8,
          textStyle: {
            color: "#000",
            fontSize: "12px",
          },
          icon: "rect",
          selectedMode: false,
          data: ["上月", "本月"],
        },
        grid: {
          x: "10%",
          y: "20%",
          width: "85%",
          height: "60%",
        },
        yAxis: {
          type: "value",
          splitLine: {
            lineStyle: {
              width: "none",
            },
          },
          axisTick: {
            show: true,
            alignWithLabel: true,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#000",
            },
          },
          axisLabel: {
            textStyle: {
              color: "#000",
              fontSize: "12px",
            },
          },
        },
        series: [
          {
            type: "bar",
            barWidth: 10,
            z: 10,
            name: "上月",
            color: "#5BE2F8",
            barGap: "-100%",
            showBackground: true,
            backgroundStyle: {
              color: "#686c77",
            },
            itemStyle: {
              borderColor: "rgba(0,0,0,0)",
              borderWidth: 4,
            },
            data: [],
          },
          {
            type: "bar",
            barWidth: 10,
            name: "本月",
            color: "#F4BE49",
            itemStyle: {
              borderColor: "rgba(0,0,0,0)",
              borderWidth: 4,
            },
            z: 11,
            data: [],
          },
        ],
      },
    };
  },
  methods: {
    sortList(arr) {
      return arr.sort((a, b) => {
        return b.value - a.value;
      });
    },
    initBar() {
      const aList = [
        37600, 29000, 30000, 25000, 26000, 37600, 28500, 22500, 28000, 26000,
        29000, 30000, 31000, 30000, 47600, 29000, 33000, 32600, 22000, 37600,
        28500, 24000, 32600, 28000, 30000, 29000, 23000, 31000, 38000, 38000,
        30000,
      ];
      const bList = [
        32600, 27000, 35000, 28000, 28000, 32600, 32000, 28000, 30000, 35000,
        22000, 33000, 23000, 38000, 38000, 53000, 35000, 28000, 28000, 30000,
        24000, 32000, 28000, 22500, 35000, 22000, 33000, 31000, 29000, 33000,
        34000,
      ];
      let aBar = [];
      let bBar = [];
      for (let i = 0; i < aList.length; i++) {
        let tempArr = [
          {
            value: aList[i],
            color: "#5BE2F8",
          },
          {
            value: bList[i],
            color: "#F4BE49",
          },
        ];
        const sortedArr = this.sortList(tempArr);
        aBar.push({
          value: sortedArr[0].value,
          type: "5BE2F8",
          itemStyle: {
            color: sortedArr[0].color,
          },
        });
        bBar.push({
          value: sortedArr[1].value,
          type: "F4BE49",
          itemStyle: {
            color: sortedArr[1].color,
          },
        });
      }
      this.chartOptionBar.series[0].data = aBar;
      this.chartOptionBar.series[1].data = bBar;
    },
  },
  mounted() {
    this.initBar();
    this.myChartBar = this.$echarts.init(document.getElementById('myChartBar'));
    this.myChartBar.setOption(this.chartOptionBar);
  }
};
</script>

<style lang="scss" scoped>
  .test-container {
    padding: 20px;
    width: 700px;
    height: 500px;
    background: #fff;
    #myChartBar {
      width: 100%;
      height: 100%;
    }
  }
</style>