echarts数和百分比切换

最新推荐文章于 2024-08-11 09:08:01 发布

°飞鱼不再需要水、

最新推荐文章于 2024-08-11 09:08:01 发布

阅读量1.2k

点赞数

分类专栏： echarts 文章标签： js 前端 jquery

本文链接：https://blog.csdn.net/weixin_40444248/article/details/103970075

版权

这篇博客分享了如何在Echarts图表中实施数值和百分比的切换功能。通过添加两个radio按钮，分别对应数和百分比，监听其点击事件，重新调用setOption()方法并更新纵坐标和图例的属性与值。文中提供了相关代码示例和实际效果截图。

摘要由CSDN通过智能技术生成

之前做报表统计，其中功能需求要求echarts图表可以进行数和百分比的切换，下面是我当时的做法，在这坐下记录：
1、在图表做两个radio，一个代表数，一个代表百分比，给radio添加点击事件，当点击某一个radio时，触发事件重新setOption()
2、当然，在重新**setOption()**之前要对纵坐标和图例重新设置属性和值

以下是完整代码：

function charts(id) {
   
	var dom = echarts.init(document.getElementById(id));
	var radio = $('input:radio[name="type"]:checked').val();//数和百分比的radio选中值
	$.ajax({
                   	
   	  url: "", // 处理页面的路径
        type:"POST", // 提交方式
        dataType:"JSON", // 返回数据的类型
        success:function(data){
   
        	  	var date = [];// 日期
				var openCount = [];
				var testCount = [];
				var silentCount = [];
				var stockCount = [];
				var option2 = {
   
	       		        tooltip: {
   
	       		            trigger: 'axis',
	       		            formatter: '{b}:<br>{a0}: {c0}<br>{a1}: {c1}<br>{a2}: {c2}<br>{a3}: {c3}'
	       		        },
	       		        legend: {
   
	       		            top: '5px',
	       		            data: [
	       		                {
   name: '图例1', icon: 'roundRect'},
	       		                {
   name: '图例2', icon: 'roundRect'},
	       		                {
   name: '图例3', icon: 'roundRect'},
	       		                {
   name: '图例4', icon: 'roundRect'}
	       		            ],
	       		            itemWidth: 30,
	       		            itemHeight: 6,
	       		            itemGap: 20
	       		        },
	       		        color: ['#d48265', '#c23531', '#2f4554','#61a0a8'],
	       		        grid: {
    // 图表大小范围
	       		            containLabel: true,
	       		            right: 40,
	       		            left: