染卷不卷'blog

12年站长，AI实践中。互联网 IT行业，工作见闻、技术教程全分享。

程序源码

ECharts获取json数据动态展示（柱状图、折线统计图）

2018年12月6日 5 分钟

本文所给源码均基于官方实例源码下载后制作，本文源码所有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

染卷

本站文章也会定期同步到微信公众号，可以关注下避免错过~

建站 11年 359天
微信公众号

发表评论

邮箱不会公开，带 * 为必填。