Echarts动态刷新数据---ajax调用（Demo）
以下用颜色标注部分为关键代码： ---使用ajax调用接口，动态获取（刷新）数据
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="keywords" content="" />
<meta name="description" content="" />
<!-- 移动端 浏览器中页面将以原始大小显示，不允许缩放 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<!-- iphone会把一串数字识别为电话号码，点击的时候会提示是否呼叫，屏蔽这功能则把telephone设置为no -->
<meta content="telephone=no" name="format-detection" />
<title></title>
<link rel="stylesheet" href="../css/index.css">
<link rel="stylesheet" href="../css/ys.css" />
</head>
<body class="county_data">
<div class="ctdt">
<div class="ctdt_top">
<i></i>
<span>省内各区县GDP/企业数量</span>
</div>
<div class="ctdt_down">
<div class="down_div">
<span class="span_border active"><span class="s2">沪深上市</span></span>
<span class="span_border"><span class="s2">新三板</span></span>
<span class="span_border"><span class="s2">上市后备</span></span>
<span class="span_border"><span class="s2 bd0">江苏四板</span></span>
</div>
<div id="chartmain" class="auto"></div>
</div>
</div>
</body>
<script type="text/javascript" src="../js/lib/jquery.min.js" ></script>
<script type="text/javascript" src="../js/lib/echarts.js" ></script>
<script type="text/javascript" src="../js/template/county_data.js" ></script>
<script type="text/javascript" src="../js/lib/rem.js" ></script>
<script>
$(function(){
$(".down_div").children("span").click(function(){
$(this).addClass("active");
$(this).siblings("span").removeClass("active");
})
$(".ctdt_top").children("i").click(function(){
window.location.href = 'Person_center.html?appFlag=goBack';
})
})
</script>
</html>
JS:
$(function() {
$(".span_border").eq(0).click(function() {
/*option.series[0].data = [325, 1680, 3160, 1136, 2317, 1377, 3160];
option.series[1].data = [17, 3, 3, 3, 3, 3, 3];
myChart.setOption(option);*/
var type = "0";
loadDatas(type);
})
$(".span_border").eq(1).click(function() {
/*option.series[0].data = [0, 1680, 3160, 1136, 2317, 1377, 3160];
option.series[1].data = [17, 3, 3, 3, 3, 0, 3];
myChart.setOption(option);*/
var type = "1";
loadDatas(type);
})
$(".span_border").eq(2).click(function() {
/*option.series[0].data = [325, 0, 3160, 1136, 2317, 1377, 3160];
option.series[1].data = [17, 3, 3, 0, 3, 3, 3];
myChart.setOption(option);*/
var type = "2";
loadDatas(type);
})
$(".span_border").eq(3).click(function() {
/*option.series[0].data = [325, 1680, 0, 1136, 2317, 1377, 3160];
option.series[1].data = [17, 0, 3, 3, 3, 3, 3];
myChart.setOption(option);*/
var type = "3";
loadDatas(type);
})
function loadDatas(type) {
myChart.clear();
myChart.showLoading(); //数据获取显示之前先加载一段动画
$.ajax({
type: "post",
url: "http://61.155.4.120:8080/jsee-interface/company/get_county_statistical.do",
async: true,
dataType: "json",
success: function(result) {
if(type == "0") { //沪深上市
var ccgcoListForStksectorGDP = result.result_info.ccgcoListForStksectorGDP;
for(var i = 0; i < ccgcoListForStksectorGDP.length; i++) {
var data = ccgcoListForStksectorGDP[i];
data1.push(data.gdp_value);
data2.push(data.num_com);
}
option.series[0].data = data1;
option.series[1].data = data2;
myChart.hideLoading(); //数据获取成功之后隐藏动画
myChart.setOption(option);
}
if(type == "1") { //新三板
var ccgcoListForPubSecuritiesmainGDP = result.result_info.ccgcoListForPubSecuritiesmainGDP;
var data3 = [];
var data4 = [];
for(var i = 0; i < ccgcoListForPubSecuritiesmainGDP.length; i++) {
var data = ccgcoListForPubSecuritiesmainGDP[i];
data3.push(data.gdp_value);
data4.push(data.num_com);
}
option.series[0].data = data3 ;
option.series[1].data = data4;
myChart.hideLoading(); //数据获取成功之后隐藏动画
myChart.setOption(option);
}
if(type == "2") { //上市后备
var ccgcoListForPreEnterPriseGDP = result.result_info.ccgcoListForPreEnterPriseGDP;
var data5 = [];
var data6 = [];
for(var i = 0; i < ccgcoListForPreEnterPriseGDP.length; i++) {
var data = ccgcoListForPreEnterPriseGDP[i];
data5.push(data.gdp_value);
data6.push(data.num_com);
}
option.series[0].data = data5;
option.series[1].data = data6;
myChart.hideLoading(); //数据获取成功之后隐藏动画
myChart.setOption(option);
}
if(type == "3") { //江苏四板
var ccgcoListForCifOrganGDP = result.result_info.ccgcoListForCifOrganGDP;
var data7 = [];
var data8 = [];
for(var i = 0; i < ccgcoListForCifOrganGDP.length; i++) {
var data = ccgcoListForCifOrganGDP[i];
data7.push(data.gdp_value);
data8.push(data.num_com);
}
option.series[0].data = data7;
option.series[1].data = data8;
myChart.hideLoading(); //数据获取成功之后隐藏动画
myChart.setOption(option);
}
//myChart.hideLoading();
},
error: function() {
alert("获取失败");
}
});
}
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('chartmain'));
var data1 = []; //存储gdp数据
var data2 = []; //存储数量
// 指定图表的配置项和数据
var option = {
title: {
text: '',
show: false
},
tooltip: {},
legend: {
orient: 'horizontal',
left: 20,
top: 10,
data: ['GDP/亿', '数量'],
},
grid: {
left: 60
},
xAxis: [{
splitNumber: 3,
position: 'top',
name: '单位/亿',
nameLocation: 'start',
axisLine: {
lineStyle: {
width: 0 //这里是坐标轴的宽度,为0就是不显示
}
},
axisTick: {
show: false
}
}, {
splitNumber: 3,
name: "单位/个",
position: 'bottom',
nameLocation: 'start',
axisLine: {
lineStyle: {
width: 0 //这里是坐标轴的宽度,为0就是不显示
}
},
axisTick: {
show: false
}
}],
dataZoom: [
{
id: 'dataZoomY',
type: 'slider',
yAxisIndex: [0],
filterMode: 'empty',
start: 20,
end: 80
}
],
yAxis: [{
data: ["高淳区", "常熟市", "昆山市", "丹阳市", "张家港市", "宜兴市", "昆山市", "昆山市", "丹阳市", "张家港市", "宜兴市", "昆山市"],
inverse: true,
}],
series: [{
type: 'bar',
barWidth: 20,
name: 'GDP/亿',
//data: [325, 1680, 3160, 1136, 2317, 1377, 3160],
data: data1,
label: {
normal: {
show: true,
position: 'right',
}
},
}, {
name: '数量',
type: 'bar',
barWidth: 20,
xAxisIndex: 1,
//data: [17, 3, 3, 3, 3, 3, 3],
data: data2,
label: {
normal: {
show: true,
position: 'right',
}
},
}]
};
myChart.showLoading(); //数据获取显示之前先加载一段动画
$.ajax({
type: "post",
url: "http://61.175.4.120:808/jse-interface/company/get_county_statistical.do",
async: true,
dataType: "json",
success: function(result) {
var ccgcoListForStksectorGDP = result.result_info.ccgcoListForStksectorGDP;
for(var i = 0; i < ccgcoListForStksectorGDP.length; i++) {
var data = ccgcoListForStksectorGDP[i];
data1.push(data.gdp_value);
data2.push(data.num_com);
}
myChart.hideLoading(); //数据获取成功之后隐藏动画
myChart.setOption(option);
},
error: function() {
alert("获取失败");
}
});
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
})
- echarts动态加载折线图数据demo
- echarts结合ajax动态获取数据库数据
- ajax动态赋值echarts（饼图和柱形图）
- 使用ajax技术无刷新动态调用新浪股票实时数据
- 【echarts】地图模块，展示一个动态流程图1.0（简单demo）
- 使用Echarts和Ajax动态加载数据进行大数据可视化
- 使用JQuery方式的Ajax调用demo.aspx.cs文件后台的方法
- echarts+ajax+json动态生成多个不同随机颜色的柱状图
- springmvc 动态修改返回值类型，实现方法既能被ajax调用，又能被同步请求调用
- [Echarts可视化] php和ajax连接数据库实现动态数据可视化
- [Echarts可视化] 二.php和ajax连接数据库实现动态数据可视化
- Echarts通过Ajax实现动态数据加载
- Echarts动态加载数据demo
- 动态调用数据的AJAX+JQuery方法
- MVC4中AJAX Html页面打开调用后台方法实现动态加载数据库中的数据
- Swift3.0 -- 反射机制Demo&动态调用命名空间
- Echarts K线图—Ajax动态刷新赋值
- echarts图表动态获取后台数据详解（三）--ajax跨域请求
- ECharts通过Ajax动态加载数据到图表