echarts动态排序柱状图实现

<template>
  <div id="pubTaxesFsz" style="height: 100%; width: 100%"></div>
</template>

<script lang="ts" setup name="PubTaxesFsz">
import * as echarts from 'echarts/core';
import { LabelLayout, UniversalTransition } from 'echarts/features';
import {
  GridComponent,
  LegendComponent,
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  DatasetComponent,
  TransformComponent
} from 'echarts/components';
import { BarChart, LineChart } from 'echarts/charts';
import { SVGRenderer } from 'echarts/renderers';
import { onMounted } from 'vue';

echarts.use([
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  LineChart,
  LabelLayout,
  UniversalTransition,
  SVGRenderer
]);

let monitorContainer: HTMLElement;
// let monitorChart: echarts.ECharts;
onMounted(() => {
  monitorContainer = document.getElementById('pubTaxesFsz');
  const monitorChart = echarts.init(monitorContainer);

  const myColors = {
    国内增值税: '#ce83f1',
    企业所得税: '#66e7ed',
    个人所得税: '#4bf26d',
    城镇土地使用税: '#d3d90b',
    城市维护建设税: '#7683f8'
  };
  const data = [
    ['国内增值税', '6月', 11.3],
    ['国内增值税', '7月', 12.3],
    ['国内增值税', '8月', 13.3],
    ['国内增值税', '9月', 16.3],
    ['企业所得税', '6月', 15.1],
    ['企业所得税', '7月', 18.1],
    ['企业所得税', '8月', 12.1],
    ['企业所得税', '9月', 18.1],
    ['个人所得税', '6月', 10.4],
    ['个人所得税', '7月', 13.4],
    ['个人所得税', '8月', 18.4],
    ['个人所得税', '9月', 28.4],
    ['城镇土地使用税', '6月', 5.4],
    ['城镇土地使用税', '7月', 3.4],
    ['城镇土地使用税', '8月', 8.4],
    ['城镇土地使用税', '9月', 9.4],
    ['城市维护建设税', '6月', 17.4],
    ['城市维护建设税', '7月', 22.4],
    ['城市维护建设税', '8月', 36.4],
    ['城市维护建设税', '9月', 46.4]
  ];
  const gqxsrOption = {
    grid: {
      top: 40,
      bottom: 30,
      left: 110,
      right: 50
    },
    // legend: {
    //   show: true,
    //   textStyle: {
    //     color: '#FFF'
    //   }
    // },
    tooltip: {
      transitionDuration: 0, // 防止宽度溢出外层div
      trigger: 'axis'
    },
    dataset: [
      {
        source: data.filter(function (d) {
          return d[1] === '6月';
        })
      }
    ],
    xAxis: {
      name: '金额',
      max: 'dataMax',
      // axisLabel: {
      //   textStyle: {
      //     show: true,
      //     fontFamily: '微软雅黑',
      //     color: '#FFFFFF',
      //     fontSize: '12',
      //     fontWeight: 'bolder'
      //   }
      // },
      axisLine: {
        // x轴线
        show: true,
        lineStyle: {
          // 属性lineStyle控制线条样式
          color: '#FFFFFF'
        }
      },
      axisTick: {
        // x轴刻度线
        show: true,
        lineStyle: {
          // 属性lineStyle控制线条样式
          color: '#FFFFFF'
        }
      },
      splitLine: {
        // 网格线
        show: true,
        lineStyle: {
          // 属性lineStyle控制线条样式
          type: 'dashed',
          color: 'rgba(255,255,255,0.39)'
        }
      }
    },
    yAxis: {
      name: '税种',
      nameLocation: 'start',
      type: 'category',
      inverse: true, // 表示 Y 轴从下往上是从小到大的排列
      // max: 4,//显示前n+1条,不加默认显示全部的
      axisLabel: {
        // y轴下刻度标签相关样式
        show: true,
        fontSize: 12,
        color: '#ffffff'
      },
      axisLine: {
        // 轴线
        show: true,
        lineStyle: {
          color: '#FFF'
        }
      },
      axisTick: {
        // y轴刻度线
        show: true,
        alignWithLabel: true,
        lineStyle: {
          // 属性lineStyle控制线条样式
          color: '#FFFFFF'
        }
      },
      splitLine: {
        // 网格线
        show: false,
        lineStyle: {
          // 属性lineStyle控制线条样式
          type: 'dashed',
          color: '#FFFFFF'
        }
      },
      animationDuration: 300,
      animationDurationUpdate: 300
    },
    series: [
      {
        realtimeSort: true, // 表示开启该系列的动态排序效果
        // seriesLayoutBy: 'column',
        type: 'bar',
        itemStyle: {
          color(param) {
            return myColors[param.value.item] || '#5470c6';
          }
        },
        encode: {
          // tooltip: ['item', 'zzl'],
          x: [2], // 表示维度 3、1、5 映射到 x 轴。
          y: [0] // 表示维度 2 映射到 y 轴。
        },
        label: {
          show: true,
          valueAnimation: true, // 开启标签动画,存在bug或冲突,目前无效,且开启会导致标签不显示
          position: 'right',
          color: '#ffffff'
        }
      }
    ],
    // Disable init animation.
    animation: true,
    animationDuration: 3000, // 设为 0，表示第一份数据不需要从 0 开始动画（如果希望从 0 开始则设为和 animationDurationUpdate 相同的值）
    animationDurationUpdate: 3000, // 建议设为 3000 表示每次更新动画时长，这一数值应与调用 setOption 改变数据的频率相同
    // animationEasing: 'linear',
    // animationEasingUpdate: 'linear',
    graphic: {
      // 图形元素,可悬浮,用于做水印等
      elements: [
        {
          type: 'text',
          right: 80,
          bottom: 60,
          style: {
            text: '6月',
            font: 'bolder 80px monospace',
            fill: 'rgba(255,255,255,0.66)'
          },
          z: 100
        }
      ]
    }
  };
  monitorChart.setOption(gqxsrOption);

  for (let i = 6; i < 10; ++i) {
    (function (i) {
      setTimeout(function () {
        console.log('===setTimeout===i==', i);
        updateYear(i);
      }, (i - 6) * 3000);
    })(i);
  }

  function updateYear(year) {
    const source = data.filter(function (d) {
      return d[1] === `${year}月`;
    });
    gqxsrOption.dataset[0].source = source;
    gqxsrOption.graphic.elements[0].style.text = `${year}月`;
    monitorChart.setOption(gqxsrOption);
  }
});
</script>