echarts自定义tooltip弹窗，使用 DOM 实例

最新推荐文章于 2025-04-16 17:32:35 发布

F2E_keze

最新推荐文章于 2025-04-16 17:32:35 发布

阅读量379

点赞数 1

文章标签： echarts 前端 javascript vue.js

本文链接：https://blog.youkuaiyun.com/m0_56104994/article/details/145793860

版权

1.配置option

chartsOption: {
                tooltip: {
                    trigger: "item",
                    formatter: this.initTooltip,
                    triggerOn: "mousemove",
                    borderColor: "#fff",
                    backgroundColor: "rgba(216, 227, 244, 1)",
                    extraCssText: "border-radius: 14px;", // 设置圆角
                },
                series: [
                    {
                        name: "战区数据",
                        type: "map",
                        mapType: "china",
                        roam: true,
                        zoom: 1.5,
                        itemStyle: {
                            emphasis: {
                                areaColor: "#a7caff", // 高亮状态下的颜色与正常状态相同
                                borderColor: "#fff",
                            },
                        },
                        projection: {
                            project: (point) => [
                                (point[0] / 180) * Math.PI,
                                -Math.log(Math.tan((Math.PI / 2 + (point[1] / 180) * Math.PI) / 2)),
                            ],
                            unproject: (point) => [(point[0] * 180) / Math.PI, ((2 * 180) / Math.PI) * Math.atan(Math.exp(point[1])) - 90],
                        },
                    },
                ],
            },

2.tooltip.formatter函数

得引入vue和组件

import Vue from "vue";

import mapTooltip from "./components/mapTooltip"; //无需注册

initTooltip(e) {
            let p = Vue.extend(mapTooltip);
            let vm = new p({
                propsData: e.data,
            });
            vm.$mount();
            return vm.$el;
        },

3.成功实现

4.我这里实现了点击省份，弹出Modal组件，但是关闭弹窗省份还是处于高亮状态，使用dispatchAction取消高亮

//在点击事件中记录点击是哪个省份
myChart.on("click", (params) => {
                        if (params.componentType === "series" && params.seriesType ==="map") {
                        let { dataIndex, name } = params;
                        
                        this.activedData = params;
                    }
                });


//在关闭弹窗事件中取消高亮
 handleClose() {
            let { dataIndex } = this.activedData
           
            this.myChart.dispatchAction({
                type: "unselect",
                seriesIndex: 0,
                dataIndex,
            });
            
        },