VUE +echarts 漏斗图 百分比根据最大值设置

官网文档 {d}表示百分比 https://echarts.apache.org/zh/option.html#series-funnel.label.formatter

但是在数据显示时这个{d}并不是正确对应我数据值的百分比,大部分示例都是直接用{c}%表示

initChartOne() {
      var myChart = echarts.init(document.querySelector(".line-chart7"));
      var textColorList = ["#F7DA19", "#00A0FE", "#00D4FF", "#0BFF72"];
      
      var option = {
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c}",
        },
        color: textColorList,
        series: [
          {
            name: "Funnel",
            type: "funnel",
            left: "10%",
            top: 14,
            bottom: 30,
            width: "40%",
            minSize: "20%",
            maxSize: "100%",
            sort: "descending",
            gap: 2,
            label: {
              show: true,
              formatter: function (params) {
              //自定义显示样式
                let rese =
                  "{b|" +
                  params.data.name +
                  "} : {c|" +
                  params.data.value +
                  "}\n{d|" +
                  params.data.valueFat +
                  "%}";
                return rese;
              },
              color: "#fff",
              padding: [0, 100, 20, 0],
              rich: {
                b: {
                  fontSize: 16,
                  color: "#fff",
                },
                c: {
                  fontSize: 16,
                },
                d: {
                  fontSize: 18,
                  fontWeight: "bold",
                  lineHeight: 20,
                },
              },
            },
            labelLine: {
              length: 40,
              lineStyle: {
                width: 1,
                type: "solid",
              },
            },
            itemStyle: {
              borderColor: "transparent",
            },
            data: [
              {
              //数据值
                value:
                  this.callDatas.calledNum === undefined
                    ? "0"
                    : this.callDatas.calledNum,
                name: "总数",
              //利用总数计算百分比(去掉小数)  
              valueFat: (this.callDatas.calledNum === 0
                  ? 0
                  : (this.callDatas.calledNum / this.callDatas.calledNum) * 100
                ).toFixed(0),
              },
              {
                value:
                  this.callDatas.callConnectedNum === undefined
                    ? "0"
                    : this.callDatas.callConnectedNum,
                name: "接听数",
                valueFat: (this.callDatas.calledNum === 0
                  ? 0
                  : (this.callDatas.callConnectedNum /
                      this.callDatas.calledNum) *
                    100
                ).toFixed(0),
              },
              {
                value:
                  this.callDatas.dissuadeCompletedCount === undefined
                    ? "0"
                    : this.callDatas.dissuadeCompletedCount,
                name: "完成数",
                valueFat: (this.callDatas.calledNum === 0
                  ? 0
                  : (this.callDatas.dissuadeCompletedCount /
                      this.callDatas.calledNum) *
                    100
                ).toFixed(0),
              },
              {
                value:
                  this.callDatas.dissuadeCompletedCount === undefined
                    ? "0"
                    : this.callDatas.dissuadeCompletedCount,
                name: "成功数",
                valueFat: (this.callDatas.calledNum === 0
                  ? 0
                  : (this.callDatas.dissuadeCompletedCount /
                      this.callDatas.calledNum) *
                    100
                ).toFixed(0),
              },
            ],
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },        

 

posted @ 2022-04-15 10:35  一粒土  阅读(1456)  评论(0编辑  收藏  举报