echarts 解决tooltip显示框随鼠标移动，且显示不全问题_付月半子的博客-CSDN博客

一、解决tooltip显示框随鼠标移动，且显示不全问题
设置提示框位置随鼠标移动的代码如下：

size: 包括 dom 的尺寸和 echarts 容器的当前尺寸，例如：{contentSize: [width, height], viewSize: [width, height]}。

position: function (point, params, dom, rect, size) {
// 鼠标坐标和提示框位置的参考坐标系是：以echarts 容器的左上角那一点为原点，x轴向右，y轴向下
// 提示框位置
var x = 0; // x坐标位置
var y = 0; // y坐标位置

// 当前鼠标位置
var pointX = point[0];
var pointY = point[1];

// echarts 容器大小
// var viewWidth = size.viewSize[0];
// var viewHeight = size.viewSize[1];

// 提示框大小
var boxWidth = size.contentSize[0];
var boxHeight = size.contentSize[1];

// boxWidth > pointX 说明鼠标左边放不下提示框
if (boxWidth > pointX) {
x = pointX+5; // 此处需要判断 (pointX+5+boxWidth) < size.viewSize[0]
} else { // 左边放的下
x = pointX - boxWidth;
}

// boxHeight > pointY 说明鼠标上边放不下提示框
if (boxHeight > pointY) {
y = 5;
} else { // 上边放得下
y = pointY - boxHeight;
}

return [x, y];
}

二、echart如何禁止高亮
myChart.on(“mouseover”, function (params){

myChart.dispatchAction({
type: ‘downplay’
});
});

三、echarts大屏字体自适应的方法
const fontSize = res => {
const clientWidth =
window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
if (!clientWidth) return
const fontSize = 100 * (clientWidth / 1920)
return res * fontSize
}

三、echart盒子


v-show=“xAxisDataArr.length > 0”
class=“echart-container-echarts”
ref=“echartContainer”
>

import { defineComponent, ref, onMounted, onUnmounted, watchEffect, computed } from ‘vue’
import * as echart from ‘echarts’
import { Empty } from ‘ant-design-vue’
export default defineComponent({
props: {
option: Object,
xAxisDataArr: {
type: Array,
default: () => [],
},
type: String as PropType,
},
setup(prop) {
const echartContainer: any = ref()
const type = computed(() => prop.type || ‘’)
let chart: echart.ECharts
const resizeChart = () => {
if (chart) {
chart.resize()
}
}
const setData = () => {
const option = computed(() => prop.option || {})
if (option.value && chart) {
chart.setOption(option.value)
}
}

        let dispose = () => {}

        onMounted(() => {
            chart = echart.init(echartContainer.value)
            if (type.value?.indexOf('bar') !== -1) {
                chart.on('mouseover', () => {
                    chart.dispatchAction({
                        type: 'downplay',
                    })
                })
            }
            setData()
            if (window.ResizeObserver) {
                const container = echartContainer.value
                const obs = new ResizeObserver(resizeChart)
                obs.observe(container)
                dispose = () => {
                    obs.unobserve(container)
                }
            } else {
                addEventListener('resize', resizeChart)
                dispose = () => {
                    removeEventListener('resize', resizeChart)
                }
            }

            setTimeout(() => {
                resizeChart() // 500毫秒后再调整一次高度宽度，避免高度没有100%；
            }, 1000)
        })
        onUnmounted(() => {
            dispose()
        })

        watchEffect(setData)
        return {
            echartContainer,
            simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
        }
    },
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

@import ‘/@/styles/utils.less’;

.echart-container {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    :deep(.ant-empty) {
        // color: @textColor1;

        .ant-empty-img-simple-ellipse {
            fill: #eeeeee;
        }

        .ant-empty-img-simple-g {
            path {
                fill: #fafafa;
            }
        }

        .ant-empty-img-simple-path {
            fill: #f0f4fd !important;
        }

        // .ant-empty-img-simple-ellipse,
        // .ant-empty-img-simple-path {
        //     fill: #fafafa;
        // }

        // .ant-empty-img-simple-g {
        //     stroke: #dbdbdb;
        // }
    }

    .echart-container-echarts {
        width: 100%;
        height: 100%;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

外盒子


class=“echart-area”
:option=“chartOption”
:xAxisDataArr=“xAxisDataArr”
:type=“type”
/>

import { defineComponent, PropType, computed, watch, ref } from ‘vue’
import {
pieOption,
lineOption,
barOption1,
barOption2,
barOption3,
barOption4,
barOption5,
barOption6,
barOption7,
} from ‘/@/views/homeView/components/echarts/model’
import { object } from ‘vue-types’
import Charts from ‘./charts.vue’
import Title from ‘…/Title.vue’

interface chartDataParams {
    xAxisData?: any[]
    seriesData?: any[]
    colorList?: string[]
    noLegData?: any[]
    hideLeg?: boolean
}

const props = {
    type: String as PropType,
    chartData: object(),
}

export default defineComponent({
    name: 'Echarts',
    components: { Title, Charts },
    props,
    emits: ['handleSelect'],
    setup: function (prop, { emit }) {
        const type = computed(() => prop.type || '')
        const chartData = computed(() => prop.chartData || {})
        const xAxisDataArr: any = computed(() => prop.chartData?.seriesData || [])

        watch(
            () => chartData.value,
            () => {
                xAxisDataArr.value = chartData.value?.seriesData
            },
            { deep: true }
        )

        const chartOption = computed(() => {
            let option = {}
            if (type.value === 'pie') option = pieOption(chartData.value)
            if (type.value === 'line') option = lineOption(chartData.value)
            if (type.value === 'bar1') option = barOption1(chartData.value)
            if (type.value === 'bar2') option = barOption2(chartData.value)
            if (type.value === 'bar3') option = barOption3(chartData.value)
            if (type.value === 'bar4') option = barOption4(chartData.value)
            if (type.value === 'bar5') option = barOption5(chartData.value)
            if (type.value === 'bar6') option = barOption6(chartData.value)
            if (type.value === 'bar7') option = barOption7(chartData.value)
            return option
        })

        return {
            type,
            chartOption,
            xAxisDataArr,
        }
    },
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

@import ‘/@/styles/utils.less’;

.echart {
    .wh100;
    padding: 0 10px;
    background: rgba(255, 255, 255, 0.8) !important;
    box-shadow: 0 5px 15px 0 rgba(0, 43, 130, 0.25) !important;
    border-radius: 10px;

    .echart-area {
        width: 100%;
        height: calc(100% - 45px);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12