echarts响应函数实现

1.在html文件定义地图div

<div id="main" style="width:100%; height: 100%; overflow: hidden;"></div>

2.在js中初始化地图控件

var chart = echarts.init(document.getElementById('main'));

3.设置响应函数

chart.on('click',function(params){
        var name=params.name;
	var id=params. seriesId;
       	alert('响应对象名称'+str+'ID为'+id);
});

click为响应事件type,此处为鼠标单击事件,可以为geoselected等参数;

params为响应对象,name为对象的数据名称,id为对象系列 ID,可以在 option 中传入。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Echarts 是一款优秀的开源图表库,支持多种类型的图表和丰富的交互功能。实现 Echarts 图表的响应式布局可以通过以下方式: 1. 使用百分比布局 在 Echarts 图表的容器元素中,可以使用百分比来设置宽度和高度,例如: ```html <div id="chart-container" style="width: 100%; height: 100%;"></div> ``` 这样设置可以使图表容器随着父元素的大小变化而自适应调整大小。 2. 监听窗口大小变化 可以通过监听窗口大小变化的事件,动态调整图表容器的大小,从而实现响应式布局。例如: ```javascript var myChart = echarts.init(document.getElementById('chart-container')); function resizeChart() { myChart.resize(); } window.addEventListener('resize', resizeChart); ``` 以上代码中,使用 `echarts.init` 方法初始化图表,并定义了一个 `resizeChart` 函数用于调整图表的大小。然后,通过监听窗口的 `resize` 事件,调用 `resizeChart` 函数实现图表容器的大小调整。 3. 使用 Echarts 的响应式配置项 Echarts 提供了一些响应式配置项,可以根据不同的屏幕大小或容器大小,自动调整图表的样式和布局。例如: ```javascript option = { // 响应式配置项 responsive: { // 在宽度小于 600 时,自动将 legend 放在底部 600: { legend: { orient: 'horizontal', bottom: 0, itemGap: 10 } }, // 在宽度大于等于 600 时,自动将 legend 放在右侧 1200: { legend: { orient: 'vertical', right: 0, top: 0, itemGap: 20 } } }, // 其他图表配置项 ... }; ``` 以上代码中,使用 `responsive` 配置项定义了两个屏幕宽度阈值:`600` 和 `1200`,分别对应屏幕宽度小于 600 和大于等于 600 时的图表样式。在每个阈值中,可以配置需要自动调整的图表组件的样式和位置等参数。 以上是实现 Echarts 图表的响应式布局的一些方法,可以根据实际需求选择合适的方式。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值