E-commerce/src/components/Customize/HorizontalHistogram.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="Horizontal"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      option: null,
      information: {},
    }
  },
  props: {
    barWidth: {
      type: Number,
    },
    area: {
      type: Array,
    },
    dataArray: {
      type: Object,
    },
    title: {
      type: String,
      default: ``,
    },
    titleEn: {
      type: String,
      default: `Tongren Tobacco Planting Digital Management Platform`,
    },
    unit: {
      type: String,
    },
  },
  mounted() {
    this.getEchart()
  },
  watch: {
    area() {
      this.getEchart()
    },
  },
  methods: {
    getEchart() {
      let myChart = echarts.init(document.getElementById(`Horizontal`))
      // 定义颜色数组
      const colorList = `#111`
      const colorListA = [`#40F8FF`, `#FFf`]
      const data = {
        label: this.area,
        value: this.dataArray.Done,
        value2: this.dataArray.Percentage,
      }
      this.option = {
        tooltip: {
          trigger: `axis`,
          backgroundColor: `rgba(21, 154, 255, 0.32)`,
          textStyle: {
            color: `#fff`,
          },
          borderColor: `#159AFF`,
          axisPointer: {
            lineStyle: {
              color: `transparent`,
            },
          },
        },
        grid: {
          containLabel: true,
          bottom: 20,
          left: 30,
          top: 20,
          right: 30,
        },
        xAxis: {
          type: `value`,
          axisLabel: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
        yAxis: [
          {
            type: `category`,
            data: data.label,
            inverse: true,
            axisLabel: {
              margin: 10, // 刻度标签与轴线之间的距离
              formatter: function (value) {
                let k = data.label.indexOf(value)
                //  let index = k < 9 ? "0" + (k + 1) : k + 1;
                let index = k < 9 ? k + 1 : k + 1
                return `{a|${value}}`
              },
              rich: {
                b: {
                  // borderColor: "#fff",
                  // borderWidth: 1,
                  padding: [3, 1, 0, 1],
                  color: `#fff`,
                  fontSize: `80%`,
                },
                a: {
                  fontSize: `80%`,
                  color: `#D0DEEE`,
                  padding: [4, 0, 0, 8],
                },
              },
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
          },
          {
            type: `category`,
            data: data.label,
            inverse: true,
            axisLabel: {
              margin: 15,
              formatter: function (value) {
                let k = data.label.indexOf(value)
                let index = k
                return `{a|${data.value[index]}}`
              },
              rich: {
                a: {
                  fontSize: `90%`,
                  color: `#fff`,
                  padding: [4, 0, 0, 0],
                  fontFamily: `DOUYU`,
                },
              },
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
          },
          {
            type: `category`,
            data: data.label,
            inverse: true,
            axisLabel: {
              margin: 2,
              formatter: function (value) {
                let k = data.label.indexOf(value)
                let index = k
                return `{a|${data.value2[index]} %}`
              },
              rich: {
                a: {
                  fontSize: `90%`,
                  color: `#fff`,
                  padding: [4, 0, 0, 60],
                  fontFamily: `DOUYU`,
                },
              },
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            data: data.value,
            type: `bar`,
            barWidth: 10, // 柱子宽度
            MaxSize: 0,
            showBackground: true,
            barBorderRadius: [30, 0, 0, 30],
            backgroundStyle: {
              color: `rgba(9, 68, 131, .2)`,
            },
            label: {
              show: false,
              offset: [60, -17],
              color: `#fff`,
              fontWeight: 500,
              position: `left`,
              align: `left`,
              fontSize: `80%`,
              formatter: function (params) {
                console.log(params)
                return params.data.name
              },
            },
            itemStyle: {
              // barBorderRadius: [3, 0, 0, 3],
              color: (params) => {
                return {
                  type: `linear`,
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: colorListA[params.dataIndex <= 2 ? 0 : `1`],
                    },
                    {
                      offset: 1,
                      color: colorList,
                    },
                  ],
                }
              },
            },
          },
          {
            name: `外圆`,
            type: `scatter`,
            emphasis: {
              scale: false,
            },
            tooltip: {
              show: false,
            },
            symbol: `rect`,
            symbolSize: [3, 8], // 进度条白点
            itemStyle: {
              barBorderRadius: [30, 0, 0, 30],
              color: `#FFF`,
              shadowColor: `rgba(255, 255, 255, 0.5)`,
              shadowBlur: 5,
              borderWidth: 1,
              opacity: 1,
            },
            z: 2,
            data: data.value,
            animationDelay: 500,
          },
        ],
      }
      myChart.setOption(this.option, true)
    },
  },
  beforeDestroy() {},
}
</script>

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