饼图ajax请求数据如何写,Echarts饼状图数据交互请求ajax自定义颜色

normal : {

color : function(params) {

//自定义颜色

var colorList = [ '#2059be', '#198577',

'#a8674e' ];

return colorList[params.dataIndex]

}

}

示例:

//基于准备好的dom,初始化echarts实例

var cChart = echarts.init(document.getElementById('main'));

var names = []; //类别数组(用于存放饼图的类别)

var brower = [];

$.ajax({

type: 'get',

url: "data.json",

dataType: "json", //返回数据形式为json

success: function(data) {

//请求成功时执行该函数内容,result即为服务器返回的json对象

$.each(data.list, function(index, item) {

names.push(item.value); //挨个取出类别并填入类别数组

brower.push({

name: item.value,

value: item.name

});

});

cChart.setOption({ //加载数据图表

title: {

text: '每日睡眠分布',

// subtext:'',

x: 'center',

y: '7px',

textStyle: { //图例文字的样式

color: '#3A7BD5',

fontSize: 16

},

textAlign: 'left'

},

legend: {

/*orient: 'vertical',

x: 'right',

y: 'bottom',*/

textStyle: { //图例文字的样式

color: '#fff',

fontSize: 12

},

type: 'scroll',

orient: 'vertical',

right: 10,

top: 20,

bottom: 20,

data: names

},

series: [{

name: '姓名',

type: 'pie',

radius: '55%',

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

data: brower,

itemStyle: {

emphasis: {

shadowBlur: 10,

shadowOffsetX: 0,

shadowColor: 'rgba(0, 0, 0, 0.5)'

},

normal: {

color: function(params) {

//自定义颜色

var colorList = ['#2059be', '#198577',

'#a8674e'

];

return colorList[params.dataIndex]

}

}

}

}]

});

},

error: function(errorMsg) {

//请求失败时执行该函数

alert("图表请求数据失败!");

}

});

json

{"list":[{"value":"管理","name":40},

{"value":"管理","name":140},

{"value":"操作工","name":31}]}

效果如下,每块区域都是自定义的颜色了。

5640239-6bb5a1be1eec8b5e.png

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
问卷模块是一个非常常见的功能,它可以用来收集用户对某些问题的看法和意见。在实现问卷模块时,可以使用echarts来展示饼图,以便更直观地呈现调查结果。 首先,需要创建一个问卷页面,并在页面添加一个饼图。使用echarts创建饼图非常简单,只需要引入echarts库,然后调用相应的函数即可。例如: ``` // 引入echarts库 <script src="https://cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.min.js"></script> // 创建一个饼图 <div id="pie-chart" style="width: 600px; height: 400px;"></div> <script> var chart = echarts.init(document.getElementById('pie-chart')); // 配置饼图数据 var option = { title: { text: '调查结果', left: 'center' }, tooltip: { trigger: 'item', formatter: '{a} <br/>{b} : {c} ({d}%)' }, series: [ { name: '访问来源', type: 'pie', radius: '55%', center: ['50%', '60%'], data: [ {value: 335, name: '非常满意'}, {value: 310, name: '满意'}, {value: 234, name: '一般'}, {value: 135, name: '不满意'}, {value: 1548, name: '非常不满意'} ], emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; // 使用配置项显示饼图 chart.setOption(option); </script> ``` 上面的代码会在页面创建一个宽为600px,高为400px的饼图,并显示调查结果。饼图数据是一个数组,每个元素表示一个扇形区域,包括该区域的名称和数值。 接下来,需要使用ajax从后端获取问卷调查结果数据ajax是一种异步请求方式,可以在不刷新页面的情况下从后端获取数据。例如: ``` $.ajax({ url: '/api/survey/results', type: 'GET', dataType: 'json', success: function(data) { // 处理后端返回的数据,并更新饼图 var option = { // ... }; chart.setOption(option); }, error: function(xhr, status, error) { console.log('获取调查结果失败:' + error); } }); ``` 在上面的代码,使用了jQuery库的ajax函数来发送GET请求获取后端数据。如果请求成功,会调用success回调函数,其data参数就是后端返回的数据。可以在该回调函数更新饼图数据和配置项,然后使用chart.setOption方法重新绘制饼图即可。 最后,需要添加一些交互功能,例如让用户可以点击饼图的某个区域来查看该区域的详细信息。可以使用echarts自带的事件机制来实现这些功能。例如: ``` chart.on('click', function(params) { console.log(params.name + '的详细信息:' + params.value); // 显示该区域的详细信息 }); ``` 上面的代码会监听饼图的点击事件,当用户点击某个区域时,会调用回调函数并传递该区域的名称和数值。可以在该回调函数显示该区域的详细信息,例如弹出一个模态框或在页面展示一个列表。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值