echarts的tooltip提示内容过多分列显示及自定义图例
效果图
效果图描述
tooltip内容太多，超出图表的显示区域，导致显示不全
代码
<template>
<div class="chart_box">
<ChartBar :option="options"></ChartBar>
</div>
</template>
<script>
import lodash from "lodash";
import { ChartBar } from "_c/charts";
export default {
components: {
ChartBar
},
props: ["chartsList"],
watch: {
chartsList: function () {
this.getData();
}
},
data () {
return {
legendData: [], // 自定义图例数据
options: {
legend: {
show: true,
icon: "circle",
itemGap: 15,
padding: [0, 40, 0, 40],
data: [],
bottom: 'bottom',
formatter: (name) => {
let data = this.legendData;
let target;
for (let i = 0; i < data.length; i++) {
if (data[i].name === name) {
target = data[i].value;
}
}
let arr = [
'{a|' + name + '}',
'{b|' + target + '}',
'{c|' + '万}'
]
return arr.join('')
},
textStyle: {
rich: {
a: {
fontSize: 12,
color: '#999',
},
b: {
fontSize: 14,
padding: [0, 0, 0, 5],
},
c: {
fontSize: 12
}
}
}
},
tooltip: {
trigger: 'axis',
formatter: function (params) { // 提示内容太多隔行显示内容
let astr = ''
params.forEach((ele, index) => {
astr += `
${index % 2 === 0 ? 'width: 62%;' : 'width: 38%;'}float:left;">
${ele.color};border-radius: 10px;">
${ele.seriesName}: ${ele.data}
`
})
const b = '' + astr + ''
return b
},
position: function (point, params, dom, rect, size) {
return [point[1], 0]
}
},
grid: {
left: '3%',
right: '4%',
bottom: '25%',
top: '10%',
containLabel: true
},
xAxis: {
type: 'category',
data: [],
axisTick: {
show: false
},
axisLabel: {
show: true,
interval: 0,
rotate: 45,
color: '#000',
borderWidth: 10, // 加边框，解决最后一个文字加粗加黑问题
borderColor: '#fff', // 背景色
}
},
yAxis: {
minInterval: 1,
name: '万元',
axisLabel: {
color: '#333'
},
nameTextStyle: {
color: '#333'
}
},
color: ['#1fa776', '#f6b239', '#1fb8f1', '#56097a', '#fb7293', '#32c5e9', '#fb7293', '#e062ae', '#e690d1', '#e7bcf3', '#9d96f5', '#8378ea', '#96bfff', '#859e41', '#9e7341', '#78419e', '#9e416d', '#414c9e'],
series: []
}
}
},
methods: {
getData () {
let data = this.chartsList;
console.log(data, '...ii')
if (!lodash.isEmpty(data)) {
this.options.legend.data = data.legendData;
this.legendData = data.legendData;
// data.legend.length > 8 ? this.options.grid.top = '35%' : this.options.grid.top = '30%';
this.options.xAxis.data = data.xAxis;
let arr = [...data.data, data.zj];
arr.map((item, index) => {
if (index < arr.length - 1) {
item.type = "bar";
item.stack = '总量';
item.barWidth = 15;
} else {
item.type = "line";
}
return item;
})
this.options.series = arr;
}
}
},
}
</script>
<style lang="less" scoped>
.chart_box {
width: 100%;
height: 400px;
padding-bottom: 20px;
}
</style>