fire-mh/src/components/disk/index.vue

<template>
  <div ref="disk" style="width: 130%; height: 100%;margin-left:-15%;margin-top:0%"></div>
</template>

<script>
export default {
  props: {
    dataMap: { type: Object, default: () => [] },
  },
  data() {
    return {};
  },
  mounted() {
    this.getData();
  },
  watch: {
    dataMap(val) {
      this.getData(val);
    },
  },
  methods: {
    getData() {
      let that = this
      let dataMap = this.dataMap;
      let echartsMap = this.$echarts.getInstanceByDom(this.$refs.disk);
      if (echartsMap == null) {
        echartsMap = this.$echarts.init(this.$refs.disk);
      }
      echartsMap.setOption({
        // color:["#000","#fff"],
        tooltip: {
          formatter: function (info) {
            return [
              '<div class="tooltip-title">' +
              info.data.name +
              '</div>',
              '设备总数: ' + info.data.value + '</br>' +
              '在线数: ' + info.data.lineCount + '</br>' +
              '在线率: ' + info.data.lineRate  + '%' + '</br>'
            ].join('');
          }

        },
        series: [
          {
            name: '物联网设备',
            type: 'treemap',
            visibleMin: 800,
            label: {
              show: true,
              formatter: '{b}'
            },
            itemStyle: {
              borderColor: '#fff'
            },
            levels: this.getLevelOption(),
            data: dataMap
          }
        ]
      });
      echartsMap.on('click', function (param) { 
        that.$emit("echartsClick",param.data.deviceTypeCode)
      });
    },
    getLevelOption() {
      return [
        {
          itemStyle: {
            borderWidth: 0,
            gapWidth: 5
          }
        },
        {
          itemStyle: {
            gapWidth: 1
          }
        },
        {
          colorSaturation: [0.35, 0.5],
          itemStyle: {
            gapWidth: 1,
            borderColorSaturation: 0.6
          }
        }
      ];
    },
    
    resize() {
      //       echarts.init(this.$refs.echartD).resize();
    },
  },
};
</script>

<style scoped></style>