vue3+echarts实现漏斗图

echarts中文官网：https://echarts.apache.org/examples/zh/index.html

效果图如下：

整体代码如下：

<template>
 	<div id="funnelChart" style="width:100%;height:400px;"></div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { onMounted } from "vue";

// 漏斗图data数据
const funnelData = [
  { value: 355, name: "电用量", unit: "kWh", percent: "55" },
  { value: 331, name: "燃气用量", unit: "L", percent: "43" },
  { value: 128, name: "媒用量", unit: "T", percent: "21.3" },
  { value: 56, name: "柴油用量", unit: "T", percent: "11.3" },
];

onMounted(() => {
  const myFunnelChart = echarts.init(document.getElementById("funnelChart"));

  const funnelOption = {
    tooltip: {
      show: false,
      trigger: "item",
      borderWidth: 0,
      backgroundColor: "#223B54",
      textStyle: {
        color: "#fff",
        fontSize: 14,
      },
      formatter: function (params) {
        //自定义显示样式
        let rese =
          params.data.name + " " + params.data.value + params.data.unit;
        return rese;
      },
    },
    color: ["#48E9E7", "#45C4DE", "#4096D2", "#3C69C6"],
    series: [
      {
        name: "综合能耗",
        type: "funnel",
        left: "10%",
        right: "0%",
        top: "20%",
        bottom: "15%",
        width: "50%",
        minSize: "20%",
        maxSize: "100%",
        sort: "descending",
        gap: 0,
        label: {
          show: true,
          position: "right",
          formatter: function (params) {
            //自定义显示样式
            let rese =
              "{b|" +
              params.data.name +
              "}\n{c|" +
              params.data.value +
              "}{d|" +
              params.data.unit +
              "  |  }" +
              params.data.percent +
              "%";
            return rese;
          },
          color: "#fff",
          rich: {
            b: {
              fontSize: 14,
              color: "#46E1DF",
            },
            c: {
              fontSize: 12,
            },
            d: {
              fontSize: 12,
              lineHeight: 20,
            },
          },
        },
        labelLine: {
          length: 20,
          lineStyle: {
            width: 1,
            type: "solid",
            color: "#fff",
          },
        },
        itemStyle: {
          borderColor: "#fff",
          borderWidth: 0,
        },
        emphasis: {
          label: {
            fontSize: 14,
          },
        },
        data: funnelData,
      },
    ],
  };
  myFunnelChart.setOption(funnelOption);
});
</script>

Not every effort there is a harvest, but each time the harvest must be hard.‌