Echarts 实现矩形树图

  ​​​​​​​​​​​​​​

​​​​​​​

  const getData = () => {const data = {deep: 10,needNum: 1,chainIdList: [props.industryType],};let list = [],array = [];updata.getChainTree(data).then((res) => {if (res) {if (!res.data || res.data.length <= 0) {emit("noDataFn", true);return;}array = recursiveFilter(res.data[0].childList);list = JSON.parse(JSON.stringify(array).replace(/chainName/g, "name").replace(/selfChildNum/g, "value").replace(/childList/g, "children"));creatCharts(list);}});};// 由于数据差距较大出现的问题导致有些矩形特别大或者特别小的情况使用对数来处理数据const recursiveFilter = (items) => {for (let i = 0; i < items.length; i++) {const item = items[i];item.oldValue = item.selfChildNumitem.selfChildNum = Math.log(item.oldValue)// 当前对象存在childrenif (item && item["childList"]) {// children为空数组时删除if (item["childList"].length === 0) {delete item["childList"];} else {// 递归当前children数组recursiveFilter(item["childList"]);}}}return items;};

     var option = {tooltip: {show: true,formatter: function (params) {return params.name +' '+ params.data.oldValue + '家';},},backgroundColor: "#ebebeb",// visualMap:{//     type: 'continuous',//     min:0,//     max:19551,// },series: [{name: "产业环节",type: "treemap",// backgroundColor: "blue",leafDepth: 1,left: 0,top: 0,right: 0,bottom: 25,textStyle: {color: "#000",},// emphasis:{//     itemStyle:{//         color:'blue'//     }// },data: list,label: {show: true,formatter: function (params) {return params.name+': '+ params.data.oldValue + "家";},// formatter: "{title|{b}}",fontSize: 15,},nodeClick: "none",roam: false,levels: [{colorSaturation: [0.4, 0.5, 0.6],colorMappingBy: "value",color: ["#9CC6FF", "#80B1FC", "#5F8DE7"],itemStyle: {borderColor: "transparent",borderWidth: 0,gapWidth: 0,},},{colorSaturation: [0.4, 0.5, 0.6],colorMappingBy: "value",color: ["#9CC6FF", "#80B1FC", "#5F8DE7"],itemStyle: {borderColor: "transparent",gapWidth: 0,borderWidth: 0.1,},},{colorSaturation: [0.4, 0.5, 0.6],colorMappingBy: "value",color: ["#9CC6FF", "#80B1FC", "#5F8DE7"],itemStyle: {borderColorSaturation: 0.1,gapWidth: 0,borderWidth: 0.1,},},],},],};myCharts.on("click", (params) => {console.log(params);});myCharts.setOption(option);

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！