vue echarts map 改变tooltip

最新推荐文章于 2024-10-30 09:23:01 发布

Weather_

最新推荐文章于 2024-10-30 09:23:01 发布

阅读量472

点赞数

分类专栏： echart 文章标签： vue

本文链接：https://blog.youkuaiyun.com/Weather_/article/details/108048928

版权

本文探讨了在Vue项目中使用Echarts地图组件时，如何修改Tooltip的位置和内容。同时，针对在实现点击事件时遇到的浏览器报错问题进行了分析，指出需要检查methods中是否存在相应的方法，并在mounted钩子中正确绑定事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

改变tooltip位置和内容

  tooltip: {
                        show: true,
                        padding: 10,
                        alwaysShowContent: true, // 是否永远显示tooltip
                        enterable: true,//鼠标移入tooltip
                        transitionDuration: 0, // 移动动画时间，单位s
                        trigger: "item",
                        triggerOn: 'click',
                        // position: "inside",
                        position: function (point, params, dom, rect, size) {
                            return [rect.x+rect.width/2-145, rect.y+rect.height/2-278];
                        },
                        textStyle: {
                            color: "#fff"
                        },
                        formatter: function (val) {
                            return "<div id='mapStoreClass' class='tip-part' onclick='clickTip("+val.dataIndex+")&