E-commerce/src/components/Customize/Complex histograms.vue

<!-- 圆柱柱状图 -->
<template>
  <div class="oblongBox" :style="{height:barHeight}">
    <boxTop :title="title"/>
    <div class="chartsdom" :id="id">
    </div>
  </div>
</template>

<script>
import boxTop from '@/components/boxTop/index.vue'

export default {
  data() {
    return {
      option: null,
      information: {},
    }
  },
  components: {
    boxTop,
  },
  props: {
    id: {
      type: String,
      default: ``,
    },
    barHeight: {
      type: String,
      default: `200px`,
    },
    area: {
      type: Array,
    },
    dataArray: {
      type: Array,
    },
    title: {
      type: String,
      default: ``,
    },
    unit: {
      type: String,
    },
  },
  mounted() {
    this.getEchart()
  },
  watch: {
    dataArray() {
      this.getEchart()
    },
  },
  methods: {
    getEchart() {
      let myChart = echarts.init(document.getElementById(this.id))
      let data = {
        data: [
          [92, 0, 8, 143, 89, 67, 0, 0],
          [12, 0, 8, 14, 23, 44, 0, 0],
        ],
        color: [["#00FFE3", "#4693EC"], ["#1B92FF", "#1B92FF"]],
        xAxis: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月'],
        legend: ["今年当月", "去年当月"],
      };

      let series = data.data.map((item, index) => {
        return {
          name: data.legend[index],
          type: 'bar',
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: data.color[index][0]
                },
                {
                  offset: 1,
                  color: data.color[index][1]
                }
              ])
            }
          },
          data: data.data[index]
        }
      })
      this.option = {
        xAxis: {
          axisLabel: {
            color: '#29d0d0'
          },
          type: 'category',
          data: data.xAxis
        },
        legend: {
          show: true,
          textStyle: {
            color: '#ffffff'//字体颜色
          }
        },
        tooltip: {
          show: true,
          trigger: 'axis',
          axisPointer: {
            label: {
              show: true,
            },
          },
        },
        grid: {
          top: '15%',
          left: '5%',
          right: '5%',
          bottom: '15%',
          containLabel: true
        },
        yAxis: {
          type: 'value'
        },
        series: series
      }
      myChart.setOption(this.option, true)
    },
  },
}
</script>

<style lang="less" scoped>
.oblongBox {
  width: 460px;
  height: 216px;
  background: linear-gradient(rgba(0, 32, 77, 0.8) 0%, rgba(0, 32, 77, 0.5) 100%);
  box-shadow: inset 0px 0px 20px 0px rgba(27, 146, 255, 0.3);

  .chartsdom {
    position: relative;
    width: 100%;
    height: 90%;
  }

  .title {
    position: absolute;
    top: 20px;
    left: 30px;
    display: flex;
    align-items: center;

    .label {
      font-weight: 500;
      font-size: 16px;
      color: #FFFFFF;
      margin: 0 12px;
    }

    .value {
      font-weight: bold;
      font-size: 24px;
      background: linear-gradient(0deg, rgba(27, 146, 255, 1) 0%, rgba(255, 255, 255, 1) 50%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
}
</style>