Vue + Echarts自定义图标颜色及柱状图动态伸缩（定时）

1、效果图：

2、Vue代码 

<template>
  <!--区域分布数量柱状图-->
  <div class="emp-area">

  </div>
</template>

<script>
  require('@/assets/theme/chalk')
  require('echarts/theme/macarons')
  export default {
    name: "StaffArea",
    data() {
      return {
        chart: null,
        examples: [],
        timerId: null,
      }
    },
    mounted() {
      // 动态效果,定时
      this.$nextTick(() => {
        this.initChart()
        this.timerId = setInterval(() => {
          this.examples = [];
          this.product();
          const option = this.chart.getOption();
          option.series[0].data = this.examples;
          this.chart.setOption(option);
          this.$forceUpdate()
        }, 5000);
      })
      window.addEventListener('resize', this.resize)
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
      window.removeEventListener('resize', this.resize)
    },
    created() {
      this.product()
    },
    destroyed() {
      clearInterval(this.timerId);
    },
    methods: {
      initChart() {
        this.chart = this.echarts.init(document.querySelector('.emp-area'), 'macarons')
        const cityColors = {
          '兰州市': '#CF4645',
          '嘉峪关市': '#B580B2',
          '金昌市': '#7cb9e8',
          '白银市': '#146A90',
          '天水市': '#8956FF',
          '武威市': '#70C9A8',
          '张掖市': '#bfbfbf',
          '平凉市': '#595959',
          '酒泉市': '#40a9ff',
          '庆阳市': '#1890ff',
          '定西市': '#ffd666',
          '陇南市': '#adf7b6',
          '临夏州': '#fa8c16',
          '甘南州': '#80ed99',
        };
        this.chart.setOption({
          title: {
            text: '甘肃省各地州市人员',
            padding: [0, 0, 0, 10],
            textStyle: {
              color: '#fff',
            },
          },
          legend: {
            show: false,
          },
          animationDuration: 0,
          animationDurationUpdate: 3000,
          animationEasing: 'linear',
          animationEasingUpdate: 'linear',
          grid: {
            top: '8%',
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            axisLabel: {
              rotate: 0,
              color: '#fff'
            },
            splitLine: {
              show: false,
            },
          },
          yAxis: {
            type: 'category',
            axisLabel: {
              rotate: 30,
              color: '#fff'
            },
            data: ['兰州市', '嘉峪关市', '金昌市', '白银市', '天水市', '武威市', '张掖市', '平凉市', '酒泉市', '庆阳市', '定西市', '陇南市', '临夏州', '甘南州'],
            inverse: true,
            animationDuration: 0,
            animationDurationUpdate: 300,
            max: 13 // only the largest 3 bars will be displayed
          },
          series: [
            {
              realtimeSort: true,
              name: '',
              type: 'bar',
              itemStyle: {
                opacity: 1,
                barBorderRadius: 3,
                color: function (param) {
                  return cityColors[param.name] || '#5470c6';
                },
              },
              data: this.examples,
              label: {
                show: true,
                position: 'right',
                valueAnimation: true,
              }
            }
          ],
        });
      },
      product() {
        for (let i = 0; i < 14; ++i) {
          this.examples.push(Math.round(Math.random() * 200));
        }
      },
      resize() {
        this.chart.resize()
      },
    }
  }
</script>

<style lang="less" scoped>
  .emp-area {
    width: 100%;
    height: 100%;
  }
</style>