echarts柱状图实现排序且点击之后动态改变柱子颜色

echarts柱状图实现排序且点击之后动态改变柱子颜色

我们先来看最终效果：

柱状图改变柱子颜色

主要实现的效果有：

1. 柱子根据数据实现从高到底排序。
2. 点击柱子时，当前柱子发生颜色改变。
3. 下方展示的数据随着点击的柱子发生改变。

直接上全部代码：

<template>
  <div class="container">
    <div class="echartsBox">
    //这里是柱状图容器
      <div
        style="width: auto;height: 300px;margin-top: 20px;"
        ref="echart"
        class="echart"
      >
      </div>
      //这里是根据点击柱子的索引显示相对应的数据
      <div class="trueBox">
        <p class="title">{{ titleInfo + '：' + trueData.length }}人</p>
        <div class="listBox">
          <div
            class="trueList"
            v-for="(item,index) in trueData"
            :key="index"
          >{{ item }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
    
<script>
export default {
  name: "testStatisInfo",
  data() {
    return {
      titleInfo: "回答正确",
      trueData: [],  //下方所展示的数组
      typeInfo: [  //整个数组里的数据
        {
          type: "A",
          children: ["僵小鱼", "僵小鱼", "僵小鱼"],
        },
        {
          type: "B",
          children: [
            "僵小鱼",
            "僵小鱼",
            "僵小鱼",
            "僵小鱼",
            "僵小鱼",
            "僵小鱼",
          ],
        },
        {
          type: "C",
          children: ["僵小鱼"],
        },
        {
          type: "D",
          children: ["僵小鱼", "僵小鱼", "僵小鱼", "僵小鱼"],
        },
        {
          type: "E",
          children: ["僵小鱼", "僵小鱼"],
        },
      ],
    };
  },
  mounted() {
  //初始化调用柱状图
    this.$nextTick(() => {
    //‘#2688dd’柱状图柱子的默认颜色
      this.getEcharts("#2688dd");
    });
    //初始化获取所有展示的数据
    this.getAllData();
    //监听是否点击了柱状图，如果点击柱状图之外的区域，那么柱状图恢复默认状态，下方显示所有的数据
    document.addEventListener("click", (e) => {
      if (this.$refs.echart) {
        let isSelf = this.$refs.echart.contains(e.target);
        if (!isSelf) {
          this.getAllData();
          this.getEcharts("#2688dd");
        }
      }
    });
  },
  methods: {
  //获取下方内容需要展示的数据
    getAllData() {
      this.trueData = [];
      this.typeInfo.forEach((item) => {
        item.children.forEach((el) => {
        //改变标题内容
          this.titleInfo = "回答正确";
          this.trueData.push(el);
        });
      });
    },
    //柱状图
    getEcharts(color) {
      let myChart = this.$echarts.init(this.$refs.echart);
      let that = this;
      let checkName = "";  //当前点击的柱状图横坐标名称
      let source = [];  //柱状图横纵坐标数据
      this.typeInfo.forEach((item) => {
        source.push([item.type, item.children.length]);
      });

      var option = {
        label: {
          show: true,
          position: "top",
        },
        dataset: [
          {
            dimensions: ["name", "score"],
            source: source,
          },
          {
            transform: {
              type: "sort",
              config: { dimension: "score", order: "desc" },
            },
          },
        ],
        xAxis: {
          type: "category",
        },
        yAxis: {
          type: "value",
        },
        series: {
          name: "",
          type: "bar",
          encode: { x: "name", y: "score" },
          datasetIndex: 1,
          //重点部分：判断当前点击的横坐标名称是否一样，一样的话就改变柱子颜色，否则恢复默认颜色
          itemStyle: {
            color: function (params) {
              if (checkName === params.name) {
                return "#c23531";  //点击的柱子颜色发生改变
              } else {
                return color;  //这里是柱子的默认颜色
              }
            },
          },
        },
      };
      myChart.setOption(option);
      //柱子添加点击事件
      myChart.on("click", function (params) {
        checkName = params.name;
        myChart.setOption(option);  //柱状图数据重组
        that.typeInfo.forEach((item) => {  
        //判断当前点击的横坐标名称是否和typeInfo的‘type’一致，相同的话，则下方展示相对应的数据
          if (item.type == params.data[0]) {
            that.titleInfo = item.type;
            that.trueData = item.children;
          }
        });
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.container {
  .echartsBox {
    padding-bottom: 60px;
    .flexData {
      padding: 5px;
      display: flex;
      justify-content: flex-start;
      .flexList {
        margin-right: 10px;
        font-size: 12px;
        color: #333;
        &:last-child {
          margin-right: 0;
        }
      }
    }
    .trueBox {
      .title {
        font-size: 14px;
        color: #333;
        text-align: left;
        padding-left: 12px;
        margin: 0;
      }
      .listBox {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        .trueList {
          width: calc(100vw / 6);
          text-align: center;
          font-size: 14px;
          color: #333;
          margin-top: 10px;
        }
      }
    }
  }
}
</style>