echarts 矩阵树图treemap

最新推荐文章于 2025-02-06 16:10:38 发布

盐多碧咸。。

最新推荐文章于 2025-02-06 16:10:38 发布

阅读量627

点赞数 5

本文链接：https://blog.csdn.net/Z18834071903/article/details/143227544

版权

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

直接上代码：

html:

 <div
    id="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,
              }
            },
          }
        }
      })

    },
  }