用过echarts的人对于它的亮点我就不多说啦,下面我就分享一下我最近发现的一些小想法吧。
1、 我首先建立VisualService.php用来对数据的操作。
<?php
require_once 'SQLHelper.php';
$str=$_POST['name'];
if($str=="Pie"){
$help=new SQLHelper() ;
$sql="select name,value from Pie";
$result=$help->execute_dql($sql);
$result=json_encode($result);
echo $result;
}
else if($str=="Bar"){
$help=new SQLHelper();
$sql="select year,guangdong,jiangsu,shandong from bar";
$result=$help->execute_dql($sql);
$result=json_encode($result);
echo $result;
}else {
echo "程序执行完毕";
}
?>
var fileLocation = '../echarts/echarts-map';
require.config({
paths:{
'echarts': fileLocation,
'echarts/chart/line': fileLocation,
'echarts/chart/bar': fileLocation,
'echarts/chart/scatter': fileLocation,
'echarts/chart/k': fileLocation,
'echarts/chart/pie': fileLocation,
'echarts/chart/radar': fileLocation,
'echarts/chart/map': fileLocation,
'echarts/chart/chord': fileLocation,
'echarts/chart/force': fileLocation,
'echarts/chart/gauge': fileLocation,
'echarts/chart/funnel': fileLocation,
'echarts/config': fileLocation
}
});
$.ajax({
type: "POST",
url: "http://localhost/Visual/Visual/VisualService.php",
data: "name=Pie",
dataType:"json",
success: function(msg){------------------------------------------------ajax返回的一个JSON数据对象,paths,require是ecahrts的模块加载。
require(
[
'echarts',
'echarts/chart/line',
'echarts/chart/bar',
'echarts/chart/scatter',
'echarts/chart/k',
'echarts/chart/pie',
'echarts/chart/radar',
'echarts/chart/force',
'echarts/chart/chord',
'echarts/chart/gauge',
'echarts/chart/funnel',
'echarts/config'
],
function (ec) {
//--- 折柱 ---
var myChart = ec.init(document.getElementById('main'));
option = {
title : {
text: '某站点用户访问来源',
subtext: '纯属虚构',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient : 'vertical',
x : 'left',
data:function(){-----
该数据是从JSon数组里面提取出来,通过后台返回的msg数组将其取出,然后放入一个数组中,再返回给data,值得一提的是,请记住方法的最后必须得有()不然,图是出不来的。具体什么原因,我也在探索中哦,希望会的朋友也多想想。
var arr=new Array();
for(var i=0;i<msg.length;i++){
arr.push(msg[i].name);
}
return arr;
}()
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
series : [
{
name:'产业结果',
type:'pie',
radius : '55%',
center: ['50%', '60%'],
data:function(){
var arr=[];
for(var i=0;i<msg.length;i++)
{
arr.push({
name:msg[i].name,
value:msg[i].value
});
}
return arr;
}()
}
]
};
myChart.setOption(option);
}
);
}
});
</script>
总结:echarts的数据显示差不多都是用数组的形式去赋值。所以,我们如果进行从数据库中动态将数据赋入echarts,可以以这样的形式哦:
data:function(){
var arr=new Array();
........
return arr;
}以函数的形式给data赋值。另外,echarts里面采用DOM结构,如果需要寻找某些元素的话可以想JS那样去找:option.series[0].name;
谢谢观看,有什么大家一起研究研究。