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(); }); },