最近在学习vue3，仿antd提供的admin pro做，图形我是选用的echarts来绘制，做的过程中发现我在绘制雷达图的时候，tooltip可以正常显示，但是折线图和柱状图中的tooltip一直不能显示，记录下这个问题和解决办法，但还不明白为啥，有明白的大牛请教教我
先来上雷达图吧
Radar.vue
<template>
<div ref="container"></div>
</template>
<script lang="ts" setup>
import { onMounted, ref, onUnmounted } from "vue";
import * as echarts from 'echarts';
const props = defineProps({
echartsRadar: {
type: Object,
required: true }});
const container = ref(null);
const chart = ref<any>(null);
const resizeNamespace = '' + Date.now();
onMounted(() => {
initChart();
renderChart();
});
onUnmounted(() => {
relieve();
});
const initChart = () => {
chart.value = echarts.init(container.value);
window.addEventListener(`resize.${resizeNamespace}`, function () {
chart.value.resize();
});
}
const relieve = () => {
window.removeEventListener(`resize.${resizeNamespace}`, function () {
chart.value.resize();
});
if (chart.value) {
chart.value.dispose();
}
}
const renderChart = () => {
const option = {
tooltip: {
show: true,
},
legend: {
show: false,
data: [...props.echartsRadar.legend]
},
radar: {
indicator: [...props.echartsRadar.indicator],
splitArea: {
show: false,
},
axisLine: { //指向外圈文本的分隔线样式
lineStyle: {
color: '#eaeaea',
type: 'dashed'
}
},
splitLine: {
lineStyle: {
color: '#eaeaea', // 分隔线颜色
width: 1,
}
},
axisName: {
show: false
}
},
series: [
{
name: props.echartsRadar.name,
type: 'radar',
data: [...props.echartsRadar.seriesData],
}
]
};
chart.value.setOption(option);
}
</script>
<style lang="less" scoped>
div {
width: 100%;
height: 100%;
}
</style>
<radar :echartsRadar="radarData" />
const radarData = {
"name":"XX 指数",
"indicator":[
{
"name":"引用"
},
{
"name":"口碑"
},
{
"name":"产量"
},
{
"name":"贡献"
},
{
"name":"热度"
}
],
"legend":[
"个人",
"团队",
"部门"
],
"seriesData":[
{
"name":"个人",
"value":[
10,
8,
4,
5,
7
]
},
{
"name":"团队",
"value":[
3,
9,
6,
3,
1
]
},
{
"name":"部门",
"value":[
4,
1,
6,
5,
7
]
}
]
}
这里把echarts 实例赋值给 ref 响应式对象const chart = ref<any>(null);
tooltip完全能正常显示，但是在折线图和柱状图中就不行了，tooltip完全显示不出来，需要将echarts实例赋值给一个普通变量。
再来上折线图和柱状图吧
<template>
<div ref="container"></div>
</template>
<script lang="ts" setup>
import { onMounted, ref, onUnmounted } from "vue";
import * as echarts from 'echarts';
const props = defineProps({
echartsLine: {
type: Object,
required: true
}});
const container = ref(null);
let chart: any = null;
const resizeNamespace = '' + Date.now();
onMounted(() => {
initChart();
renderChart();
});
onUnmounted(() => {
relieve();
});
const initChart = () => {
chart = echarts.init(container.value);
window.addEventListener(`resize.${resizeNamespace}`, function () {
chart.resize();
});
}
const relieve = () => {
window.removeEventListener(`resize.${resizeNamespace}`, function () {
chart.resize();
});
if (chart) {
chart.dispose();
}}
const renderChart = () => {
const option = {
grid: {
top: 0,
bottom: 0,
left: 0,
right: 0,
containLabel: false,
},
color: ['#B78FED'],
tooltip: {
trigger: 'axis',
},
xAxis: {
type: 'category',
boundaryGap: false,
data: [...props.echartsLine.axisData],
axisLine: {
show: false,
}
},
yAxis: {
type: 'value',
axisLabel: {
show: false,
},
axisLine: {
show: false,
},
splitLine: {
show: false,
},
max: Math.max(...props.echartsLine.seriesData) + 10,
},
series: [
{
name: props.echartsLine.name,
type: 'line',
data: [...props.echartsLine.seriesData],
areaStyle: {},
lineStyle: {
width: 0
},
showSymbol: false,
smooth: true,
}
]
};
chart.setOption(option);
}
</script>
<style lang="less" scoped>
div {
width: 100%;
height: 100%;
}
</style>
<template>
<div ref="container"></div>
</template>
<script lang="ts" setup>
import { onMounted, ref, onUnmounted } from "vue";
import * as echarts from 'echarts';
const props = defineProps({
echartsBar: {
type: Object,
required: true
}
});
const container = ref(null);
let chart: any = null;
const resizeNamespace = '' + Date.now();onMounted(() => {
initChart();
renderChart();
});
onUnmounted(() => {
relieve();
});
const initChart = () => {
chart = echarts.init(container.value);
window.addEventListener(`resize.${resizeNamespace}`, function () {
chart.resize();
});
}
const relieve = () => {
window.removeEventListener(`resize.${resizeNamespace}`, function () {
chart.resize();
});
if (chart) {
chart.dispose();
}}
const renderChart = () => {
const option = {
grid: {
top: 0,
bottom: 0,
left: 0,
right: 0,
containLabel: false,
},
color: ['#3AA1FF'],
tooltip: {
show: true,
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
xAxis: {
type: 'category',
data: [...props.echartsBar.axisData],
axisLine: {
show: false,
}
},
yAxis: {
type: 'value',
axisLabel: {
show: false,
},
axisLine: {
show: false,
},
splitLine: {
show: false,
},
max: Math.max(...props.echartsBar.seriesData) + 10,
},
series: [
{
name: props.echartsBar.name,
type: 'bar',
data: [...props.echartsBar.seriesData],
}
]
};
chart.setOption(option);
}
</script>
<style lang="less" scoped>
div {
width: 100%;
height: 100%;
}
</style>
<Line :echartsLine="visitLine" />
{
"name":"访问量",
"axisData":[
"2023-11-20",
"2023-11-21",
"2023-11-22",
"2023-11-23",
"2023-11-24",
"2023-11-25",
"2023-11-26",
"2023-11-27",
"2023-11-28",
"2023-11-29"
],
"seriesData":[
11,
17,
6,
0,
13,
3,
11,
14,
1,
1
]
}
<Bar :echartsBar="countBar" />
{
"name":"支付笔数",
"axisData":[
"2023-11-20",
"2023-11-21",
"2023-11-22",
"2023-11-23",
"2023-11-24",
"2023-11-25",
"2023-11-26",
"2023-11-27",
"2023-11-28",
"2023-11-29"
],
"seriesData":[
11,
89,
65,
50,
9,
40,
86,
63,
40,
100
]
}
这里如果把echarts实例赋值给ref响应式对象，tooltip怎么调整都显示不出来，只能把echarts 实例赋值给 普通变量let chart: any = null;tooltip才显示正常。
