echart之堆叠柱状图自定义tooltip内容兼tooltip悬浮位置调整
echart之堆叠柱状图自定义tooltip内容兼tooltip悬浮位置调整
由于业务要求如下：
（1）排序：根据柱状组成结构，从上到下保持一致，银票-电票-白名单、银票-电票-灰名单、商票-外部商票、商票-T票通
（2）标签：根据柱状组成结构，从左到右，银票-电票-白名单、银票-电票-灰名单、商票-外部商票、商票-T票通
然而echart堆叠柱状图的渲染机制是柱状图从下往上的，所以第一条数据是排在最底层的，即银票-电票-白名单是第一条数据，所以排在最底下了，那么把数据反过来不就行了吗，没错，你真聪明，但是你万万没想到的是tooltip内容渲染和柱状图渲染不一样。。。。那我们接下来看看代码吧
非自定义的的tooltip内容为下图所示：
自定义之后的tooltip内容：
<template>
<div class="library_balance">
<div class="chart_top library_balance_tab">
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 文件
<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 + ""
data.reverse().forEach(item=>{
str = str +item.marker+ item.seriesName + " : " + item.data + ""
})
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"
]
}
]
}
]
}