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

àì夳堔傛蜴生んèń 2022-12-05 13:48 175阅读 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 条评论，175人围观）

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

相关阅读

相关 echarts 柱状图

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

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

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

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

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

相关 ECharts实现折线图变柱状图、ECharts实现立体柱状图、3D柱状图，ECharts立体柱状图属性

> 本文借助该链接做演示：[链接地址][Link 1] 1.ECharts实现折线图变柱状图把series写的type改成“line”即可如图： ![在这里

比眉伴天荒/ 2022年11月19日 04:28/ 0 赞/ 641 阅读

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

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

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

相关 echarts-柱状图

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

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

相关 echarts柱状图

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

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

相关小程序柱状折线双图

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

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

相关 echarts柱状统计图

目录一、简单的echarts柱状统计图二、柱状图和折线图混搭三、一个项目里同时用不同版本的echarts画图 -------------------- 一、

àì夳堔傛蜴生んèń/ 2022年01月30日 15:13/ 0 赞/ 734 阅读

相关 echarts实现折线面积图

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

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

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

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

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