echart 框选_需求:加一个下拉框选择条件改变饼图内外环 饼图:百度echarts提供...

该博客介绍了如何使用ECharts饼图,并结合一个下拉框选择条件来动态改变饼图的内外环数据。通过监听下拉框的change事件,根据用户选择的不同选项,利用AJAX从后台获取相应数据,更新ECharts实例的配置,从而实现饼图的实时更新。示例中涉及的数据包括肥料及产品数量、劳动统计等多个维度。
摘要由CSDN通过智能技术生成

$("#selectID").change(function() { SelectChange1(); });varname;varval;functionSelectChange1() {var selectText = $("#selectID").find("option:selected").val();//alert(selectText);

//获取下拉框选中项的text属性值

//劳动及产品统计(年)

var worldMapContainer = document.getElementById('box3');

box03= document.getElementById("box03");

box03_h=box03.offsetHeight;

box03_w=box04.offsetWidth;//用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽

var resizeWorldMapContainer = function() {

worldMapContainer.style.width= box03_w * 1 + 'px';

worldMapContainer.style.height= box03_h * 0.8 + 'px';

};//设置容器高宽

resizeWorldMapContainer();//基于准备好的dom,初始化echarts实例

var myChart =echarts.init(worldMapContainer);//指定图表的配置项和数据

var option ={

tooltip: {

trigger:'item',

formatter:"{a}
{b}: {c} ({d}%)"},

grid: {

height:'40%',

y:'5%',

x:'14%'},

legend: {

x:'center',

y:'bottom',

textStyle: {

color:'#ccc'},

data:null,//res.data.legendList3

},

series: [{

color: ['#7627cb', '#259fd2', '#e26021', '#c7353a', '#f5b91e'],

name:'肥料及产品数量',

type:'pie',

selectedMode:'single',

radius:'40%',

center: ['50%', '40%'],

label: {

normal: {

position:'inner'}

},

labelLine: {

normal: {

show:true}

},

data:function() {var serie =[];//$.ajax({

//url: "/AdminApi/GetTotalCount",

//data: { dateType: 'YRAR' },

data: { [{ "TotalCount&#

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值