当前位置：首页 > news >正文

echarts 矩阵树图treemap

news 2024/10/25 13:58:56

1、根据value值渲染各个数据的占用面积；
2、根据percentValue值判断各个数据的颜色展示；
3、根据value值判断各个数据的标签名称字号的大小（占用面积越大字号越大，占用面积越小字号越小）；

直接上代码：

html:

 <divid="ETFBroadBased"style="width: 100%;height: 450px;"></div>

js:

data () {return {chart: null,chartData: [{"value": "1637.05","name": "啊啊啊","percentValue": "-1.89","chg1w": "-32.06","chg2w": "-25.88","chg1m": "38.15","chg3m": "230.76","chg6m": null,"chgYtd": "508.16","mkv": "1637.05"},{"value": "10321.66","name": "不不不","percentValue": "-0.60","chg1w": "-63.95","chg2w": "258.40","chg1m": "768.35","chg3m": "468.38","chg6m": null,"chgYtd": "4159.72","mkv": "10321.66"},{"value": "1625.86","name": "踩踩踩","percentValue": "-2.43","chg1w": "-39.82","chg2w": "-62.44","chg1m": "112.42","chg3m": "134.54","chg6m": null,"chgYtd": "642.95","mkv": "1625.86"},{"value": "1427.23","name": "点点点","percentValue": "-4.21","chg1w": "-59.29","chg2w": "-87.24","chg1m": "223.69","chg3m": "412.39","chg6m": null,"chgYtd": "853.74","mkv": "1427.23"},{"value": "1919.21","name": "呃呃呃","percentValue": "-1.95","chg1w": "-38.41","chg2w": "551.01","chg1m": "545.03","chg3m": "670.93","chg6m": null,"chgYtd": "903.60","mkv": "1919.21"},],}
},
mounted () {this.$nextTick(() => {this.initTreeMapChart()})
},
methods: { initTreeMapChart() {var chartDom = document.getElementById('ETFBroadBased');this.chart = echarts.init(chartDom);this.addColors(this.chartData)let option = {tooltip: {trigger: 'item',backgroundColor: 'rgba( 0, 0, 0,0.7)',borderColor: 'rgba( 0, 0, 0,0.7)',formatter: function(params) {let str = params.name + '</br>'str = `<div style='color: #fff;'><div>${str}</div><div style="display: flex;justify-content: space-between;"><div>近1周：</div><div>${params.data.chg1w || '-'}亿</div></div><div style="display: flex;justify-content: space-between;"><div>近2周：</div><div>${params.data.chg2w || '-'}亿</div></div><div style="display: flex;justify-content: space-between;"><div>近1月：</div><div>${params.data.chg1m || '-'}亿</div></div><div style="display: flex;justify-content: space-between;"><div>近3月：</div><div>${params.data.chg3m || '-'}亿</div></div><div style="display: flex;justify-content: space-between;"><div>YTD：</div><div>${params.data.chgYtd || '-'}亿</div></div><div style="display: flex;justify-content: space-between;"><div>规模合计：</div><div>${params.data.mkv || '-'}亿</div></div></div>`return str;}},series: [{type: 'treemap',left: '0%',top: '0%',right: '0%',bottom: '0%',roam: false, // 是否开启拖拽漫游（移动和缩放）nodeClick: false, // 点击节点后的行为,false无反应breadcrumb: {show: false},label: {show: true,align: 'center',verticalAlign: 'middle',position: 'bottom',offset: [0, -15],color: '#fff',// formatter: function(params) {//   // console.log(params,'params--');//   // let area = Number(params.data.value) || 0//   // that.setSizeName = (area / 100) > 100 ? 30 : ((area / 100) < 100) && ((area / 100) >= 50) ? 16 : 24 // 根据面积大小设置字体大小//   // that.setSizeValue = (area / 100) > 100 ? 20 : ((area / 100) < 100) && ((area / 100) >= 50) ? 12 : 10 // 根据面积大小设置字体大小//   // console.log(that.setSizeName,that.setSizeValue,'9999999');//   // return `{name|${params.data.name}}` + '\n' + `{percentValue|${params.data.percentValue}%}`//   // return params.data.name  + '\n' + params.data.percentValue + '%'// },// rich: {//   name: {//     // color: '#fff',//     // fontSize: 13,//     // fontSize: that.setSizeName,//   },//   percentValue: {//     // color: '#fff',//     // fontSize: 10,//     // fontSize: that.setSizeValue,//   }// },},itemStyle: {show: true,borderWidth: 1,borderColor: '#fff',emphasis: {label: {show: true}}},data: this.chartData,}],}this.chart.setOption(option,true);},addColors(arr) {// 根据值的大小添加对应的颜色值(根据实际情况可修改)arr.map((item) => {if (Number(item.percentValue) > 4) {item.itemStyle = {color: '#ac1116',}} else if (Number(item.percentValue) > 2 && Number(item.percentValue) <= 4) {item.itemStyle = {color: '#7e1014',}} else if (Number(item.percentValue) >= 0 && Number(item.percentValue) <= 2) {item.itemStyle = {color: '#5e0d11',}} else if (Number(item.percentValue) < 0 && Number(item.percentValue) >= -2) {item.itemStyle = {color: '#094320',}} else if (Number(item.percentValue) < -2 && Number(item.percentValue) >= -4) {item.itemStyle = {color: '#095d29',}} else if (Number(item.percentValue) < -4 ) {item.itemStyle = {color: '#107f3a',}}})// 根据占用面积大小添加对应的字号(根据实际情况可修改)arr.map((item) => {if (Number(item.value) / 100 > 100) {item.label = {lineHeight: 25,formatter: function(params) {return `{name|${params.data.name}}` + '\n' + `{percentValue|${params.data.percentValue}%}`},rich: {name: {fontSize: 28,},percentValue: {fontSize: 16,}},}} else if (Number(item.value) / 100 > 80 && Number(item.value) / 100 <= 100 ) {item.label = {lineHeight: 25,formatter: function(params) {return `{name|${params.data.name}}` + '\n' + `{percentValue|${params.data.percentValue}%}`},rich: {name: {fontSize: 26,},percentValue: {fontSize: 14,}},}} else if (Number(item.value) / 100 > 60 && Number(item.value) / 100 <= 80 ) {item.label = {lineHeight: 25,formatter: function(params) {return `{name|${params.data.name}}` + '\n' + `{percentValue|${params.data.percentValue}%}`},rich: {name: {fontSize: 24,},percentValue: {fontSize: 12,}},}} else if (Number(item.value) / 100 > 40 && Number(item.value) / 100 <= 60 ) {item.label = {lineHeight: 25,formatter: function(params) {return `{name|${params.data.name}}` + '\n' + `{percentValue|${params.data.percentValue}%}`},rich: {name: {fontSize: 22,},percentValue: {fontSize: 12,}},}} else if (Number(item.value) / 100 > 20 && Number(item.value) / 100 <= 40 ) {item.label = {lineHeight: 20,formatter: function(params) {return `{name|${params.data.name}}` + '\n' + `{percentValue|${params.data.percentValue}%}`},rich: {name: {fontSize: 20,},percentValue: {fontSize: 12,}},}} else if (Number(item.value) / 100 > 15 && Number(item.value) / 100 <= 20 ) {item.label = {lineHeight: 20,formatter: function(params) {return `{name|${params.data.name}}` + '\n' + `{percentValue|${params.data.percentValue}%}`},rich: {name: {fontSize: 18,},percentValue: {fontSize: 12,}},}} else if (Number(item.value) / 100 > 10 && Number(item.value) / 100 <= 15 ) {item.label = {lineHeight: 18,formatter: function(params) {return `{name|${params.data.name}}` + '\n' + `{percentValue|${params.data.percentValue}%}`},rich: {name: {fontSize: 16,},percentValue: {fontSize: 12,}},}} else if (Number(item.value) / 100 > 5 && Number(item.value) / 100 <= 10 ) {item.label = {lineHeight: 18,formatter: function(params) {return `{name|${params.data.name}}` + '\n' + `{percentValue|${params.data.percentValue}%}`},rich: {name: {fontSize: 14,},percentValue: {fontSize: 10,}},}} else if (Number(item.value) / 100 > 0 && Number(item.value) / 100 <= 5 ) {item.label = {lineHeight: 10,formatter: function(params) {return `{name|${params.data.name}}` + '\n' + `{percentValue|${params.data.percentValue}%}`},rich: {name: {fontSize: 10,},percentValue: {fontSize: 8,}},}}})},}