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

最新推荐文章于 2024-08-14 09:45:17 发布

天使的同类

最新推荐文章于 2024-08-14 09:45:17 发布

阅读量1.8k

点赞数 1

分类专栏： vue.js echarts 文章标签： echarts vue.js 前端

本文链接：https://blog.csdn.net/summer_jk/article/details/129376401

版权

本文介绍如何使用Echarts实现柱状图数据排序，并在点击柱子时动态改变柱子颜色。同时，当柱子被点击时，下方数据显示也会相应更新。

摘要由CSDN通过智能技术生成

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

我们先来看最终效果：

柱状图改变柱子颜色

主要实现的效果有：

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

直接上全部代码：

<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