gas-cylinder/src/components/proportion.vue

<template>
  <!-- 企业钢瓶占比 -->
  <div class="border" :style="{height: boxHeight}">
    <div class="card_box">
      <div class="title_trapezoid center_in">
        <span class="center_in">{{title}}</span>
      </div>
    </div>
    <div class="card_collect">
      <div id="proportion"></div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'wavyBlock',
    props: {
      title: {
        type: String,
        default: () => '文字',
      },
      boxHeight: {
        type: String,
        default: () => '95%',
      },
      dataList: {
        type: Array,
        default: () => [],
      },
    },
    data() {
      return {
        proportionList: [],
      }
    },
    watch: {
      dataList: {
        deep: true, // 立即触发监听函数
        immediate: true,
        handler(newVal) {
          if (newVal) {
            this.proportionList = newVal;
          }
          this.$nextTick(() => {
            this.getEnterpriseCylinder()
          })
        },
      },
    },
    mounted() {},
    methods: {
      getEnterpriseCylinder() {
        var chartDom = document.getElementById('proportion');
        var myChart = this.$echarts.init(chartDom);
        const nameList = [];
        const valueList = [];
        if (this.proportionList.length > 0) {
          this.proportionList.forEach((item, index) => {
            nameList.push(item.name)
            valueList.push(item.count)
          })
        }
        let showFlag = true
        if (this.proportionList.length > 0) {
          showFlag = false
        } else if (this.proportionList.length == 0) {
          showFlag = true
        }
        const sum = valueList.reduce((per, cur) => per + cur, 0); // 总数
        const showNum = 5;
        const option = {
          title: {
            show: showFlag,
            textStyle: {
              color: '#ffffff',
              fontSize: 18,
              fontWeight: 'normal',
            },
            text: '暂无数据',
            left: 'center',
            top: 'center',
          },
          // backgroundColor: "#1e1e1e",
          dataZoom: [{
              id: 'dataZoom',
              show: true, //flase直接隐藏图形
              type: 'slider',
              backgroundColor: 'transparent',
              brushSelect: false,
              filterMode: 'none',
              width: 7,
              yAxisIndex: [0, 1, 2],
              //left: 'center', //滚动条靠左侧的百分比
              //bottom: 13,
              startValue: 0, //滚动条的起始位置
              endValue: showNum - 1, //滚动条的截止位置（按比例分割你的柱状图x轴长度）
              handleStyle: {
                color: 'rgba(0,178,255,0.8)',
                borderColor: 'rgba(0,178,255,0.8)'
              },
              fillerColor: 'rgba(0,178,255,0.8)',
              borderColor: 'transparent',
              showDetail: false,
              dataBackground: {
                areaStyle: {
                  opacity: 0
                },
                lineStyle: {
                  color: 'transparent'
                }
              }
            },
            {
              type: 'inside',
              yAxisIndex: [0, 1, 2],
              zoomOnMouseWheel: false, //滚轮是否触发缩放
              moveOnMouseMove: true, //鼠标滚轮触发滚动
              moveOnMouseWheel: true
            }
          ],
          grid: {
            left: '48',
            right: '24',
            bottom: '14',
            top: '14'
          },
          tooltip: {
            show: false
          },
          xAxis: {
            show: false,
            type: 'value',
            boundaryGap: ['0%', '1%']
            //max: 100
          },
          yAxis: [{
              id: 'yAxis1',
              type: 'category',
              inverse: true,
              axisLabel: {
                inside: true,
                align: 'left',
                verticalAlign: 'bottom',
                padding: [0, 0, 15, -7],
                textStyle: {
                  color: '#ffffff',
                  fontSize: '14',
                  fontFamily: 'Source Han Sans CN-Regular',
                  fontWeight: 400
                },
                overflow: 'truncate', // 截断超出的部分
                formatter: function(value) {
                  if (value.length > 8) { // 当标签长度超过5时
                    return value.substring(0, 8) + '...'; // 截断并添加省略号
                  } else {
                    return value;
                  }
                }
              },
              splitLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLine: {
                show: false
              },
              data: nameList
            },
            {
              id: 'yAxis2',
              type: 'category',
              inverse: true,
              axisTick: 'none',
              axisLine: 'none',
              show: true,
              axisLabel: {
                padding: [0, 10, 15, 0],
                verticalAlign: 'bottom',
                align: 'right',
                formatter: (value) => {
                  return `{value|${value}}{unit|瓶}`;
                },
                rich: {
                  value: {
                    color: 'rgba(255,255,255, 1)',
                    fontFamily: 'HarmonyOS Sans-Regular',
                    fontSize: '16'
                  },
                  unit: {
                    color: 'rgba(255,255,255, 1)',
                    fontFamily: 'Source Han Sans CN-Regular',
                    fontSize: '14'
                  }
                }
              },
              data: valueList
            },
            {
              id: 'yAxis3',
              splitLine: {
                show: false
              },
              axisLine: {
                //y轴
                show: false
              },
              type: 'category',
              axisTick: {
                show: false
              },
              inverse: true, // 倒序
              data: nameList,
              position: 'left',
              axisLabel: {
                color: 'rgba(0, 0, 0, 0.65)',
                padding: [0, 0, -3, -32],
                align: 'left',
                verticalAlign: 'bottom',
                formatter: (value, index) => {
                  let i = nameList.indexOf(value);
                  if (i == 0) {
                    return `{lg1|${i + 1}}`;
                  } else if (i == 1) {
                    return `{lg2|${i + 1}}`;
                  } else if (i == 2) {
                    return `{lg3|${i + 1}}`;
                  } else {
                    return `{lg|${i + 1}}`;
                  }
                },
                rich: {
                  lg1: {
                    backgroundColor: 'rgba(250, 84, 28, 0.20)',
                    color: 'rgba(255, 122, 69, 1)',
                    borderRadius: 6,
                    align: 'center',
                    width: 28,
                    height: 28,
                    lineHeight: 28,
                    verticalAlign: 'middle',
                    fontSize: 14,
                    fontFamily: 'HarmonyOS Sans-Regular'
                  },
                  lg2: {
                    backgroundColor: 'rgba(250, 173, 20, 0.20)',
                    color: 'rgba(250, 173, 20, 1)',
                    borderRadius: 6,
                    align: 'center',
                    width: 28,
                    height: 28,
                    lineHeight: 28,
                    verticalAlign: 'middle',
                    fontSize: 14,
                    fontFamily: 'HarmonyOS Sans-Regular'
                  },
                  lg3: {
                    backgroundColor: 'rgba(35, 214, 136, 0.20)',
                    color: 'rgba(35, 214, 136, 1)',
                    borderRadius: 6,
                    align: 'center',
                    width: 28,
                    height: 28,
                    lineHeight: 28,
                    verticalAlign: 'middle',
                    fontSize: 14,
                    fontFamily: 'HarmonyOS Sans-Regular'
                  },
                  lg: {
                    backgroundColor: 'rgba(57, 126, 240, 0.20)',
                    color: '#397EF0',
                    borderRadius: 6,
                    align: 'center',
                    width: 28,
                    height: 28,
                    lineHeight: 28,
                    verticalAlign: 'middle',
                    fontSize: 14,
                    fontFamily: 'HarmonyOS Sans-Regular'
                  }
                }
              }
            }
          ],
          series: [{
              name: '值',
              type: 'bar',
              id: 'bar1',
              barCategoryGap: '50%', // 柱子距离
              showBackground: true,
              barGap: '-140%',
              backgroundStyle: {
                color: 'rgba(26, 71, 172, 0.3)'
              },
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 0,
                  colorStops: [{
                      offset: 0,
                      color: 'rgba(39, 92, 226, 0.6)'
                    },
                    {
                      offset: 1,
                      color: 'rgba(40, 252, 255, 1)'
                    }
                  ],
                  global: false // 缺省为 false
                }
              },
              barWidth: 5,
              data: valueList
            },
            {
              name: 'max',
              type: 'bar',
              id: 'bar2',
              data: valueList,
              barWidth: 9,
              stack: 'max',
              itemStyle: {
                color: 'transparent'
              }
            },
            {
              name: 'max',
              type: 'bar',
              id: 'bar3',
              data: valueList.map((item) => sum / 1000),
              barWidth: 9,
              stack: 'max',
              itemStyle: {
                color: '#80D0FB'
              }
            },
          ]
        };
        let currentIndex = 0;
        setInterval(() => {
          if (currentIndex + showNum < nameList.length) {
            currentIndex = currentIndex + 1;
          } else {
            currentIndex = 0;
          }
          myChart.setOption({
            dataZoom: [{
              id: 'dataZoom',
              startValue: currentIndex,
              endValue: currentIndex + showNum - 1
            }]
          });
        }, 3000);
        option && myChart.setOption(option);
      }
    }
  }
</script>

<style lang="scss">
  .border {
    position: relative;
    width: calc(100% - 10px);
    border: 1px solid #3077ca;
    margin: 0 10px 0 auto;
    border-radius: 4px;
    box-shadow: inset 0 0 40px rgba(48, 119, 202, 0.3);
  }

  .card_box {
    position: absolute;
    top: 0;
    left: calc(50% - 80px);
    right: 0;
  }

  .title_trapezoid {
    position: relative;
    color: #fff !important;
    width: 160px;
    height: 30px;
    text-align: center;
    z-index: 2;
  }

  .title_trapezoid span {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 160px;
    top: -1px;
    z-index: 2;
    font-size: 15px;
    line-height: 25px;
  }

  .title_trapezoid::before {
    border-bottom: 2px solid #2CD5FF;
    content: '';
    z-index: 1;
    width: 100%;
    height: 30px;
    background-image: linear-gradient(to top, #3077ca99, #3077ca7f, transparent);
    display: inline-block;
    position: absolute;
    left: 0;
    top: -1px;
    transform: perspective(100px) rotateX(150deg);
  }

  .card_collect {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    margin-top: 30px;
    height: calc(100% - 30px);
  }

  #proportion {
    width: 100%;
    height: 100%;
  }
</style>