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

àì夳堔傛蜴生んèń 2022-12-05 13:48 184阅读 0赞

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

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']},
    	                    }
    	                }
    	            })
    	        }
    	    });

//自定义切换方法，柱图，饼图切换可看 我另一篇 ：  
[echarts，toolbox自定义方法，toolbox部分自定义方法][echarts_toolbox_toolbox]

[echarts_toolbox_toolbox]: https://blog.csdn.net/m0_37885651/article/details/86700743

发表评论取消回复

表情：

评论列表（有 0 条评论，184人围观）

还没有评论，来说两句吧...

相关阅读

相关 Echarts-柱形图

var clyyqst =\{ initAction:function()\{ /\$('.menuItem').removeClass('menuSelected')

灰太狼/ 2023年10月17日 17:57/ 0 赞/ 26 阅读

相关 echarts在一个折线/柱状图浮窗显示多条数据

echarts在一个折线/柱状图浮窗显示多条数据解决问题就在data里面，首先 data里面是可以json数组形式，如官方API上的 name:”“， value：”“

男娘i/ 2023年06月14日 15:59/ 0 赞/ 4 阅读

相关 echarts 柱状图

官网： https://echarts.apache.org/zh/tutorial.html 显示柱状图：[https://echarts.apache.org/

深碍√TFBOYSˉ_/ 2022年12月11日 04:28/ 0 赞/ 314 阅读

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

> 监控图例切换的方法，折线图和柱状图切换，想要监控切换时，改变些许参数。 var option = { ...,

àì夳堔傛蜴生んèń/ 2022年12月05日 13:48/ 0 赞/ 185 阅读

相关 vue+ts+echarts :画折线和柱状图的组合

直接上代码了安装步骤之前已经写过了。 template部分 <v-chart :option="histogramOption"

叁歲伎倆/ 2022年11月19日 04:19/ 0 赞/ 211 阅读

相关 echarts-柱状图

效果图 ![这里写图片描述][SouthEast] 代码 <!DOCTYPE html> <html lang="en"> <head>

布满荆棘的人生/ 2022年06月08日 09:40/ 0 赞/ 381 阅读

相关 echarts柱状图

引入echarts的js包echarts.min.js 事例地址：echarts.baidu.com/examples.html\chart-type-bar [htt

梦里梦外;/ 2022年06月07日 20:49/ 0 赞/ 339 阅读

相关小程序柱状折线双图

注意要点： 1，通过小程序提供的canvas组件来绘制。需要注意地方是自定义的组件的包含canvas的时候，创建 canvas 绘图上下文需要使用wx.createCan

谁借莪１个温暖的怀抱￠/ 2022年05月27日 00:12/ 0 赞/ 195 阅读

相关 echarts实现折线面积图

var option4 = { // legend: { // data: ['吃饭', '睡觉', '打豆豆'], //

港控/mmm°/ 2022年01月12日 02:43/ 0 赞/ 750 阅读

相关 ECharts3实例定制图例、XY轴、折线柱状混合图

前言实现如下效果图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0

矫情吗；*/ 2021年07月26日 11:01/ 0 赞/ 451 阅读