ECharts 饼图,切换数据重新展示, 点击跳转访问

HTML 

	<div id="echars_pie1" style="background-color: white;width:600px;height:350px;">		 
	    {{echarts展示区域}}
        </div>
	<div>
		选择地区:
		<select id="dq">
			<option>请选择</option>
			<option value="032001">31</option>
			<option value="032002">41</option>
		</select>
	</div>

JS 

var A = function(){
    // 数据存储
    var ecData;
    // ec初始化
    var myChart = echarts.init(document.getElementById('echars_pie1'));

    /** 设置统计图 */
	var setStatisticalImage = function () {
		var nameData = [];
		if ( !ecData ) {
			/** 第一次加载页面无选择时 */
			initEvent();
		}
		$.each(ecData,function(index,item){
			nameData.push(item.name);
		})
		var options = getOptions(nameData,ecData);
	    myChart.setOption(options,true);
	  
	}    

    /** 第一次获取默认数据 */
	var initEvent = function() {
		ecData = getEcData();
        // 可以对饼图点击触发事件(写在这里为了切换后不重新绑定click事件)
	    myChart.on('click',function(params){
	    	console.log(params);
	    	console.log(params.name);
	    	console.log(params.data.type);
	    }) 
	}

    /** 默认数据,可以从后台获取 */
    var getEcData = function() {
		data = [
	             {value:335, name:'南京地区',type:"1"},
	             {value:310, name:'无锡地区',type:"2"},
	             {value:234, name:'常州地区',type:"3"},
	             {value:135, name:'苏州地区',type:"4"},
	             {value:550, name:'扬州地区',type:"5"}
	         ];
		
		return data;
	}

    /** 参数设置 */
    var getOptions = function(nameData,data){
		var option = {
		    title : {
		        text: '项目数量统计',
		        x:'center',
		        y:'5%'
		    },
		    tooltip : {
		        trigger: 'item',
		        formatter: "{a} <br/>{b} : {c} ({d}%)"
		    },
		    legend: {
		        top: '15%',
		        data: nameData
		    },
		    series : [
		        {
		            name: '项目数量统计',
		            type: 'pie',
		            radius : '65%',
		            center: ['50%', '60%'],
		            data: data,
		            itemStyle: {
		                emphasis: {
		                    shadowBlur: 10,
		                    shadowOffsetX: 0,
		                    shadowColor: 'rgba(0, 0, 0, 0.5)'
		                },
		                normal: {
	                    	label:{ 
					              show: true, 
					              formatter: '{b} : {c} ({d}%)' 
					        }, 
					       labelLine :{show:true} 
		                }
		        	} 
		       	}
		    ]
		}
		
		return option;
	}

    
    var bindBtn = function(){
        /** 饼图切换 */
	$('#dq').on('change',function(){
		var the = $(this);
        // 可以直接拿着val 到后台请求一份数据
		if ( the.val() == "032001" ) {
			ecData = [
			    {value:1, name:'A地区',type:"1"},
			    {value:2, name:'B地区',type:"2"},
		        {value:3, name:'C地区',type:"3"},
			    {value:4, name:'D地区',type:"4"}
			];
		} else if ( the.val() == "032002"  ) {
			ecData = [
			    {value:5, name:'秦川地区',type:"1"},
			    {value:2, name:'巴蜀地区',type:"2"},
			    {value:3, name:'江南地区',type:"3"},
			];
		} else {
			ecData = getEcData();
		}
		setStatisticalImage();
	})
        
    }



    return {
		init : function(){
            bindBtn();
			setStatisticalImage();
		}
	}

}($)

点击后的console

好的,以下是一个使用 ECharts 绘制 3D 饼图的示例代码,您可以根据自己的数据进行修改: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>3D饼图</title> <!-- 引入 ECharts 文件 --> <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.min.js"></script> </head> <body> <!-- 定义一个容器来放置图表 --> <div id="chart" style="width: 600px;height:400px;"></div> <script> // 初始化 ECharts 实例 var myChart = echarts.init(document.getElementById('chart')); // 配置图表 var option = { title: { text: '3D饼图', left: 'center' }, tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' }, series: [ { name: '访问来源', type: 'pie', radius: ['30%', '50%'], avoidLabelOverlap: false, label: { show: false, position: 'center' }, emphasis: { label: { show: true, fontSize: '30', fontWeight: 'bold' } }, labelLine: { show: false }, data: [ {value: 335, name: '直接访问'}, {value: 310, name: '邮件营销'}, {value: 234, name: '联盟广告'}, {value: 135, name: '视频广告'}, {value: 1548, name: '搜索引擎'} ] } ] }; // 使用刚指定的配置项和数据显示图表 myChart.setOption(option); </script> </body> </html> ``` 在这个示例中,我们通过 ECharts 的 `pie` 类型来绘制饼图,通过 `radius` 属性设置内外半径,通过 `data` 属性设置饼图数据。除此之外,我们还可以通过 `title`、`tooltip` 等属性来设置图表的标题、提示框等。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值