enterChart.vue

<template>
  <div class="chart" :id="chartId" :chartType="chartType"></div>
</template>

<script>
// import echarts from 'echarts'
import echarts from "@/third-party/echart_lib";
import { optionFormatter } from "@/utils/dealChart";
import downloadIcon from "@/assets/img/export.png";
import resize from "../../../components/Charts/mixins/resize";
import i18n from "@/assets/i18n/i18n";

export default {
  name: "Charts",
  mixins: [resize],
  props: {
    chartId: {
      type: String,
      required: true,
    },
    chartType: {
      type: String,
      required: true,
    },
    chartgridop:{
       type: Object,
      default: () =>  {
          return {
          left: 100,
          right: 50,
          top: 56,
          bottom: 80,
          }
        }
    },
    chartData: {
      type: Object,
      default: () => {},
    },
  },


   watch: {
    chartData(val) {
        // draw chart
        if(val.xaxis){
          this.drawHeatmap(val)
        }
        
    }
  },
  data() {
    return {
      chart: null,
      downloadIcon: "image://" + downloadIcon,
      fontFamily:
        '"PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微软雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif',
    };
  },
  mounted() {
    this.initChart();
    // chartType: HeatMap
    if (!this.chartType) return;
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      // this.chart =
      //   echarts.getInstanceByDom(document.getElementById(this.chartId)) ||
      //   echarts.init(document.getElementById(this.chartId));
      this.chart = echarts.init(document.getElementById(this.chartId));
    },
    drawHeatmap(heatdata) {
      this.chart = echarts.init(document.getElementById(this.chartId));
      this.chart.showLoading("default", {
        text: "",
        color: "#409eff",
      });
      var xdata = heatdata.xaxis.data;
      var yOriginData = heatdata.series;
      var originData = JSON.parse(JSON.stringify(yOriginData));
      let maxArr = [];
      originData.map(ele => {
        ele.data.map(v=> {
          if (v instanceof Object) {
            maxArr.push(v.associationTrafficNum);
          } else {
            maxArr.push(v);
          }
        })
      })
      let rankWidths = "";
      if (window.outerWidth <= 1376) {
        rankWidths =
          document.getElementById(this.chartId).offsetWidth - 76 - 36;
      } else {
        rankWidths =
          document.getElementById(this.chartId).offsetWidth - 76 - 36 - 25;
      }
      //构建Y轴数据
      var ydata = [];
      yOriginData.map((ele) => {
        ydata.push(ele.name);
      });
      ydata.reverse();

      //构建serires
      var series = [];
      yOriginData.map((ele) => {
        let d = [];
        ele.type = "heatmap";
        ele.itemStyle = {
          emphasis: {
            shadowBlur: 10,
            shadowColor: "rgba(0, 0, 0, .5)",
          },
        };
        ele.label = {
          normal: {
            show: true,
            color: "#444",
          },
          emphasis: {
            show: true,
            fontSize: 12,
            textStyle: {
              color: "#666666",
            },
          },
        };
        ele.data.map((v, index) => {
          let yIndex = ydata.indexOf(ele.name);
          if (v instanceof Object) {
            d.push([parseInt(yIndex), index, v.associationTrafficNum]);
          } else {
            d.push([parseInt(yIndex), index, v || "-"]);
          }
        });
        ele.data = d.map(function (item) {
          return [item[1], item[0], item[2] || "-"];
        });
      });
      series = yOriginData;
      var option = {
        title:"",
        tooltip: {
          show: true,
          backgroundColor: "#fff",
          textStyle: {
            color: "#333333",
          },
          extraCssText: "box-shadow: 0px 0px 10px -4px rgba(3, 3, 3, .4)",
        },
        grid: this.chartgridop,
        toolbox: {
          show: false,
          showTitle: false,
          feature: {
            saveAsImage: {
              icon: this.downloadIcon,
            },
          },
          top: 0,
          right: 0,
        },
        xAxis: {
          type: "category",
          data: xdata,
          nameTextStyle: {
            color: "#444",
            fontSize: 12,
          },

          axisLabel: {
            interval:0,  
            rotate:40 
          },
          splitArea: {
            show: true,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#888",
            },
          },
        },
        yAxis: {
          type: "category",
          data: ydata,
          axisLabel: {
            interval:0,  
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            lineStyle: {
              color: "#EBEBEB",
            },
          },
          axisLine: {
            lineStyle: {
              color: "#888",
            },
          },

          splitArea: {
            show: true,
          },
        },
        visualMap: {
          min: 0,
          max: 10,
          calculable: true,
          orient: "horizontal",
          left: "left",
          bottom: -10,
          itemWidth: 15,
          show:false,
          color: ["#0068FF", "#fff"],
        },
        series: series,
      };
      let onedimen = maxArr.join(",").split(",");
      onedimen.map((ele, index) => {
        if (ele == "-") {
          onedimen.splice(index, 1);
        }
      });
      let maxNum = Math.max.apply(null, onedimen);
      option.visualMap.max = maxNum;
      let _this = this;
      option.tooltip.formatter = function (params, ticket, callback) {
        // if(!params.name) return;
        let yAxisArr = option.yAxis.data;
        let xAxisArr = option.xAxis.data;
        let curData = {};
        originData.map((ele) => {
          if (ele.name == yAxisArr[params.value[1]]) {
            curData = ele.data[params.value[0]];
          }
        });
        let startnum = 0,endnum = 0;
        if(_this.chartId == "entermonthHeatmap2") {
          startnum = curData.startFormatTrafficNum;
          endnum = curData.endFormatTrafficNum;
        } else {
          startnum = curData.startZoneTrafficNum;
          endnum = curData.endZoneTrafficNum;
        }
      
        let 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;">' +
          yAxisArr[params.value[1]] +
          ":" +
          startnum  +
          "</div><div>" +
          '<p style="font-size:13px;padding:4px 15px;color:"#444444"">' +
          xAxisArr[params.value[0]] +
          ":" +
          endnum +
          "</p>" +
          '<p style="font-size:13px;padding:4px 15px;color:"#444444"">关联客流 :' +
          params.value[2] +
          "</p>" +
          "</div>";
        return htmls;
      };
      this.chart.clear();
      this.chart.hideLoading();
      console.log('opi',option)
      this.chart.setOption(option,true);
    },
  },
};
</script>