ssti-CollegeManage/src/views/echarts/components/HorizontalChart.vue

<template>
  <div ref="Horizontal" class="mid"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  props: ["data"],
  methods: {
    setHorizontalData() {
      const Horizontal = echarts.init(this.$refs["Horizontal"]);
      let option = {
        grid: {
          top: 80, // 设置网格顶部的边距为 50px
          left: 10,
          bottom: 0,
          right: "100px",
          // left:'-10px'
        },
        title: {
          text: "创客活动资金",
        },
        tooltip: {
          trigger: "item",
        },
        dataset: {
          source: [["product", "amount"], ...this.data],
        },
        xAxis: {
          position: "top",
          name: "单位：元",
          nameTextStyle: {
            fontSize: 14,
            align: "left",
            verticalAlign: "bottom",
            padding: [0, 0, 7, 10],
          },
        },
        yAxis: {
          type: "category",
          zlevel: 1,
          axisLabel: {
            inside: true,
            margin: 4,
            //   formatter: function (value) {
            //     const vl = Math.floor(value.length/2);
            //     let newText = value.slice(0,vl)+'\n'+value.slice(vl)
            //     return newText;
            // },
            color: function (value, index) {
              const textWidth =
                option["dataset"]["source"][
                  option["dataset"]["source"].length - 1
                ][1] /
                6 /
                2;
              const vl = option["dataset"]["source"][index + 1][1];
              return vl >= textWidth ? "white" : "#3c4654";
            },
          },
        },
        series: [
          {
            type: "bar",
            barWidth: 55,
            label: {
              show: true,
              position: "right",
            },
            encode: {
              x: "amount",
              y: "product",
            },
            itemStyle: {
              color: "#3eb370",
            },
          },
        ],
      };
      Horizontal.setOption(option);
    },
  },
  mounted() {
    this.setHorizontalData();
    console.log(this.HorizontalData);
  },
};
</script>

<style lang="less" scoped>
</style>