PC_FiveFollowing/src/views/home/components/triangleChart.vue

<template>
  <div ref="distion" style="width: 100%; height: 100%"></div>
</template>
<script>
import * as echarts from "echarts";

export default {
  props: ["frtAnalogData"],
  data() {
    return {};
  },

  mounted() {
    this.$nextTick(() => {
      console.log(1111111111);
      console.log(this.frtAnalogData);
      console.log(1111111111);
      this.initChart();
      console.log("this.arr");
      console.log(this.arr);
      console.log("this.arr");
    });
  },

  beforeUnmount() {
    window.removeEventListener("resize", this.chart);
  },

  methods: {
    //次数分布折线图
    initChart() {
      var chart = echarts.init(this.$refs.distion);
      var option;

      var arr = [
        this.frtAnalogData.heavyLoad,
        this.frtAnalogData.easyLoad,
        this.frtAnalogData.norMalLoad,
      ];
      console.log(arr)

      option = {
        calculable: true,
        color: ["#FF5656", "#FFAF38", "#00F4FD"],
        series: [
          {
            name: "漏斗图",
            type: "funnel",
            left: "10%",
            right: "30%",
            width: "50%",
            top: "0%",
            bottom: "0%",
            minSize: "0%",
            maxSize: "70%",
            sort: "ascending",
            gap: 10,
            label: {
              show: true,
              // formatter: " {b|{b}}    {a|{c}} ",
              formatter: function (params) {
                console.log("params");
                console.log(params);

                let a = params.data.name + "   ";
                let b = params.data.reaVal;
                return "{a|" + a + "}" + "{b|" + b + "}";
              },
              rich: {
                a: {
                  color: "#fff",
                  fontSize: 12,
                },
                b: {
                  color: "rgba(101,166,196,1)",
                  fontSize: 20,
                  marginLeft: "10",
                  fontFamily: "impact",
                },
              },
            },
            labelLine: {
              length: 60,
              lineStyle: {
                width: 1,
                type: "solid",
              },
            },
            itemStyle: {
              //去掉默认白色边框线
              borderWidth: 0,
              borderColor: "#fff",
            },
            data: [
              {
                value: 10,
                name: "重载运行",
                reaVal: this.frtAnalogData.heavyLoad,
              },
              {
                value: 20,
                name: "轻载运行",
                reaVal: this.frtAnalogData.easyLoad,
              },
              {
                value: 30,
                name: "正常运行",
                reaVal: this.frtAnalogData.norMalLoad,
              },
            ],
          },
        ],
      };

      chart.setOption(option);
      window.addEventListener("resize", () => {
        chart.resize();
      });
      this.chart = chart;
    },
  },
};
</script>