嫣旖雲之逸
嫣旖雲之逸
  • 发布:2020-02-06 10:39
  • 更新:2023-05-24 19:50
  • 阅读:6078

uniapp h5使用Echart制作地图 没有tooltip功能???

分类:uni-app

<template>
<view class="canvasView">
<!-- <mpvue-echarts class="ec-canvas" :echarts="echarts" canvasId="map" ref="mapChart" /> -->
<div ref="mapChart" id="main" style="width: 750upx; height:800upx; margin: 10px auto;"></div>
</view>
</template>

<script>

import * as echarts from 'echarts'  

地图option:
let option={
dataRange: {
min: 0, //颜色区间的最小值
max: 50, //颜色区间的最大值,和data中的最大值一致
x: "left",
y: "bottom",
text: ["高", "低"], // 文本,默认为数值文本
calculable: true,
inRange: {
//颜色区间
color: ["lightskyblue", "yellow", "orangered", "red"]
}
},
tooltip: {
trigger: 'item',
show: true,
formatter: function(params,ticket,callback) {
console.log('----------')
console.log(params);
console.log('----------')
return (
"地区:" +
params.data.name
);
}
},
series: [
{
type: "map",
map: "demo",
itemStyle: {
normal: { label: { show: true } },
emphasis: { label: { show: true } }
},
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
roam:true,
data: this.markdata,
markPoint: {
symbolSize: 45,
itemStyle: {
normal: {
borderColor: "#33CBFF",
color: "#33CBFF",
borderWidth: 1, // 标注边线线宽,单位px,默认为1
label: {
show: true
}
}
},

                  data: this.markdata,  
                }  
              }  
            ]  
          };
2020-02-06 10:39 负责人:无 分享
已邀请:
1***@qq.com

1***@qq.com

昨天搞了半天,在echarts 4.9.0版本下终于h5能显示tooltip了。
原因:echarts自带运行环境的判断,而在h5环境中,竟然有全局变量wx,这你能信!!!一点都不符合直觉。所以echarts自己判断环境就为wx,和普通html不一样。
解决方式:在引用echarts之前设置

window.wx = undefined
1***@qq.com

1***@qq.com

请问除了tooltip,在markline,markpoint中的formatter怎么使用html?

6***@qq.com

6***@qq.com

问题解决了吗,我也遇到了

2***@qq.com

2***@qq.com - 你们好啊

大佬 问题解决了么 h5echarts tooltip不显示

1***@qq.com

1***@qq.com

相同代码 在原生html中可以,放到uni-app框架中 运行h5模式 tooltip datazoom 都没有效果

水域心诚

水域心诚

修改了也没效果

skyense

skyense

在引用之前 设置了window.wx = undefined 还是没用呀,这只是针对uni-app中的小程序有用的吗?

1***@qq.com

1***@qq.com

很正常,移动端 echart5以上触摸事件是无效的

  • 1***@163.com

    您好,这个应该怎么解决呢

    2022-05-30 12:33

  • 1***@qq.com

    回复 1***@163.com: window.wx=null

    2022-06-22 10:53

  • 2***@qq.com

    回复 1***@qq.com:这行代码在哪里写呢?

    2022-06-30 22:15

h***@163.com

h***@163.com

在main.js里面设置window.wx={}有效,设置window.wx=null会报错

  • 1***@qq.com

    设置之后,h5可以,app会异常

    2023-06-13 22:07

  • 1***@qq.com

    app有没有解决办法

    2023-06-13 22:08

  • 2***@qq.com

    回复 1***@qq.com: app有解决的吗/

    2023-11-08 15:27

  • 8***@qq.com

    牛逼,可以了

    2023-11-14 16:39

要回复问题请先登录注册