echarts之柱形图和折线图相互切换

最新推荐文章于 2024-03-06 15:55:44 发布

YCRUCAN

最新推荐文章于 2024-03-06 15:55:44 发布

阅读量7.3k

点赞数 3

分类专栏： Echarts图表

本文链接：https://blog.youkuaiyun.com/weixin_42870683/article/details/103527376

版权

Echarts图表专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用ECharts在折线图和柱状图之间进行交互式转换，通过配置toolbox模块实现图表类型的动态切换，并展示了一个包含标题、副标题、工具箱和系列数据的完整示例代码。

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

没错，只要在option里加入toolbox就行

toolbox: {
	            	        show : true,
	            	        feature : { 
	            	        	/* line是折线图，bar是柱形图*/
	            	            magicType: {show: true, type: ['line', 'bar']},
	            	        }
	            	    },

完整代码：

option = {
	            		title : {
	            	        text: '测试',
	            	        x: 'center',//标题居中
	            	        subtext:"查看明细",//副标题
	            	        sublink:'#',//副标题点击跳转路径
	            	        subtarget:'self',//当前页面跳转
 	            	        subtextStyle: {//副标题的属性
 	            	            color: '#25664A',
	 	    					fontStyle:'normal',//主标题文字字体风格，默认normal，有italic(斜体),oblique(斜体)
	 	    					fontWeight:"lighter",//可选normal(正常)，bold(加粗)，bolder(加粗)，lighter(变细)，100|200|300|400|500...
	 	    					fontFamily:"san-serif",//主题文字字体，默认微软雅黑
	 	    					fontSize:12
 	            	        },
	            	    },
	            	    tooltip : {
	            	        trigger: 'axis'
	            	    },
	            	    //柱形图和折线图相互切换
	            	    toolbox: {
	            	        show : true,
	            	        feature : { 
	            	        	/* line是折线图，bar是柱形图*/
	            	            magicType: {show: true, type: ['line', 'bar']},
	            	        }
	            	    },
	            	    calculable : false,//图形固定不能移动
	            	    xAxis : [
	            	        {
	            	            type : 'category',
	            	            data : ['Ⅰ级','Ⅱ级','Ⅲ级','Ⅳ级','Ⅴ级']
	            	        }
	            	    ],
	            	    yAxis : [
	            	        {
	            	            type : 'value',
	            	            name : '数量',
	            	            axisLabel : {
	            	                formatter: '{value}'
	            	            }
	            	        }
	            	    ],
	            	    series : [

	            	        {
	            	            name:'单位数量',
	            	            type:'bar',
	            	            barWidth:40,//宽度
	            	            data:mainData,
	            	            //显示数值
	            	            itemStyle : { normal: {label : {
	            	            	show: true
	            	            	}}}
	            	        }
	            	        
	            	    ]
	            	};

效果图如下：
在这里插入图片描述