现在遇到的问题是:不知道easyUI的datagrid与echarts的图表如何进行切换(easyUI的table标签与echarts的div标签),点击饼状图可以出现图形,但再点击表格就出不来图形了??
写的前台代码:
html:
<div>
<input id="bg" type="radio" name="sex" value="man"/>表格
<input id="bzt" type="radio" name="sex" value="wman"/>饼状图
<input id="zzt" type="radio" name="sex" value="woman"/>柱状图
</div>
<div id="chartmain" style="width:600px; height: 400px;">
<!-- 表格 -->
<table id = "dkxx" ></table>
</div>
js:
//icheck
$("#bg,#bzt,#zzt").iCheck({
checkboxClass: 'icheckbox_square-green',
radioClass: 'iradio_square-green',
increaseArea: '20%'
}).on('ifChecked', function(event){
if(event.target.id=="bg"){
//初始化echarts实例
var myChart = echarts.init(document.getElementById('chartmain'));
//dispose():释放图表实例;
myChart.clear();
$('#dkxx').datagrid({ /*allData match noMatch */
url:'dkxx.json',
rownumbers:true, //显示列号
fitColumns:true, //列自适应
queryParams:{},
columns:[[
{field:'dkbm',title:'地块编码',align:'center'},
{field:'ydlx',title:'用地类型 ',align:'center'},
{field:'ydlxdm',title:'用地类型代码',align:'center'},
{field:'ssgddy',title:'所属供电单元',align:'center'},
{field:'gdqylx',title:'供电区域类型',align:'center'},
{field:'zdmj',title:'占地面积',align:'center'},
{field:'yxgdmj',title:'有效供电面积',align:'center'},
{field:'rjl',title:'容积率',align:'center'},
{field:'jzmj',title:'建筑面积',align:'center'}
]]
});
}
/* 饼状图 */
if(event.target.id=="bzt"){
var option = {
title:{
text:'各类用地类型面积占比',
left:'center'
},
tooltip:{
trigger:'item',
formatter:function(data){
console.log(data.percent.toFixed(2))
return data.seriesName + "<br/>"+ data.name+ " : " + data.value + " ("+data.percent.toFixed(2)+"%)";
/* return "{a} <br/>{b} : {c} ({d}%)" */
}
},
legend: {
type: 'scroll',
orient: 'vertical',
right: 10,
top: 20,
bottom: 20,
data:['Android','IOS','PC','Ohter']
},
series:[{
name:'访问量',
type:'pie',
radius:'60%',
label: {
normal: {
show: true, formatter: "{a} \n{b} : {c} ({d}%)"
}
},
data:[
{value:500,name:'Android'},
{value:200,name:'IOS'},
{value:360,name:'PC'},
{value:100,name:'Ohter'}
]
}]
};
}
var myChart = echarts.init(document.getElementById('chartmain'));
myChart.setOption(option,true);
解决方案 »
免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货