echarts监听折线柱图切换的方法

最新推荐文章于 2023-11-28 15:40:03 发布

前端小狮

最新推荐文章于 2023-11-28 15:40:03 发布

阅读量1.1k

点赞数 1

分类专栏： echarts js 文章标签： echarts

本文链接：https://blog.youkuaiyun.com/m0_37885651/article/details/108517749

版权

js 同时被 2 个专栏收录

55 篇文章

订阅专栏

echarts

2 篇文章

订阅专栏

本文介绍如何使用ECharts实现图表类型的动态切换，并监听切换事件来调整图表参数。通过示例代码，展示了如何在折线图和柱状图之间进行切换，并在每次切换时更新toolbox中的magicType选项。

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

监控图例切换的方法，折线图和柱状图切换，想要监控切换时，改变些许参数。

		var option = {
          ...,
          toolbox: {
                show: true,
                feature: {
                    magicType: {type: ['bar']},
                },
            },
       	}
       	var myChart = echarts.init(document.getElementById('myChart'),'light');
       	myChart.setOption(option);
		//监控切换，让切换的图表显示隐藏
		myChart.on('magictypechanged', function (params) {
	        if(params.currentType == 'bar'){
	            myChart.setOption({
	                toolbox: {
	                    feature: {
	                        magicType: {type: ['line']},
	                    }
	                }
	            })
	        }else{
	            myChart.setOption({
	                toolbox: {
	                    feature: {
	                        magicType: {type: ['bar']},
	                    }
	                }
	            })
	        }
	    });