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"复制