heatChart.vue

<template>
  <div>
    <basic ref="basic" :chartId="chartId" :chartData="chartData"></basic>
  </div>
</template>
<script>
import mixin from "./mixin";
import _ from "underscore";
export default {
  mixins: [mixin],
  data() {
    return {};
  },
  methods: {
    /**
     * 预处理option参数
     * */
    preChartData(cdata) {
      return cdata;
    },
    /**
     * 处理option参数
     * */
    dealChartData(optionFormat) {
      let yAxisData = optionFormat.series.map((item) => item.name);
      let seriesData = [],
        yIndex = null,
        maxArr = [],
        onedimen = [],
        maxNum = null,
        legendShow = false,
        {
          hideVisualMap = false,
          visualColor,
          dateSort = false,//是否按周进行排序
          perUnit = painter.$t('format.perTime'),
          hidexAxis = false,
          _grid,
          _yAxis,
          isObjValue = false,
        } = optionFormat.otherConf;
      /*********格式化自定义的 y 轴*****************/ 
      if(dateSort){
          yAxisData = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];
          if (window.localStorage.getItem("lang") == "en_US") {
              yAxisData = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
          }
      }
      /******************************************/
      optionFormat.series.forEach((item, index) => {
        yIndex = yAxisData.indexOf(item.name);
        if (typeof item.data[0] == "number") {
          maxArr.push(item.data);
        } else {
          maxArr.push(_.pluck(item.data, "value"));
        }
        item.data.forEach((dataItem, dataIndex) => {
          seriesData.push([parseInt(yIndex), dataIndex, dataItem || "-"]);
        });
        item.type = "heatmap";
        item.itemStyle = {
          borderColor: "#fff",
          borderWidth: isObjValue ? 1 : 0,
          emphasis: {
            shadowBlur: 10,
            shadowColor: "rgba(0, 0, 0, .5)",
          },
        };
        item.label = {
          normal: {
            show: true,
            color: "#444",
          },
        };
      });
      optionFormat.legend.show = legendShow;
      optionFormat.xAxis.show = !hidexAxis;
      optionFormat.xAxis.nameTextStyle = {
        color: "#444",
        fontSize: 12,
      };
      optionFormat.xAxis.axisLabel = {
        interval: 0,
      };
      optionFormat.xAxis.splitArea = {
        show: true,
      };
      optionFormat.xAxis.axisLine = {
        show: false,
        lineStyle: {
          color: "#535353",
        },
      };

      seriesData = seriesData.map(function (item) {
        return [item[1], item[0], item[2] || "-"];
      });
      let countVal = 0 ;
      if (maxArr.length) {
        countVal = _.reduce(maxArr,(count,num)=>count+parseInt(num),0)
        onedimen = maxArr.join(",").split(",");
        maxNum = Math.max.apply(null, onedimen);
      }
      let heatNameList = {};

      seriesData.forEach((item) => {
        if (typeof item[2] != "number") {
          heatNameList["k_" + item[0] + "_" + item[1]] = item[2].name;
          item[2] = item[2].value;
        }
      });
      // 覆盖格式化后的`option`数据 按需修改
      let coverTemp = {
        grid: {
          left: 60,
          right: 0,
          top: 5,
          bottom: hideVisualMap ? 20 : 52,
        },
        toolbox: {
          show: false,
          showTitle: false,
          feature: {
            saveAsImage: {
              icon: this.downloadIcon,
            },
          },
          top: 0,
          right: 0,
        },
        yAxis: {
          type: "category",
          splitArea: {
            show: true,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "#535353",
            },
          },
          data: yAxisData,
        },
        visualMap: {
          show: !hideVisualMap,
          min: 0,
          max: 200,
          calculable: true,
          orient: "horizontal",
          left: "left",
          bottom: -10,
          itemWidth: 15,
          color: visualColor || ["#0068FF", isObjValue ? "#78adfd" : "#cfe4ff"],
        },
      };
      coverTemp.visualMap.max = maxNum;
      _grid && (coverTemp.grid = _grid);
      const _that = this;
      _yAxis && (coverTemp.yAxis = { ...coverTemp.yAxis, ..._yAxis });
      let option = JSON.parse(
        JSON.stringify({ ...optionFormat, ...coverTemp })
      );
      option.series.forEach((item) => {
        item.data = [];
        item.data = seriesData.splice(0, optionFormat.xAxis.data.length); // 多次裁剪 seriesData 数组
        item.label = {
          show: true,
          color: isObjValue ? "#fff" : "#444",
          formatter(params) {
            if (isObjValue) {
              let percent = (params.value[2]*100/countVal).toFixed(2);
              return (
                heatNameList["k_" + params.value[0] + "_" + params.value[1]] +
                "\n\n" +
                percent+'%'+
                "\n\n"+
                _that.toThousands(params.value[2])+_that.$t('format.perNum')
                 
                //params.value[2]
              );
            }
            return  _that.toThousands(params.value[2]);
          },
        };
      });
      if (isObjValue) option.tooltip.show = false;
      option.tooltip.formatter = (params, ticket, callback) => {
        // let isYeTai = this.chartData.title.text == "业态关联" ? true : false;
        let xData = option.xAxis.data,
          yData = option.yAxis.data,
          htmls = "";
        htmls += `<div style="font-size:14px;height:31px;color:#333;border-radius:4px;line-height:31px;padding-left:15px; padding-right:15px; text-align: left; color: #0068FF;">${
          yData[params.value[1]]
        }</div><div><p style="font-size:13px;padding:4px 15px;color:"#444444"">${
          xData[params.value[0]]
        }：${painter.$t('iPage.averageheat')}<span style="color:#5093fa;margin-left:2px">${
          params.value[2]
        }${perUnit}</span></p></div>`;
        return htmls;
      };
      return option;
    },
  },
  created() {},
};
</script>
<style scoped>
</style>