首页 前端知识 echarts柱状图实现排序且点击之后动态改变柱子颜色

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

2024-03-01 12:03:44 前端知识 前端哥 901 420 我要收藏

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"
转载请注明出处或者链接地址:https://www.qianduange.cn//article/3027.html
标签
评论
发布的文章

如何定义 jQuery 函数?

2024-03-20 11:03:16

jQuery事件方法

2024-03-20 11:03:06

JQuery前端操作JSON浅谈

2024-03-12 01:03:20

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!