echarts之漏斗图

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.‌