项目中使用Echarts图表treemap制作

Examples - Apache ECharts

页面结构

<template>
  <div class="echart-chart" :id="id"></div>
</template>
<script>
import { getOption } from './chartOption';
export default {
  name: 'TreeMapChart',
  props: ['id', 'data', 'type'],
  data() {
    return {
      setTimeoutId: null
    };
  },
  watch: {
    data: {
      handler() {
        if (this.chart) {
          this.setOption();
        }
      },
      deep: true,
      immediate: false
    },
    type: {
      handler() {
        if (this.chart) {
          this.setOption();
        }
      },
      deep: true,
      immediate: false
    }
  },
  methods: {
    initChart() {
      this.chart = window.echarts.init(document.getElementById(this.id));
    },
    setOption() {
      this.chart.setOption(getOption(this.data, this.id, this.type), true);
    },
    resize() {
      this.setTimeoutId && clearTimeout(this.setTimeoutId);
      setTimeout(() => {
        this.chart && this.chart.resize();
      }, 500);
    }
  },
  created() {
    window.addEventListener('resize', this.resize);
  },
  async mounted() {
    // setTimeout(() => {
    await this.$nextTick();
    this.initChart();
    this.setOption();
    // }, 300)
  },
  unmounted() {
    this.chart && this.chart.dispose();
    window.removeEventListener('resize', this.resize);
  }
};
</script>
<style lang="less" scoped>
.echart-chart {
  width: 100%;
  height: 100%;
}
</style>

参数配置

涨跌幅 负的是绿的，正的是红的然后根据颜色深浅表现出来程度

遍历数据加 itemStyle: { // 这里配置每个块的颜色
color:'blue'
},用rgba(r,g,b,a) 把透明度设置在0.3~1 之间，根据数值大小自己设置

import { mockData } from './mock.js';
const formatUtil = window.echarts.format;
import { formatValue, formatNumber } from '@/views/Prices/Hooks/useUtils.js';

// 给每一项添加itemStyle 实现每个单独设置样式
const getData = (data) => {
  return data.map((item) => {
    return {
      ...item,
      itemStyle: {
        borderWidth: 0,
        gapWidth: 2,
        color: item?.flag >= 0 ? '#4DD7A1' : '#E87B7B'
      }
    };
  });
};

export function getOption(diskData, id, type) {
  if (!diskData) {
    diskData = mockData;
  }
  diskData = getData(diskData);
  console.log('diskData', diskData);
  return {
    title: [
      {
        show: false
      }
    ],
    tooltip: {
      //弹出框配置
      formatter: function (info) {
        let value = info.value;
        let name = info.name;
        // if (id == 'treeMapVolume') {
        //   let tip = `<div class="tree-map-tooltip">
        //     <div>${name}</div>
        //     成交量: <span>$${formatUtil.addCommas(value)}亿</span>
        //   </div>`;
        //   return tip;
        // }
        let tip;
        switch (type) {
          case 1:
            tip = `<div class="tree-map-tooltip">
            <div>${name}</div>
            成交量: <span>$${formatNumber(value)}</span>
          </div>`;
            break;
          case 2:
            tip = `<div class="tree-map-tooltip">
            <div>${name}</div>
            价格变化: <span>$${formatUtil.addCommas(value)}%</span>
          </div>`;
            break;
          case 3:
            tip = `<div class="tree-map-tooltip">
            <div>${name}</div>
            爆仓金额: <span>$${formatUtil.addCommas(value)}万</span>
          </div>`;
            break;
          case 4:
            tip = `<div class="tree-map-tooltip">
            <div>${name}</div>
            持仓: <span>$${formatUtil.addCommas(value)}亿</span>
          </div>`;
            break;
          default:
            break;
        }
        return tip;
      },
      backgroundColor: 'rgba(0,0,0,0.9)',
      padding: 0,
      borderWidth: 0,
      textStyle: {
        color: '#fff'
      }
    },
    series: [
      {
        name: 'All',
        type: 'treemap',
        roam: false,
        nodeClick: false,
        width: '100%',
        height: '100%',
        label: {
          show: true,
          position: ['5%', '30%'],
          formatter: (info) => {
            if (id == 'treeMapVolume') {
              let tip = [
                `{nameClass${info.dataIndex}|${info.name}}`,
                `{valueClass${info.dataIndex}|$${formatNumber(info.value)}}`
              ].join('\n');
              return tip;
            }
          },
          rich: {
            //块内文字样式
            nameClass1: {
              fontSize: 36,
              lineHeight: 50,
              fontWeight: 600
            },
            nameClass2: {
              fontSize: 27,
              fontWeight: 600
            },
            nameClass3: {
              fontSize: 18,
              fontWeight: 600
            },
            nameClass4: {
              fontSize: 12,
              fontWeight: 600
            },
            valueClass1: {
              fontSize: 20,
              fontWeight: 400
            },
            valueClass2: {
              fontSize: 16,
              fontWeight: 400
            }
          }
        },
        itemStyle: {
          borderColor: '#fff'
        },
        levels: [
          {
            color: ['#4DD7A1', '#E87B7B', '#777F8D'],
            itemStyle: {
              borderWidth: 0,
              gapWidth: 2,
              borderColor: '#000'
            }
          }
        ],
        data: diskData,
        breadcrumb: {
          show: false //隐藏底部导航条
        }
      }
    ]
  };
}

模拟数据

export const mockData = [
  {
    value: 345,
    name: 'BC',
    flag: 1
  },
  {
    value: 117,
    name: 'EH',
    flag: 1
  },
  {
    value: 36,
    name: 'TB',
    flag: 1
  },
  {
    value: 31,
    name: 'WD',
    flag: 1
  },
  {
    value: 24,
    name: 'SL',
    flag: 0
  },
  {
    value: 22,
    name: 'XP',
    flag: -1
  },
  {
    value: 15,
    name: 'BZ',
    flag: -1
  },
  {
    value: 10,
    name: 'BH',
    flag: -1
  }
];

使用

<TreeMapChart :id="treeMapID" :data="treeMapData" :type="isCheck" />

import TreeMapChart from '@/components/PricesCharts/TreeMapChart';
const isCheck = ref(1);
const treeMapID = ref('treeMapVolume');
const treeMapData = ref(null);

---

参考 

const option = {
    tooltip: {},
    series: [
        {
            name: 'test treemap',
            type: 'treemap',
            visualMin: -100,    //决定颜色的最小值
            visualMax: 100,     //决定颜色的最大值
            visualDimension: 1, //决定颜色看 value 的哪一个值, 1=> 第2个值
            levels: [
                {                                           //第一层
                    color: ['#942e38', '#aaa', '#269f3c'],  //颜色
                    colorMappingBy: 'value',                //用value来决定颜色
                    itemStyle: {
                        borderWidth: 2,
                        borderColor: '#333',
                        gapWidth: 1
                    }
                },
                {                                           //第二层 => 可设定不同颜色
                    color: ['#942e38', '#aaa', '#269f3c'],
                    colorMappingBy: 'value',
                    itemStyle: {
                        borderWidth: 1,
                        borderColor: '#333',
                        gapWidth: 1
                    }
                },
            ],
            data: [
                {
                    name: 'A',
                    value: [15, -35],                       // 第一层: 第一个值决定区块大小，第二个值决定颜色
                    children: [
                        {
                            name: 'A01',
                            value: [10, -70]                // 第二层: 第一个值决定区块大小，第二个值决定颜色
                        },
                        {
                            name: 'A02',
                            value: [3, 20]
                        },
                        {
                            name: 'A03',
                            value: [2, 60]
                        }
                    ]
                },
                {
                    name: 'B',
                    value: [10, 47],
                    children: [
                        {
                            name: 'B01',
                            value: [5, 100]
                        },
                        {
                            name: 'B02',
                            value: [4, -20]
                        },
                        {
                            name: 'B03',
                            value: [1, 50]
                        },
                    ]
                },
                {
                    name: 'C',
                    value: [10, 5],
                },
            ]
        }
    ]
};

注意可设定不同层用不同颜色

color: ['#942e38', '#aaa', '#269f3c'],  //颜色
colorMappingBy: 'value',                //用value来决定颜色

然后

visualMin: -100,    //决定颜色的最小值
visualMax: 100,     //决定颜色的最大值
visualDimension: 1, //决定颜色看 value 的哪一个值, 1=> 第2个值

以下的值为例：第一个值决定区块的大小，第二个值决定颜色(因为 visualDimension= 1)

然后值为 -50 ⇒ 0 是灰色(#aaa)，-100是暗红色(#942e38)，所以 -50 是浅红色

name: 'A',
value: [10, -50],