ECharts动态数据加载
程序员文章站
2022-10-04 23:13:39
最近有用到ECharts做可视化报表，小结一下 一、准备数据 1.官网下载echarts.min.js 2.引入jquery.js 3.请求用的json数据 二、整体代码 一个简单的柱状图表展示 行动才是最具有价值，即使做错。——送给努力的你 ......
最近有用到echarts做可视化报表，小结一下
一、准备数据
1.官网下载
2.引入jquery.js
3.请求用的json数据
{
"list":[
{
"department":"和平区",
"num":480,
"ber":200
},
{
"department":"河西区",
"num":380,
"ber":460
},
{
"department":"河东区",
"num":366,
"ber":223
},
{
"department":"河北区",
"num":320,
"ber":210
},
{
"department":"南开区",
"num":300,
"ber":200
}
]
}
二、整体代码
<!doctype html>
<head>
<meta charset="utf-8">
<title>echarts</title>
</head>
<body>
<!-- 为echarts准备一个具备大小（宽高）的dom -->
<div id="traceprovinceorder" style="width:400px; height:400px;"></div>
<!-- echarts单文件引入 -->
<script src="echarts.min.js"></script>
<script src="../webapp/js/jquery.js"></script>
<script type="text/javascript">
var mychart = echarts.init(document.getelementbyid('traceprovinceorder'));
// 显示标题，图例和空的坐标轴
mychart.setoption({
title: {
text: '异步数据加载示例'
},
color: ["pink", 'red'],
tooltip: {},
legend: {
data: ['发布排行', '牵手排行'],
x:'70%'
},
xaxis: {
data: []
},
yaxis: {},
series: [{
barwidth: "20px",
name: '发布排行',
type: 'bar',
itemstyle: {
normal: {
label: {
show: true,
position: 'top',
textstyle: {
color: '#333'
}
}
}
},
data: []
},
{
barwidth: "20px",
name: '牵手排行',
type: 'bar',
itemstyle: {
normal: {
label: {
show: true,
position: 'top',
textstyle: {
color: '#333'
}
}
}
},
data: []
}
]
});
mychart.showloading(); //数据加载完之前先显示一段简单的loading动画
var names = []; //类别数组（实际用来盛放x轴坐标值）
var nums = []; //销量数组（实际用来盛放y坐标值）
var bers = []; //销量数组（实际用来盛放y坐标值）
$.ajax({
type: 'get',
url: 'city.json', //请求数据的地址
datatype: "json", //返回数据形式为json
success: function (result) {
//请求成功时执行该函数内容，result即为服务器返回的json对象
$.each(result.list, function (index, item) {
names.push(item.department); //挨个取出类别并填入类别数组\
nums.push(item.num); //挨个取出销量并填入销量数组
bers.push(item.ber); //挨个取出销量并填入销量数组
});
mychart.hideloading(); //隐藏加载动画
mychart.setoption({ //加载数据图表
xaxis: {
data: names
},
series: [{
// 根据名字对应到相应的系列
name: '发布排行', //显示在上部的标题
data: nums
},
{
// 根据名字对应到相应的系列
name: '牵手排行', //显示在上部的标题
data: bers
}
]
});
},
error: function (errormsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
mychart.hideloading();
}
});
</script>
</body>
一个简单的柱状图表展示
行动才是最具有价值，即使做错。——送给努力的你
上一篇： 前端之HTML
下一篇： 介绍一些关于JavaScript的误区