记录在uniapp的h5项目中使用echarts最新版本(5.5.1),饼图、柱形图、地图等图表进行点击等事件时没反应的问题

方法一:在main.js中添加window.wx={}  或  window.wx=undefined(疑似全局变量wx导致,使其认为是微信环境,从而引起echarts功能异常。补充:添加后在PC浏览器真机环境中点击事件恢复正常,但是打包后在手机端(此处是在企业微信环境下运行的)依然无法触发点击事件)

方法二:更换成旧版本(只试了4.2.1可以,其它没试)

方法三:在引入echarts的页面中添加两行代码:

        import * as echarts from 'echarts';//先引入

        //然后在onMounted生命周期或者其它地方添加这两行代码(vue3写法)

        echarts.env.touchEventsSupported = false;
        echarts.env.wxa = false;

ECharts 5.5.1版本,要绘制疫情管控地图并区分感染人数前三名的省份颜色,你可以按照以下步骤操作: 1. **数据准备**: 首先,你需要获取包含省份名称、感染人数以及间戳的数据。如果数据实变化,确保每10分钟有新的数据更新。 2. **创建地图图层**: 使用ECharts地图组件(echarts Map),初始化地图配置,并指定数据属性如`name`对应省份,`value`对应感染人数。 ```javascript const map = { type: 'map', zoom: 4, center: [经度, 纬度], // 地图心位置 roam: true, // 是否开启平滑缩放 aspectScale: 0.85, // 地图比例尺 series: [ { name: '疫情地图', type: 'map', mapType: 'china', // 或者根据实际需要选择国家或省级行政区 data: [], // 这里填入加载好的省份数据 markPoint: { // 标记点用于高亮前三名省份 symbol: 'circle', // 圆形标记 itemStyle: { normal: { color: '#ff0000' // 红色填充 }, emphasis: { shadowBlur: 10, // 高亮阴影模糊 shadowColor: 'rgba(0, 0, 0, 0.3)' } }, selectedMode: 'single', // 单击高亮一个 markLine: { // 连接标记点到地图 symbol: ['none'], lineStyle: { color: '#ff0000' } }, data: [] // 初始化为空,后续根据感染人数排序添加 } } ] }; ``` 3. **数据绑定与更新**: 利用ECharts的`setOption`方法动态设置地图数据和标记点数据。可以设置一个定任务每10分钟从服务器拉取新数据并更新地图: ```javascript function updateMap(data) { const sortedData = data.sort((a, b) => b.value - a.value); // 排序感染人数 // 更新地图数据 map.series[0].data = ...; // 使用最新数据替换原有的地图数据 map.series[1].data = []; // 清空标记点数据,然后添加前三名 // 添加感染人数前3名的省份 for (let i = 0; i < 3 && i < sortedData.length; i++) { map.series[1].data.push({ name: sortedData[i].name, value: sortedData[i].value, coord: [sortedData[i].lon, sortedData[i].lat] // 经纬度坐标 }); } chart.setOption(map); // 更新图表选项 } // 每10分钟执行一次数据更新 setInterval(() => { fetchNewData().then(updateMap); }, 60 * 1000 * 10); // 10000毫秒等于10分钟 ``` 4. **获取数据接口**: `fetchNewData()`函数应该返回一个Promise,它会从服务器获取最新的感染人数数据,格式化成上述所需的结构。 注意:为了完整展示以上示例,你需要实际连接到数据源并在`fetchNewData`处理数据获取和解析。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值