echart之堆叠柱状图自定义tooltip内容兼tooltip悬浮位置调整

然而echart堆叠柱状图的渲染机制是柱状图从下往上的，所以第一条数据是排在最底层的，即银票-电票-白名单是第一条数据，所以排在最底下了，那么把数据反过来不就行了吗，没错，你真聪明，但是你万万没想到的是tooltip内容渲染和柱状图渲染不一样。。。。那我们接下来看看代码吧

非自定义的的tooltip内容为下图所示：

自定义之后的tooltip内容：

<template>
    <div class="library_balance">
        <div class="chart_top library_balance_tab">
<!--            <TabControl :titles="titles" @tabClick="libraryTab"> </TabControl>//这是余额分布和到期分布的选项卡-->
        </div>

        <div class="chart_bottom library_balance_chart">
            <BarChart
                    :chartLegend="billData[libraryCurrentType].legend"
                    :chartArea="billData[libraryCurrentType].area"
                    :chartSeries="billData[libraryCurrentType].series"
                    :chartName="billData[libraryCurrentType].chartName"
                    :colors="colors"
            ></BarChart>
        </div>
    </div>
</template>

<script>
    import BarChart from "./BarChart.vue";  //引入BarChart文件
    // import { getPjInfo } from "@/api/home/home.js";//这是封装的请求，根据自身情况修改
    export default {
        name: "LibraryBalance",
        components: {
            BarChart,
        },
        data() {
            return {
                //在库余额分布。
                titles: [],
                libraryCurrentType: "balance",
                colors: ["#e7b52c","#8cbb4b","#133891","#ea2828","#9a5eee"],
                billData: {
                    // 票据的数据
                    balance: {
                        area: [],
                        legend: [],
                        series: [],
                    },
                    bill: {
                        area: [],
                        legend: [],
                        series: [],
                    },
                },
            };
        },
        watch: {
            libraryCurrentType(val) {
                this.libraryCurrentType = val;
                this.init(this.qyCd, this.bkCd, this.industry);
            },

        },
        created() {
            this.init("","","");
        },
        methods: {
            init(qyCd, bkCd, industry){
                console.log(qyCd, bkCd, industry)
                this.titles = [];
                // getPjInfo(qyCd, bkCd, industry).then(({data}) => {
                   let  data = JSON.parse('下面份假数据')
                    if( data.dat[0] && data.dat[0].series.length > 0){
                        this.billData.balance.series = [];
                        data.dat.forEach((item, idx) => {
                            this.titles.push(item.dateName);
                            if (idx === 0) {
                                this.billData.balance.area = item.area;
                                this.billData.balance.legend = item.legend;
                                this.billData.balance.chartName = item.dateName;
                                this.billData.balance.series = item.series.reverse();
                            } else if (idx === 1) {
                                this.billData.bill.area = item.area;
                                this.billData.bill.legend = item.legend;
                                this.billData.bill.chartName = item.dateName;
                                this.billData.bill.series = item.series.reverse();

                            }
                        });
                    }
                // })
            },

            //在库余额分布。
            libraryTab(index) {
                switch (index) {
                    case 0:
                        this.libraryCurrentType = "balance";
                        break;
                    case 1:
                        this.libraryCurrentType = "bill";
                        break;
                }
            },
        },
    };
</script>
<style  lang="scss" scoped>
    /*@import "@/assets/css/homeCom";*/
    .library_balance {
        position: relative;
        height: 100%;
        width: 100%;
        background: #fff;
        overflow: hidden;

        ::v-deep .tab_control {
            height: 40px;
            line-height: 40px;
            width: 100%;
            // border-bottom: 1px solid #ebeef0;

            .tab_item {
                width: 50%;

                span {
                    padding: 0;
                    padding: 0 30px;
                    display: block;
                    height: 40px;
                    line-height: 40px;
                    border: none;
                    border-bottom: 2px solid transparent;
                }
            }
            .tab_item_active {
                span {
                    border: none !important;
                    border-bottom: 2px solid #e82323 !important;
                }
            }
        }
        .library_balance_chart {
            height: 90%;
        }
    }

</style>

BarChart 文件

<!-- new 在库余额 柱状图 -->
<template>
  <div class="bar_chart" ref="bar_chartP">
    <div
      :id="barChart"
      class="chart"
      ref="Echart"
      :style="{height:  boxHeight  + 'px', }"
    ></div>
  </div>
</template>

<script>
export default {
  name: "BarChart",
  components: {},
  props: {
    chartLegend: {
      type: Array,
      default() {
        return [];
      },
    },
    chartArea: {
      type: Array,
      default() {
        return [];
      },
    },
    chartName:{
      type:String,
      default:''
    },
    chartSeries: {
      type: Array,
      default() {
        return [];
      },
    },
    colors: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      barChart: "barChart",
    };
  },
  computed: {
    boxHeight: function () {
      var winHeight = $(document).height() - 100;
      // console.log("winHeight", winHeight);
      let height;
      if (winHeight > 820) {
        height = winHeight * 0.405;
      } else if (winHeight > 640) {
        height = winHeight * 0.376;
      }else if (winHeight > 400) {
        height = winHeight * 0.345;
      }
      return height;
    },
  },

  watch: {
    chartLegend() {
      this.init();
    },
    chartArea() {
      this.init();
    },
    chartSeries() {
      this.init();
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      let myEchart;
      let domEcharts = this.$refs.Echart;
      if (!domEcharts) return;
      let width = this.$refs.bar_chartP.clientWidth + "px";

      domEcharts.style.width = width + "px";
      myEchart = this.$echarts.init(domEcharts);
      
      let option = {
        tooltip: {
          //显示 一组数据 当前拐点的数据
          trigger: "axis",
          triggerOn:'mousemove',
          //提示框的悬浮位置
          position:(point, params, dom, rect, size)=>{
            var x = point[0]; //
            var y = point[1];
            var viewWidth = size.viewSize[0];
            var viewHeight = size.viewSize[1];
            var boxWidth = size.contentSize[0];
            var boxHeight = size.contentSize[1];
            var posX = 0; //x坐标位置
            var posY = 0; //y坐标位置
            if (x < boxWidth) {
              //左边放不开
              posX = 5;
            } else {
              //左边放的下
              posX = x - boxWidth;
            }

            if (y < boxHeight) {
              //上边放不开
              posY = 5;
            } else {
              //上边放得下
              posY = y - boxHeight;
            }
            return [posX, posY];
          },
          //自定义提示框内容
          formatter:(data)=>{
            let str = data[0].axisValue + "</br>"
            data.reverse().forEach(item=>{
              str = str +item.marker+ item.seriesName + " : " + item.data + "</br>"
            })
            return str
          },
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效，sahdow为阴影，鼠标放下去的时候显示后面的阴影
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        color: this.colors,
        legend: {
          y: "3%",
          x: "13%",
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            fontSize: 12,
            color: "#73747E",
            padding: [3, 0, 0, 0],
          },
          data: this.chartLegend,
        },
        grid: {
          top: "13%",
          left: "14%",
          right: "5%",
          bottom: "13%",
        },
        xAxis: {
          type: "category",
          axisLabel: {
            fontSize: 14,
            color: "#73747E", //x轴的文本颜色
          },
          axisLine: {
            lineStyle: {
              color: "#96A4F4",
            },
            width: 5,
          },
          axisTick: {
            show: false,
          },
          data: this.chartArea,
        },
        yAxis: {
          name: "单位：万",
          nameTextStyle: {
            padding: [0, 0, -5, -60], // 四个数字分别为上右下左与原位置距离
            color: "#808080",
          },
          type: "value",
          axisLabel: {
            fontSize: 14,
            color: "#808080", //x轴的文本颜色
          },
          axisLine: {
            lineStyle: {
              color: "#96A4F4",
            },
            width: 5,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            lineStyle: {
              color: "rgba(150, 164, 244, 0.3)", 
            },
          },
        },
        series: this.chartSeries,
      };

      myEchart.clear();
      myEchart.setOption(option, true);
    },
  },
};
</script>
<style  lang="scss" scoped>
.bar_chart {
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: #fff;
}
</style>

以下是请求的数据格式

}
	"code":0,
	"msg":"SUCCESS",
	"dat":[
			{
				"dateName":"票据余额分布",
				"area":[
					"2021/01",
					"2021/02",
					"2021/03",
					"2021/04",
					"2021/05",
					"2021/06"
				],
				"legend":[
					"银票-电票-白名单",
					"银票-电票-灰名单",
					"商票-外部商票",
					"商票-T票通"
				],
				"series":[
				{
					"name":"银票-电票-白名单",
					"type":"bar",
					"stack":"总量",
					"barWidth":"30%",
					"data":[
						"34491.935447",
						"239477.876135",
						"329530.313815",
						"250842.590862",
						"240756.299352",
						"329530.313815"
					]
				},
				{
					"name":"银票-电票-灰名单",
					"type":"bar",
					"stack":"总量",
					"barWidth":"30%",
					"data":[
						"22247.462560",
						"23782.193748",
						"27671.432260",
						"27671.432260",
						"18956.467857",
						"29795.279960"
					]
				},
				{
					"name":"商票-外部商票",
					"type":"bar",
					"stack":"总量",
					"barWidth":"30%",
					"data":[
						"0.000000",
						"11638.673922",
						"12116.369136",
						"13595.203057",
						"1492.830316",
						"22116.369136"
					]
				},
				{
					"name":"商票-T票通",
					"type":"bar",
					"stack":"总量",
					"barWidth":"30%",
					"data":[
						"64336.933789",
						"119389.656818",
						"120289.841403",
						"77597.828525",
						"95619.775893",
						"122099.240933"
					]
				}
			]
	}
]
}