iot-ui-plus/src/views/dashboard/components/BarChart.vue

<!--  线 + 柱混合图 -->
<template>
  <el-card>
    <template #header> 一网均温排行 </template>
    <div :id="id" :class="className" :style="{ height, width }" />
  </el-card>
</template>

<script setup>
import * as echarts from 'echarts';
import { randomColor } from '@/utils/index';

const props = defineProps({
  id: {
    type: String,
    default: 'lineChart'
  },
  className: {
    type: String,
    default: ''
  },
  width: {
    type: String,
    default: '200px',
    required: true
  },
  height: {
    type: String,
    default: '200px',
    required: true
  }
});

const defualData = [
  {
    cdate: '2016',
    cname: '换热站1,换热站2,换热站3,换热站4,换热站5,换热站6,换热站7,换热站8,换热站9,换热站10',
    cut: '20.9,13.82,3.6,0.56,1.49,9.48,32,21,65,19'
  },
  {
    cdate: '2017',
    cname: '换热站1,换热站2,换热站3,换热站4,换热站5,换热站6,换热站7,换热站8,换热站9,换热站10',
    cut: '18.7,12.82,13.6,9.56,12.49,13.48,21,23,52,53'
  },
  {
    cdate: '2018',
    cname: '换热站1,换热站2,换热站3,换热站4,换热站5,换热站6,换热站7,换热站8,换热站9,换热站10',
    cut: '14.9,18.82,7.6,19.56,13.49,17.48,80,33,63,42'
  },
  {
    cdate: '2019',
    cname: '换热站1,换热站2,换热站3,换热站4,换热站5,换热站6,换热站7,换热站8,换热站9,换热站10',
    cut: '16.9,3.82,13.6,15.56,12.49,14.48,54,35,40,20'
  },
  {
    cdate: '2020',
    cname: '换热站1,换热站2,换热站3,换热站4,换热站5,换热站6,换热站7,换热站8,换热站9,换热站10',
    cut: '3.8,8.82,13.6,21.56,15.49,19.2,16,19,24,52'
  },
  {
    cdate: '2021',
    cname: '换热站1,换热站2,换热站3,换热站4,换热站5,换热站6,换热站7,换热站8,换热站9,换热站10',
    cut: '23.9,16.82,13.6,17.56,14.49,19.98,18,12,30,35'
  },
  {
    cdate: '2022',
    cname: '换热站1,换热站2,换热站3,换热站4,换热站5,换热站6,换热站7,换热站8,换热站9,换热站10',
    cut: '12,23,46,52,39,32,25,28,31,37'
  },
  {
    cdate: '2023',
    cname: '换热站1,换热站2,换热站3,换热站4,换热站5,换热站6,换热站7,换热站8,换热站9,换热站10',
    cut: '52,59,60,49,42,36,10,9,21,28'
  }
];
const colors = ['#5470c6', '#91cc75', '#fac858', '#1a94bc', '#f26b1f', '#5bae23'];
const ccolors = {};
var updateFrequency = 1000; // 数据更新速度
var years = [];
var startIndex = 0;
for (var i = 0; i < defualData.length; ++i) {
  years.push(defualData[i]);
}
// 获取第一个数据
var startYear = years[startIndex].cdate;
var startName = years[startIndex].cname.split(',');
var startCut = years[startIndex].cut.split(',');
for (let i = 0; i < startName.length; i++) {
  if (i < 6) {
    ccolors[startName[i]] = colors[i];
  } else {
    ccolors[startName[i]] = randomColor();
  }
}
console.log(ccolors);

const options = {
  // tooltip: {
  //   trigger: 'axis',
  //   axisPointer: {
  //     type: 'shadow'
  //   }
  // },
  legend: {
    right: 100,
    itemWidth: 11,
    itemHeight: 2,
    color: '#fff',
    fontSize: 14
  },
  grid: {
    top: '0',
    left: '0',
    right: '0',
    bottom: '0',
    containLabel: true
  },
  xAxis: {
    max: 'dataMax',
    type: 'value',
    nameTextStyle: {
      color: '#000',
      fontSize: 12,
      padding: [0, 0, 0, 0] //name文字位置 对应 上右下左
    },
    axisTick: {
      // 轴刻度
      show: false
    },
    axisLabel: {
      show: true,
      color: '#000',
      formatter: function (n) {
        return Math.round(n) + '';
      }
    },
    splitLine: {
      // 网格线
      show: true,
      lineStyle: {
        //分割线
        type: 'dashed',
        color: '#306269',
        width: 1,
        opacity: 0.2
      }
    }
  },
  dataset: {
    source: defualData
  },
  yAxis: {
    type: 'category',
    nameTextStyle: {
      color: '#000',
      fontSize: 12,
      padding: [0, 0, 0, 0] //name文字位置 对应 上右下左
    },
    axisTick: {
      // 轴刻度
      show: false
    },
    axisLabel: {
      show: true,
      color: '#000',
      rich: {
        flag: {
          fontSize: 25,
          padding: 5
        }
      }
    },
    inverse: true,
    animationDuration: 300, //第一次柱条排序动的时长
    animationDurationUpdate: 300, //第一次后柱条排序动画时长
    data: startName
  },
  series: [
    {
      // name: '2023',
      type: 'bar',
      barWidth: 20, //柱宽
      showBackground: false,
      realtimeSort: true, // 开启该动态排序效果
      itemStyle: {
        color: function (param) {
          return ccolors[param.name];
        }
      },
      encode: {
        x: 0,
        y: 3
      },
      label: {
        show: true,
        precision: 1,
        position: 'right',
        color: '#000',
        valueAnimation: false // 柱子右侧的数字动态变化
      },
      emphasis: {
        focus: 'series' //聚焦当前高亮的数据所在的系列的所有图形
      },
      data: startCut
    }
  ],
  animationDuration: 0,
  animationDurationUpdate: 3000,
  animationEasing: 'linear',
  animationEasingUpdate: 'linear',
  graphic: {
    elements: [
      {
        type: 'text',
        right: 50,
        bottom: 50,
        style: {
          text: startYear,
          font: 'bolder 80px monospace',
          fill: 'rgba(100, 100, 100, 0.25)'
        },
        z: 100
      }
    ]
  }
};

onMounted(() => {
  // 图表初始化
  const chart = echarts.init(document.getElementById(props.id));
  chart.setOption(options);
  for (var i = startIndex; i < defualData.length - 1; ++i) {
    (function (i) {
      setTimeout(function () {
        getDeviceInfos(years[i + 1]);
      }, (i + 1) * updateFrequency);
    })(i);
  }

  // 大小自适应
  window.addEventListener('resize', () => {
    chart.resize();
  });

  function getDeviceInfos(year) {
    options.yAxis.data = year.cname.split(',');
    options.series[0].data = year.cut.split(',');
    options.graphic.elements[0].style.text = year.cdate;
    const chart = echarts.init(document.getElementById(props.id));
    chart.setOption(options);
  }
});
</script>