准备如下:
1.下载ECharts.js,网址:http://echarts.baidu.com/download.html
2.引入javascript和echarts.js
大家直接看源码吧,我后台使用的是php
1.后台:
public function data(){
$res=array("和平区","河西区","河东区","河北区","南开区");
$les=array("480","380","366","390","300");
foreach ($res as $k=>$v){
$res1[$k]['department']=$v;
foreach ($les as $k1=>$v1){
$res1[$k1]['num'] = $v1;
}
}
//dump($res1);
$result = array("list" => $res1);
return $this->ajaxReturn($result,'json');
}
输出json:
{"list":[{"department":"\u548c\u5e73\u533a","num":"480"},{"num":"380","department":"\u6cb3\u897f\u533a"},{"num":"366","department":"\u6cb3\u4e1c\u533a"},{"num":"390","department":"\u6cb3\u5317\u533a"},{"num":"300","department":"\u5357\u5f00\u533a"}]}
2.前台,我这没下载echarts.js,我是直接引用echarts.js制作的一个小demo,更多demo以及参数可以去ECharts官网去看:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
</head>
<body>
<div id="traceProvinceOrder" style="width:100%; height:400px;"></div>
</body>
</html>
<script src="http://echarts.baidu.com/dist/echarts.js"></script>
<script type="text/javascript">
function loadOneColumn() {
var myChart = echarts.init(document.getElementById('traceProvinceOrder'));
// 显示标题,图例和空的坐标轴
myChart.setOption({
title: {
text: '异步数据加载示例'
},
tooltip: {},
legend: {
data: ['发布排行']
},
xAxis: {
data: []
},
yAxis: {
splitLine: { show: false },//去除网格线
name: ''
},
series: [{
barWidth: "30px",
name: '发布排行',
type: 'bar',
itemStyle: {
normal: {
label: {
show: true,
position: 'top',
textStyle: {
color: '#333'
}
}
}
},
data: []
}]
});
myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画
var names = []; //类别数组(实际用来盛放X轴坐标值)
var nums = []; //销量数组(实际用来盛放Y坐标值)
$.ajax({
type: 'get',
url: '{:U("Luckyitem/data")}',//请求数据的地址
dataType: "json", //返回数据形式为json
success: function (result) {
console.log(result);
//请求成功时执行该函数内容,result即为服务器返回的json对象
$.each(result.list, function (index, item) {
names.push(item.department); //挨个取出类别并填入类别数组
nums.push(item.num); //挨个取出销量并填入销量数组
});
myChart.hideLoading(); //隐藏加载动画
myChart.setOption({ //加载数据图表
xAxis: {
data: names
},
series: [{
// 根据名字对应到相应的系列
name: '发布排行', //显示在上部的标题
data: nums
}]
});
},
error: function (errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
myChart.hideLoading();
}
});
};
loadOneColumn();
</script>
输出结果: