mh_fire/src/components/funnel/index.vue

<template>
  <div
    ref="echartD"
    style="width: 100%; height: 100%; display: flex; justify-content: center"
  ></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  props: {
    dataMap: { type: Array, default: () => [] },
    color: { type: String, default: () => "#468EFD" },
  },
  data() {
    return {};
  },
  watch: {
    dataMap(val) {
      this.getData(val);
    },
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      if(document.body.clientWidth >1940){
        echarts.init(this.$refs.echartD).setOption({
          backgroundColor: "transparent",
          color: [
            "rgba(255,199,6,1)",
            "rgba(11,255,109,1)",
            "rgba(10,218,255,1)",
            "rgba(12,210,0,1)",
          ],
          series: [
            {
              zlevel: 1,
              name: "漏斗图",
              type: "funnel",
              left: 30,
              top: 0,
              bottom: 0,
              width: "100%",
              min: 0,
              max: 120,
              minSize: "3%",
              maxSize: "100%",
              sort: "ascending",
              gap: 15,
              label: {
                show: true,
                position: "left",
                // width: "400px",
                align: "left",
                textBorderColor: "transparent",
                formatter: function (params) {
                  return params.data.reaVal + "%";
                },
                // fontSize: 24,
                fontSize: 100,
                opacity: 1,
                fontFamily: '"DS", "DS-B", "DS-BB", "DS-BS"',
              },
              labelLine: {
                show: true,
                length: 50,
                lineStyle: {
                  width: 1,
                  type: "solid",
                },
              },
              itemStyle: {
                borderColor: "transparent",
                borderWidth: 0,
                opacity: 0.5,
                shadowColor: "#CCC",
                // shadowOffsetX: 1,
                // shadowBlur: 1,
                // shadowOffsetY: -1,
              },
              emphasis: {
                label: {
                  fontSize: 30,
                },
              },
              data:this.dataMap,
            },
          ],
        });
      }else{
        echarts.init(this.$refs.echartD).setOption({
          backgroundColor: "transparent",
          color: [
            "rgba(255,199,6,1)",
            "rgba(11,255,109,1)",
            "rgba(10,218,255,1)",
            "rgba(12,210,0,1)",
          ],
          series: [
            {
              zlevel: 1,
              name: "漏斗图",
              type: "funnel",
              left: 30,
              top: 0,
              bottom: 0,
              width: "100%",
              min: 0,
              max: 120,
              minSize: "3%",
              maxSize: "100%",
              sort: "ascending",
              gap: 15,
              label: {
                show: true,
                position: "left",
                // width: "400px",
                align: "left",
                textBorderColor: "transparent",
                formatter: function (params) {
                  return params.data.reaVal + "%";
                },
                // fontSize: 24,
                fontSize: 25,
                opacity: 1,
                fontFamily: '"DS", "DS-B", "DS-BB", "DS-BS"',
              },
              labelLine: {
                show: true,
                length: 50,
                lineStyle: {
                  width: 1,
                  type: "solid",
                },
              },
              itemStyle: {
                borderColor: "transparent",
                borderWidth: 0,
                opacity: 0.5,
                shadowColor: "#CCC",
                // shadowOffsetX: 1,
                // shadowBlur: 1,
                // shadowOffsetY: -1,
              },
              emphasis: {
                label: {
                  fontSize: 30,
                },
              },
              data:this.dataMap,
            },
          ],
        });
      }
    },
    resize() {
      echarts.init(this.$refs.echartD).resize();
    },
  },
};
</script>

<style scoped>
</style>