Echarts百度地图散点图实现点击路由跳转

var myChart = echarts.init(this.$refs.map);
var option;

// 单击事件
myChart.on('click', (params) => {
  if (params.data.name) {
    this.$router.push({
      path : '/monitor/station/list',
      query: { name: params.data.name},
    });
  }
});
  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要给 ECharts 地图添加点击事件,可以使用 ECharts 提供的事件处理函数。下面是一个简单的示例代码,演示了如何在地图上添加散并为散添加点击事件: ```javascript // 初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 定义散数据 var data = [ {name: '北京', value: [116.46, 39.92]}, {name: '上海', value: [121.48, 31.22]}, {name: '杭州', value: [120.19, 30.26]}, //... ]; // 定义地图配置 var option = { tooltip: {}, geo: { map: 'china' }, series: [{ name: '散', type: 'scatter', coordinateSystem: 'geo', data: data, symbolSize: 10, label: { normal: { show: true, formatter: '{b}', position: 'right' } }, itemStyle: { normal: { color: '#F06C00' } } }] }; // 绑定点击事件 myChart.on('click', function (params) { if (params.componentType === 'series' && params.seriesType === 'scatter') { // 点击了散,可以在这里添加你的逻辑 console.log('clicked', params.name); } }); // 渲染地图 myChart.setOption(option); ``` 在上面的代码中,我们先定义了一个 data 数组,其中包含了一些城市的经纬度信息。然后定义了一个地图的配置对象,其中包含了一个散点图的系列,用于显示这些城市的位置。接着使用 `on` 方法绑定了一个点击事件,当用户点击时,会触发这个事件,我们可以在事件处理函数里添加自己的逻辑。 需要注意的是,散点图的系列类型是 `scatter`,地图投影方式是 `geo`,事件类型是 `click`。同时,由于 ECharts 可以支持多个系列,多个坐标系,因此在事件处理函数里需要判断用户点击的是哪个系列,以及系列的类型是什么。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值