最新要闻

广告

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

 警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

  1. 首页
  2. 移动通信
  3. 内容

今日最新！金子塔图，自定义图表，伪漏斗图

来源：博客园


(资料图片仅供参考)

金子塔图，自定义图表，伪漏斗图

简易的金字塔图，设置不太灵活，可供使用者参考，需要使用者根据页面的需求复杂度等再做修改。

另附链接地址：https://www.isqqw.com/pcenter?userid=6427

// 原始数据let data = [   { name: "测试数据", value: 4 },   { name: "测试原理", value: 2 },   { name: "测试功能", value: 8 },]// 将数据根据从小到大排序let newdata = sortObject(data);// 图例数据let lengthData = [];// 返回数据let resultData = data.map((item, index) => {   let graw = item.value > 9 ? 78 : 83;   lengthData.push({      type: "group",      top: index * 25,      scale: [1, 1],      children: [         {            type: "circle",            shape: {               cx: 0,               cy: 7,               r: 5            },            style: {               fill:                  index === 0 ? "#07a9ab" : index === 1 ? "#008CD2" : "#0847e7"            }         },         {            type: "text",            style: {               text: item.name,               fill: "#fff",               fontSize: 14,               x: 10,               y: 2            }         },         {            type: "text",            name: item.name,            style: {               text: item.value,               fill: "#fff",               fontSize: 17,               x: 70,               y: 0            }         },         {            type: "text",            style: {               text: "个",               fill: "#fff",               fontSize: 14,               x: graw,               y: 2            }         }      ]   });   if (index === 0) {      return {         style: {            fill: new echarts.graphic.LinearGradient(0, 0, 1, 0, [               { offset: 0, color: "#07a9ab" },               { offset: 1, color: "#09fffb" }            ])         },         ...item      };   } else if (index === 1) {      return {         style: {            fill: new echarts.graphic.LinearGradient(0, 0, 1, 0, [               { offset: 0, color: "#025279" },               { offset: 1, color: "#16a7ef" }            ])         },         ...item      };   } else {      return {         style: {            fill: new echarts.graphic.LinearGradient(0, 0, 1, 0, [               { offset: 0, color: "#0332a9" },               { offset: 1, color: "#0847e7" }            ])         },         ...item      };   }});// 获取计算的数据let getData = pyramidChart(   resultData,   document.getElementById("container"));option = {   backgroundColor: "#022c32",   graphic: [      {         type: "group",         left: "5%",         top: "center",         scale: [1, 1],         onclick: function (params) {         },         children: getData      },      {         type: "group",         left: "55%",         top: "center",         scale: [1, 1],         onclick: function (params) {         },         children: lengthData      }   ],   series: []};// 排序function sortObject(arr) {   return arr.sort(function (a, b) {      return a["value"] - b["value"];   });}// 数据处理function pyramidChart(data = [], dom, option = {}) {   let domHeight = dom ? dom.clientHeight : 0;   let domWidth = dom ? dom.clientWidth : 0;   // 默认获取一个正方形空间   let maxDistance = domHeight > domWidth / 2 ? domWidth / 2 : domHeight;   // 合并设置   let resultOption = Object.assign(      {         slanted: 1, // 每层底部的倾斜度         maxWidth: maxDistance, // 金字塔最大宽度         maxHeight: maxDistance, // 金字塔最大高度         offset: 35 //偏差      },      option   );   if (data.length === 1) {      resultOption.slanted = 50;   }   if (data.length === 2) {      resultOption.slanted = 25;   }   if (data.length === 3) {      resultOption.slanted = 10;   }   // 减去多余的误差边距   resultOption.maxHeight = resultOption.maxHeight - resultOption.offset;   // 一半最大宽度,用于计算左右边距   let halfMaxWidth = resultOption.maxWidth / 2;   // 数据最终   let resultData = [];   // 数据值 数组   let dataNums = data.map(item => item.value || 0);   // 计算数据总和   let dataNumSum =      dataNums.length > 0 &&      dataNums.reduce(function (prev, curr) {         return Number(prev || 0) + Number(curr || 0);      });   // 中间数据点坐标数组 根据长度比值算出   let midlinePoint = [];   let multipleLayer = [0.6];   // 计算倍数等基础数据   dataNums.forEach((item, index, arr) => {      let itemNext = arr[index + 1];      if (itemNext) {         multipleLayer.push(itemNext / dataNums[0]); // 计算倍数      }      // 计算点坐标 长度      let point =         Math.round((item / dataNumSum) * resultOption.maxHeight * 1000) / 1000;      midlinePoint.push(point);   });   // 三角形的高度   let triangleHeight = 0;   let triangleHeightLayer = [];   // 三角形tan角度   let triangleRatio = halfMaxWidth / resultOption.maxHeight;   midlinePoint.forEach(item => {      triangleHeight = triangleHeight + item;      triangleHeightLayer.push(triangleHeight);   });   // 中间数据点 最后的数据长度   let midlinePointFinally =      triangleHeightLayer[triangleHeightLayer.length - 1] || 0;   // 开始拼接数据   data.forEach((item, index) => {      let arrObj = [];      let triangleHeightLayerOne = triangleHeightLayer[index];      let triangleHeightLayerOneLast = triangleHeightLayer[index - 1] || 0;      let multipleLayerOne = multipleLayer[index];      let multipleLayerOneLast = multipleLayer[index - 1] || 0;      // 第一层数据单独处理      if (index === 0) {         arrObj.push(            [0, 0],            [               -triangleRatio *               (triangleHeightLayerOne - resultOption.slanted * multipleLayerOne),               triangleHeightLayerOne - resultOption.slanted * multipleLayerOne            ],            [0, triangleHeightLayerOne],            [               triangleRatio *               (triangleHeightLayerOne - resultOption.slanted * multipleLayerOne),               triangleHeightLayerOne - resultOption.slanted * multipleLayerOne            ]         );      } else {         arrObj.push(            [0, triangleHeightLayerOneLast],            [               -triangleRatio *               (triangleHeightLayerOneLast -                  resultOption.slanted * multipleLayerOneLast),               triangleHeightLayerOneLast -               resultOption.slanted * multipleLayerOneLast            ],            [               -triangleRatio *               (triangleHeightLayerOne - resultOption.slanted * multipleLayerOne),               triangleHeightLayerOne - resultOption.slanted * multipleLayerOne            ],            [0, triangleHeightLayerOne],            [               triangleRatio *               (triangleHeightLayerOne - resultOption.slanted * multipleLayerOne),               triangleHeightLayerOne - resultOption.slanted * multipleLayerOne            ],            [               triangleRatio *               (triangleHeightLayerOneLast -                  resultOption.slanted * multipleLayerOneLast),               triangleHeightLayerOneLast -               resultOption.slanted * multipleLayerOneLast            ]         );      }      resultData.push({         type: "polygon",         z: 1,         shape: {            points: arrObj         },         name: item.name,         style: item.style      });   });   // 添加线   resultData.push({      type: "polyline",      shape: {         points: [            [0, 0],            [0, midlinePointFinally]         ]      },      style: {         stroke: "#f2f2f2",         opacity: 0.2,         lineWidth: 1      },      z: 2   });   // 返回   return resultData;};

关键词： 最大宽度 原始数据 数据长度