E-commerce/src/components/Customize/cylindricalHistogram.vue

<!-- 圆柱柱状图 -->
<template>
  <div class="wrap-container sn-container">
    <div class="sn-content">
      <div class="sn-title title">
        <div class="titleZn">{{ title }}</div>
        <div class="titleEn">{{ titleEn }}</div>
      </div>
      <div class="sn-body">
        <div class="wrap-container">
          <div class="chartsdom" id="cylindrical"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      option: null,
      information: {},
    }
  },
  props: {
    barWidth: {
      type: Number,
    },
    area: {
      type: Array,
    },
    dataArray: {
      type: Array,
    },
    title: {
      type: String,
      default: ``,
    },
    titleEn: {
      type: String,
      default: `Tongren Tobacco Planting Digital Management Platform`,
    },
    unit: {
      type: String,
    },
  },
  mounted() {
    this.getEchart()
  },
  methods: {
    getEchart() {
      let myChart = echarts.init(document.getElementById(`cylindrical`))
      this.information = {
        barWidth: 10,
        colorArray: {
          lineColor: `rgba(199,214,242, 0.2)`,
          labelColor: ` #c7d6f2`,
        },
        unit: `公斤/产量`,
        area: this.area,
        dataArray: this.dataArray,
      }
      this.option = {
        // animation: false, //去除加载时缓动动画
        tooltip: {
          trigger: `axis`,
          backgroundColor: `rgba(9,40,84,0.8)`,
          borderColor: `rgba(9,40,84,0.8)`,
          textStyle: {
            fontSize: 20,
            color: `#fff`,
          },
          axisPointer: {
            type: `shadow`,
          },
          formatter: `{b}<br/>{a}&nbsp;&nbsp;&nbsp;&nbsp;<span style='font-weight:bold'>{c}</span>`,
        },
        xAxis: {
          axisLine: {
            lineStyle: {
              color: this.information.colorArray.lineColor,
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: this.information.colorArray.labelColor,
            fontSize: 12,
            margin: 15,
            interval: 0,
          },
          splitLine: {
            show: true,
            interval: this.information.area.length,
            lineStyle: {
              color: this.information.colorArray.lineColor,
              width: 1,
            },
          },
          data: this.information.area,
        },
        grid: {
          left: `6%`,
          right: `6%`,
          bottom: `8%`,
          top: `24%`,
          containLabel: true,
        },
        yAxis: [
          {
            type: `value`,
            name: this.information.unit,
            nameTextStyle: {
              color: `#65ABE7`,
              fontSize: 12,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: this.information.colorArray.lineColor,
                width: 2,
              },
            },
            axisLabel: {
              margin: 20,
              color: this.information.colorArray.labelColor,
              fontSize: 12,
              fontWeight: 4,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: this.information.colorArray.lineColor,
                width: 2,
              },
            },
          },
        ],
        series: [
          {
            name: this.information.unit,
            tooltip: {
              show: true,
            },
            type: `bar`,
            barWidth: this.information.barWidth, // 柱子宽度
            label: {
              show: false,
              position: `top`,
              padding: 10,
              fontSize: 20,
              color: `#00ffff`,
              fontWeight: `bold`,
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: `#47FEED`,
                },
                {
                  offset: 1,
                  color: `#0E7E7D`,
                },
              ]),
            },
            data: this.information.dataArray,
            legendHoverLink: false,
          },
          {
            // 柱子底部椭圆
            name: `报修数量`,
            tooltip: {
              show: false,
            },
            type: `pictorialBar`,
            itemStyle: {
              // 未填充部分鼠标移上去颜色
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: `#1ABFC0`,
                },
                {
                  offset: 1,
                  color: `#1ABFC0`,
                },
              ]),
            },
            symbolRotate: 0,
            symbolSize: [this.information.barWidth, 5],
            symbolOffset: [0, 3],
            symbolPosition: `start`,
            data: this.information.dataArray,
            z: 3,
          },
          {
            // 柱子头部椭圆
            name: `报修数量`,
            tooltip: {
              show: false,
            },
            type: `pictorialBar`,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: `#1ABFC0`,
                },
                {
                  offset: 1,
                  color: `#1ABFC0`,
                },
              ]),
            },
            symbolRotate: 0,
            symbolSize: [this.information.barWidth, 5],
            symbolOffset: [0, -3],
            symbolPosition: `end`,
            data: this.information.dataArray,
            z: 3,
          },
        ],
      }
      myChart.setOption(this.option, true)
    },
  },
  beforeDestroy() {},
}
</script>

<style lang="scss" scoped>
.sn-container {
  width: 526px;
  height: 300px;
  .title {
    display: flex;
    justify-content: space-between;
    .titleEn {
      width: 120px;
      font-size: 8px;
      text-align: right;
      word-break: break-all;
    }
  }
  .chartsdom {
    width: 100%;
    height: 100%;
  }
}
</style>