ECharts获取json数据动态展示（柱状图、折线统计图）
本文所给源码均基于官方实例源码下载后制作，本文源码所有js全部引用在线版，你也可以将这些js下载下来后自行引用。（ECharts在线示例：http://echarts.baidu.com/examples/）
一共两个文件，一个html，一个存放json数据的txt文件。第一次接触学习，有不少冗余数据凑合着看吧！
ECharts的强大之处我怕是只能学得一点皮毛，有兴趣的可以去官网看看百度出品，另外百度出品的一个富文本编辑器UEditor也不错，传送地址：https://ueditor.baidu.com/website/onlinedemo.html
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<script type="text/javascript" src="/js/jquery-1.8.2.js"></script>
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<br>
<?php
?>
55
<div id="traceProvinceOrder" style="width:100%; height:400px;"></div>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
<script type="text/javascript">
function loadOneColumn() {
? ? var myChart = echarts.init(document.getElementById('traceProvinceOrder'));
? ? // 显示标题，图例和空的坐标轴
? ? myChart.setOption({
? ? ? ? title: {
? ? ? ? ? ? text: '数据对比——异步加载'
? ? ? ? },
? ? ? ? tooltip: {},
/* tooltip: {//鼠标悬浮显示数据定位
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},*/
toolbox: {/*右上角 统计图像切换&下载*/
feature: {
dataView: {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
restore: {show: true},
saveAsImage: {show: true}
}
},
? ? ? ? legend: {
? ? ? ? ? ? data: ['发布排行-悬浮提示','数据2']/*上方标题*/
? ? ? ? },
? ? ? ? xAxis: {
? ? ? ? ? ? data: []
? ? ? ? },
? ? ? ? yAxis: [
{
type: 'value',
name: 'RMB',
axisLabel: {
formatter: '￥{value} '
}
},{
? ? ? ? ? ? splitLine: { show: false },//去除网格线
? ? ? ? ? ? name: ''
? ? ? ? }],
? ? ? ? series: [{
? ? ? ? ? ? barWidth: "30px",
? ? ? ? ? ? name: '发布排行-悬浮提示',
? ? ? ? ? ? type: 'bar',
? ? ? ? ? ? itemStyle: {
? ? ? ? ? ? ? ? normal: {
? ? ? ? ? ? ? ? ? ? label: {
? ? ? ? ? ? ? ? ? ? ? ? show: true,
? ? ? ? ? ? ? ? ? ? ? ? position: 'top',
? ? ? ? ? ? ? ? ? ? ? ? textStyle: {
? ? ? ? ? ? ? ? ? ? ? ? ? ? color: '#333'
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
/* type: 'line',
? ? ? ? ? ? itemStyle: {
? ? ? ? ? ? ? ? normal: {
? ? ? ? ? ? ? ? ? ? label: {
? ? ? ? ? ? ? ? ? ? ? ? show: true,
? ? ? ? ? ? ? ? ? ? ? ? position: 'top',
? ? ? ? ? ? ? ? ? ? ? ? textStyle: {
? ? ? ? ? ? ? ? ? ? ? ? ? ? color: '#05CE3E'
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },*/
? ? ? ? ? ? data: []
? ? ? ? },{
? ? ? ? ? ? barWidth: "30px",
? ? ? ? ? ? name: '数据2',
? ? ? ? ? ? type: 'bar',
? ? ? ? ? ? itemStyle: {
? ? ? ? ? ? ? ? normal: {
? ? ? ? ? ? ? ? ? ? label: {
? ? ? ? ? ? ? ? ? ? ? ? show: true,
? ? ? ? ? ? ? ? ? ? ? ? position: 'top',
? ? ? ? ? ? ? ? ? ? ? ? textStyle: {
? ? ? ? ? ? ? ? ? ? ? ? ? ? color: '#05CE3E'
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? data: []
? ? ? ? }]
? ? });
? ? myChart.showLoading(); ? ?//数据加载完之前先显示一段简单的loading动画
? ? var names = []; ? ?//类别数组（实际用来盛放X轴坐标值）
? ? var nums = []; ? ?//销量数组（实际用来盛放Y坐标值）
var json_data_x = new Array();
var json_data_y = new Array();/*数据*/
var json_name = [];
? ? $.ajax({
? ? ? ? type: 'get',
? ? ? ? url: './index_fbph.txt',//请求数据的地址
? ? ? ? dataType: "json", ? ? ? ?//返回数据形式为json
result : {},
? ? ? ? success: function (result) {
? ? ? ? ? ? //请求成功时执行该函数内容，result即为服务器返回的json对象
? ? ? ? ?
$.each(result,function (i,item) { //循环
json_name.push(item.name);/* xx数据 xx数据1 xx数据2*/
// alert(i);
json_data_x[i]=new Array();//再次定义
json_data_y[i]=new Array();//
$.each(item['list'],function (j,item2) {//循环
json_data_x[i][j]=item2["department"];
// alert(i+' - '+item2["department"]+' - '+item2["num"]+'-- json->'+json_data_x[i][j]+' j='+j);
json_data_y[i][j]=item2["num"];
});
});
? ? ? ? ? ? myChart.hideLoading(); ? ?//隐藏加载动画
? ? ? ? ? ? myChart.setOption({ ? ? ? ?//加载数据图表
? ? ? ? ? ? ? ? xAxis: {
data: json_data_x[0]
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? series: [{
? ? ? ? ? ? ? ? ? ? // 根据名字对应到相应的系列
name: json_name[0],
type: 'bar',/*line bar*/
data: json_data_y[0]
? ? ? ? ? ? ? ? },{
name: json_name[1],
type: 'bar',/*line bar*/
data: json_data_y[1]
? ? ? ? ? ? ? ? },{
name: json_name[2],
type: 'bar',/*line bar*/
data: json_data_y[2]
? ? ? ? ? ? ? ? },{
name: json_name[3],
type: 'bar',/*line bar*/
data: json_data_y[3]
? ? ? ? ? ? ? ? }]
? ? ? ? ? ? });
? ? ? ? },
? ? ? ? error: function (errorMsg) {
? ? ? ? ? ? //请求失败时执行该函数
? ? ? ? ? ? alert("图表请求数据失败!");
? ? ? ? ? ? myChart.hideLoading();
? ? ? ? }
? ? });
};
//loadOneColumn();
setTimeout(loadOneColumn(),1000);
</script>
</body>
</html>
index_fbph.txt
[{
"name":"发布排行-悬浮提示",
"list": [
{
"department": "和平区",
"num":480
},
{
"department": "河西区",
"num":880
},
{
"department": "河东区",
"num":466
},
{
"department": "河北区",
"num":990
},
{
"department": "南开区",
"num":450
},
{
"department": "南er区",
"num":675
}
]
},
{
"name":"发布排行-悬浮提示2",
"list": [
{
"department": "平区",
"num":48
},
{
"department": "西区",
"num":88
},
{
"department": "东区",
"num":46
},
{
"department": "北区",
"num":99
},
{
"department": "开区",
"num":45
},
{
"department": "南er区",
"num":375
}
]
},
{
"name":"发布排行-悬浮提示3",
"list": [
{
"department": "平区",
"num":48
},
{
"department": "西区",
"num":88
},
{
"department": "东区",
"num":46
},
{
"department": "北区",
"num":99
},
{
"department": "开区",
"num":45
},
{
"department": "南er区",
"num":375
}
]
},
{
"name":"发布排行-悬浮提示4",
"list": [
{
"department": "平区",
"num":48
},
{
"department": "西区",
"num":88
},
{
"department": "东区",
"num":46
},
{
"department": "北区",
"num":99
},
{
"department": "开区",
"num":45
},
{
"department": "南er区",
"num":375
}
]
},
{
"name":"发布排行-悬浮提示5",
"list": [
{
"department": "平区",
"num":48
},
{
"department": "西区",
"num":880
},
{
"department": "东区",
"num":46
},
{
"department": "北区",
"num":99
},
{
"department": "开区",
"num":45
},
{
"department": "南er区",
"num":375
}
]
},
{
"name":"发布排行-悬浮提示6",
"list": [
{
"department": "平区",
"num":48
},
{
"department": "西区",
"num":88
},
{
"department": "东区",
"num":46
},
{
"department": "北区",
"num":99
},
{
"department": "开区",
"num":45
},
{
"department": "南er区",
"num":975
}
]
}]
本实例可在柱状图、折线图、默认统计图来回切换，支持以图片格式下载保存。更多更丰富的功能自行研究~
json格式验证\在线编辑器：http://www.bejson.com/jsoneditoronline/
本教程来源参考学习地址：https://blog.csdn.net/u012767607/article/details/76584999
基于互联网精神，在注明出处的前提下本站文章可自由转载！
本文链接：https://ranjuan.cn/echarts获取json数据动态展示/
赞赏
微信赞赏
支付宝赞赏
sql语句中use与go的用法
centos7-vpn-client
php调试xdebug与xhprof
发表评论