跳至主要內容

漏斗图

刘春龙原创...大约 1 分钟WEB前端数据可视化Echarts教程文档

漏斗图(Funnel)或金字塔是一个倒(正)三角形的条形图,适用于业务流程比较规范、周期较长、环节较多的流程分析。 漏斗图也是常用的 BI 类图表之一,通过漏斗图或金字塔对各环节业务数据进行比较,不仅能够直观地发现和说明问题,而且可以通过漏斗图分析销售各环节中哪些环节出了问题。 为了更直观地查看电商网站数据

import * as echarts from "echarts";
export default {
  install: (app: any) => {
    app.config.globalProperties.$leida = (id: any) => {
      var chartDom = document.getElementById(id)!;
      if (chartDom == null) {
        return;
      }
      echarts.dispose(chartDom);
      var myChart = echarts.init(chartDom, "", { width: 800, height: 500 });
      var option = {
        title: {
          text: "汽车信息",
        },
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c}%",
        },
        series: [
          {
            name: "漏斗图",
            type: "funnel",
            width: "50%", // 图的大小
            sort: "ascending", //设置漏斗图方向,
            labelLine: {
              //视觉引导线样式
              length: 30,
              lineStyle: {
                width: 2,
                type: "solid",
              },
            },
            label: {
              formatter: (data: any) => {
                return data.data.name + "-" + data.data.num;
              },
              color: ["#CD6235"],
              fontSize: "16px",
            },
            itemStyle: {
              color: function (params: any) {
                var colorList = [
                  {
                    colorStops: [
                      {
                        offset: 0,
                        color: "#EE8684", // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "#E83F35", // 100% 处的颜色
                      },
                    ],
                  },
                  {
                    colorStops: [
                      {
                        offset: 0,
                        color: "#F3BA56", // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "#EC6E34", // 100% 处的颜色
                      },
                    ],
                  },
                  {
                    colorStops: [
                      {
                        offset: 0,
                        color: "#6EE7FA", // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "#3B88F5", // 100% 处的颜色
                      },
                    ],
                  },
                ];
                return colorList[params.dataIndex];
              },
            },
            emphasis: {
              label: {
                fontSize: 20,
              },
            },
            data: [
              { value: 60, name: "使用公里数", num: 1200 },
              { value: 40, name: "使用次数", num: 1100 },
              { value: 20, name: "检修次数", num: 800 },
            ],
          },
        ],
      };
      myChart.setOption(option);
    };
  },
};
上次编辑于:
贡献者: 刘春龙
评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v2.15.7