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: "B"