vue+echarts实现条纹柱状横向图

本文实例为大家分享了vue+echarts实现条纹柱状横向图的具体代码，供大家参考，具体内容如下

实现效果：

<template>
  <div id="BusinessTop5Chart" style="flex: 1; height: 300px; width: 614px; margin-left: 10px"></div>
</template>
<script>
import { getNoteMatters } from '@/api/government';
const colors = [
   'rgba(248, 75, 110, 1)',
   'rgba(239, 142, 47, 1)',
   'rgba(234, 202, 4, 1)',
   'rgba(79, 224, 255, 1)',
   'rgba(106, 196, 255, 1)',
 ];
export default {
  data() {
    return {
      list: [],
      list1: [],
      list2: [],
      Top5ListName: [],
      Top5ListValue:[]
    };
  },
  mounted() {
    this.getNoteMatters();
  },
  methods: {
    initMap() {
      var myChart = this.$echarts.init(document.getElementById('BusinessTop5Chart'));
      const option = {
        grid: {
          top: 20,
          bottom: 30,
          left: 10,
          right: 150,
          containLabel: true,
        },
        tooltip: {
          show: true,
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        xAxis: {
          type: 'value',
          splitLine: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          position: 'top',
        },
        yAxis: {
          type: 'category',
          data: this.Top5ListName,
          inverse: true, //倒叙
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            textStyle: {
              color: 'rgba(255,255,255,0.85)',
              fontSize: 14,
              fontFamily: 'TencentSans',
            },
            padding: [0, 0, 20, 0],
            inside: true,
            verticalAlign: 'bottom',
          },
        },
        series: [
          {
            type: 'bar',
            barGap: '-90%',
            barMaxWidth: 14,
            z: 0,
            label: {
              normal: {
                show: false,
                position: 'right',
                fontSize: 14,
                offset: [16, 0],
              },
            },
            data: this.list,
          },
          {
            type: 'bar',
            barGap: '-90%',
            barMaxWidth: 14,
            itemStyle: {
              color: 'rgba(26, 49, 99, 0.5)',
            },
            tooltip: {
              show: false,
            },
            data: this.list1,
          },
          {
            type: 'pictorialBar',
            symbolRepeat: 'fixed',
            symbolMargin: 4,
            symbol: 'rect',
            symbolClip: true,
            symbolSize: [1, 14],
            symbolPosition: 'start',
            itemStyle: {
              color: 'rgba(0,0,0,1)',
            },
            data: this.list2,
          },
        ],
      };
      myChart.setOption(option);
    },
    getNoteMatters() {
      getNoteMatters().then((res) => {
        const { status, data } = res;
        const { businessTpo5 } = JSON.parse(data);
        if (status === 200) {
        // this.Top5ListName=[
        //      {0: "三亚市税务局", 
        //       1: "三亚市市场监督管理局", 
        //       2: "三亚市公安局", 
        //       3: "三亚市邮政管理局", 
        //       4: "三亚市社会保险服务中心窗口"}]
          this.Top5ListName = businessTpo5.map((item) => {
            return item.agencies;
          });
        // this.Top5ListValue=[{0: 189354, 1: 56933, 2: 13267, 3: 10979, 4: 9054}]
          this.Top5ListValue = businessTpo5.map((item) => {
            return Number(item.num);
          });
          const max = Math.max.apply(null, this.Top5ListValue);
       // this.list=[{itemStyle:
       //         color: "rgba(248, 75, 110, 1)"
       //         name: "三亚市税务局"
       //         num: "189354"
       //         rate: "57.03%"
       //         value: 189354}]
          this.list = businessTpo5.map((item, index) => {
            let obj = {
              name: item.agencies,
              value: Number(item.num),
              num: item.num,
              rate: item.rate,
              itemStyle: {
                color: colors[index],
              },
            };
            return obj;
          });
       // this.list1=[
       // label:{
       // normal:{
       // color: colors[index],
       // fontSize: 14
       // position: "right"
       // show: true
       // offset:[16,0]
       // name: "三亚市税务局"
       // formatter(){return(item.num+'单位'+''+item.rate)}
       // rate: "57.03%"
       // value: 189354}}
          this.list1 = businessTpo5.map((item, index) => {
            let obj = {
              name: item.agencies,
              value: max,
              label: item.num,
              rate: item.rate,
              label: {
                normal: {
                  show: true,
                  position: 'right',
                  fontSize: 14,
                  color: colors[index],
                  offset: [16, 0],
                  formatter() {
                    return (
                      item.num + '件' + ' ' + ' ' + ' ' + ' ' + ' ' + ' ' + ' ' + ' ' + ' ' + ' ' + ' ' + item.rate
                    );
                  },
                },
              },
            };
            return obj;
          });
      // this.list2=[{label: "189354"
      // name: "三亚市税务局"
      // rate: "57.03%"
      // value: 189354}]    
        this.list2 = businessTpo5.map((item) => {
            let obj = {
              name: item.agencies,
              value: Number(item.num),
              label: item.num,
              rate: item.rate,
            };
            return obj;
          });
        }
        this.initMap();
      });
    },
  },
};
</script>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。