【数据抓取】EChart图表展示

时间：2022-08-23 21:24:02

背景

当获取了数据，将数据处理成需要的格式并存入数据库之后

下一步的工作就是：分析数据，显示数据

当然分析数据是根据业务走的，用户想看数据，我们能分析出来什么，这是我们的思维逻辑

我们要做的就是把根据需求分析处理数据，并显示数据

功能

以图表形式直观的显示数据

材料

本次采用的EChart，地址 http://echarts.baidu.com
下载好对应的js文件，引用就可以直接使用

也可以采用hcharts，地址 https://www.hcharts.cn

效果展示

【数据抓取】EChart图表展示—

代码

<body>
<form id="form1" runat="server">
<div></div>
</form>

<%-- 图表展示区 --%>
<div id="charts" style="margin-top:100px;">
<div id="chart1" style="width: 600px; height: 400px; float: left;"></div>
<div id="chart2" style="width: 600px; height: 400px; float: left;"></div>
</div>

</body>

<script src="js/echarts.js"></script>
<script src="js/jquery-1.9.1.min.js"></script>

<script type="text/javascript">
 $(document).ready(function () {
//图表1-显示资料的使用情况
var myChart1 = echarts.init(document.getElementById('chart1'));
// 显示标题，图例和空的坐标轴
 myChart1.setOption({
 title: {
 text: '资料使用情况'
 },
 tooltip: {},
 legend: {
 data: ['次数']
 },
 xAxis: {
 data: []
 },
 yAxis: {},
 series: [{
 name: '次数',
 type: 'bar',
 data: []
 }]
 });
//后台获取数据，显示资料的使用情况
 $.ajax({
 url: "Material.aspx/GetMaterialInfo",
 type: 'Post',
 contentType: "application/json; charset=utf-8",
 dataType: "json",
 success: function (data) {
var material = JSON.parse(data.d);
 myChart1.setOption({
 xAxis: {
 data: material.categories
 },
 series: [{
 name: '次数',
 data: material.data
 }]
 });
 }
 });


//图表2-显示个人的使用情况
var myChart2 = echarts.init(document.getElementById('chart2'));
// 显示标题，图例和空的坐标轴
 myChart2.setOption({
 title: {
 text: '张三-个人情况'
 },
 tooltip: {},
 legend: {
 data: ['平均水平', '用户情况']
 },
 radar: {
 indicator: [
 { name: '数据结构', max: 30 },
 { name: 'MySQL', max: 30 },
 { name: 'Angular2', max: 30 },
 { name: '设计模式', max: 30 },
 { name: 'J2EE', max: 30 }
 ]
 },
 series: [{
 name: '平均水平 vs 用户情况',
 type: 'radar',
 data: [
 {
 value: [],
 name: '平均水平'
 },
 {
 value: [],
 name: '用户情况'
 }
 ]
 }]
 });
//后台获取数据，设置个人雷达图的数据
 $.ajax({
 url: "Material.aspx/GetPersonalInfo",
 type: 'Post',
 contentType: "application/json; charset=utf-8",
 dataType: "json",
 success: function (data) {
var personal = JSON.parse(data.d);
 myChart2.setOption({
 series: [{
 data: [
 {
 value: personal.average_data,
 name: '平均水平'
 },
 {
 value: personal.personal_data,
 name: '用户情况'
 }
 ]
 }]
 });
 }
 });
 });
</script>
</html>

小结

这次主要是为了实现功能，测试整个流程是可以走通的，可以显示相关数据
当然这不是最后结果，呈现方式，显示的数据都需要进一步完善
EChar的功能还有很多，也很容易上手，相关内容可以自定义，一个不错的框架
标签：

相关文章