ajax 组合,echarts与ajax结合如何重新组合series?

1.根据json文件的数据如何获取组合成柱状图echarts中的series?

2.以下是json数据:{

{

"info": {

"userCount": 906,

"have_num": 693,

"pass_num": 417,

"unpass_num": 276,

"pass_rate": "60.17%",

"make_have": 357,

"make_pass": 336,

"make_unpass": 21,

"make_rate": "94.12%"

},

"item": [

{

"PlaceName": "朔州市安全考试中心",

"Detail": [

{

"Name": "低压电工作业",

"Num": 433,

"Pass": 372,

"Fail": 23,

"Miss": 38

},

{

"Name": "高压电工作业",

"Num": 283,

"Pass": 252,

"Fail": 25,

"Miss": 6

},

{

"Name": "熔化焊接与热切割作业",

"Num": 178,

"Pass": 131,

"Fail": 4,

"Miss": 43

}

]

},

{

"PlaceName": "朔州考点2测试",

"Detail": [

{

"Name": "低压电工作业",

"Num": 4,

"Pass": 1,

"Fail": 2,

"Miss": 1

}

]

},

{

"PlaceName": "朔州考点3测试",

"Detail": [

{

"Name": "高压电工作业",

"Num": 4,

"Pass": 0,

"Fail": 0,

"Miss": 4

},

{

"Name": "熔化焊接与热切割作业",

"Num": 4,

"Pass": 0,

"Fail": 0,

"Miss": 4

}

]

}

]

}

3.以下是所需要做成的柱状图的示例:

bVNa7n?w=851&h=612

4.示例代码:

echarts

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

var bcBySeriesIndex = ['低压', '低压', '低压',

'高压', '高压', '高压', '焊接', '焊接', '焊接'

];

var option= {

// title: {

// text: '2017年4月6日考点考试情况统计图'

// },

toolbox: {

show: true,

feature: {

dataView: {

show: true,

readOnly: false

},

magicType: {

show: true,

type: ['line', 'bar']

},

restore: {

show: true

},

saveAsImage: {

show: true

}

}

},

calculable: true,

tooltip: {

trigger: 'axis',

axisPointer: { // 坐标轴指示器,坐标轴触发有效

type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'

},

formatter: function(params) {

var html = [];

var category = {};

echarts.util.each(params, function(param) {

var catName = param.seriesName;

var bc = bcBySeriesIndex[param.seriesIndex];

if (!category[catName]) {

category[catName] = {};

}

category[catName][bc] = param.value;

});

// console.log(category);

echarts.util.each(category, function(cate, key) {

html.push(

'

',

'

', key, '',

'

', cate.低压, '',

'

', cate.高压, '',

'

', cate.焊接, '',

'

'

);

});

return '

'

统计低压高压焊接' +

html.join('') +

'

';

}

},

legend: {

data: [

'及格', '不及格', '未考'

],

x: 'center'

},

grid: {

left: '3%',

right: '4%',

bottom: '3%',

containLabel: true

},

xAxis: [{

type: 'category',

data: ['考点1', '考点2', '考点3', '考点4', '考点5', '考点6']

}],

yAxis: [{

type: 'value'

}],

series: [

{

name: '及格',

type: 'bar',

stack: '低压',

data: [150, 100, 120, 160, 80, 111]

}, {

name: '不及格',

type: 'bar',

stack: '低压',

data: [20, 10, 30, 11, 13, 2]

}, {

name: '未考',

type: 'bar',

stack: '低压',

data: [10, 20, 30, 12, 14, 18],

label: {

normal: {

show: true,

position: 'top',

formatter: '低压',

textStyle: {

color: '#333'

}

}

}

},

{

name: '及格',

type: 'bar',

stack: '高压',

data: [100, 120, 70, 85, 72, 83]

}, {

name: '不及格',

type: 'bar',

stack: '高压',

data: [14, 12, 2, 5, 6, 8]

}, {

name: '未考',

type: 'bar',

stack: '高压',

data: [3, 1, 2, 0, 4, 15, 10],

label: {

normal: {

show: true,

position: 'top',

formatter: '高压',

textStyle: {

color: '#333'

}

}

}

},

{

name: '及格',

type: 'bar',

stack: '焊接',

data: [99, 90, 70, 111, 79, 87]

}, {

name: '不及格',

type: 'bar',

stack: '焊接',

data: [2, 5, 2, 4, 6, 3]

}, {

name: '未考',

type: 'bar',

stack: '焊接',

data: [2, 3, 5, 0, 1, 3],

label: {

normal: {

show: true,

position: 'top',

formatter: '焊接',

textStyle: {

color: '#333'

}

}

}

}

]

};

myChart.setOption(option);

5.如何将json文件的数据代替示例中的数据?

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值