<!--left图表--> <div class="left-1"> <div id="main"></div> </div>
js
// 基于准备好的dom,初始化echarts实例
function craetBar(result){
// console.log(result);
var tempTimeOut = setTimeout(function () {
clearTimeout(tempTimeOut);
// console.log(result);
var myChartmain = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var optionmain = {
title: {
text: '民生数据分类',
textStyle: {
color: '#ffb'
}
},
grid: {
x: 40,
x2: 30,
y: 30,
height: 80
}, //去掉边
tooltip: {},
legend: {
data: ['分站'],
textStyle: {
color: '#ffb'
}
},
xAxis: {
data: ["交通", "养老", "教育", "就医", "住房"]
},
// yAxis: {},
yAxis: [
{
type: 'value'
}
],
axisLabel: {
color: "#fff" //刻度线标签颜色
},
/*series: [{
name: '分站',
type: 'bar',
data: [5, 20, 36, 10, 20]
}]*/
series: [{
'name': '分站',
'type': 'bar',
'data': (function () {
// console.log(result);
var arr = [];
$.ajax({
type: "post",
async: false, //同步执行
url: "/tian/index.php/Home/Index/show",
data: {result:result},
dataType: "json", //返回数据形式为json
success: function (json) {
console.log(json);
if (json) {
for (var i = 0; i < json.length; i++) {
// console.log(json[i].num);
arr.push(json[i].num);
}
}
clearTimeout(tempTimeOut);
craetBar(json);
},
error: function (errorMsg) {
alert("不好意思,图表请求数据失败啦!");
myChart.hideLoading();
}
});
return arr;
})()
}]
};
myChartmain.setOption(optionmain);
},3000);
}
$(function(){
craetBar('');
});