开发者社区> 黑风寨1号> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

使用ECharts对数据进行可视化

简介: 通过对数据可视化,可以让数据更容易理解,激发数据使用者的 想象力。 在阿里云上,可以使用DataV进行数据的可视化。 在阿里云下,可以使用ECharts进行数据的可视化。 下面,是使用ECharts对数据进行可视化的例子。
+关注继续查看

通过对数据可视化,可以让数据更容易理解,激发数据使用者的 想象力。

在阿里云上,可以使用DataV进行数据的可视化。

在阿里云下,可以使用ECharts进行数据的可视化。

下面,是使用ECharts对数据进行可视化的例子。


准备

搭建好Apache 2+PHP 7+MySQL 5环境

从http://echarts.baidu.com/download.html下载echarts.js

从http://jquery.com/download/下载jQuery


思路

采用Ajax,通过php,从mysql取出数据,然后将数据使用ECharts展示。

如果想要动态刷新图标,那么设置一个定时器,定时取数,就可以达到目的。

所以,下面会编写2个脚本:index.html和data.php

index.html使用jQuery的ajax方法从data.php获取数据,dataphp实现从MySQL获取数据。


代码

index.html


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
	<script type="text/javascript" src="jquery-3.0.0.js"></script>
    <script src="echarts.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
	var myChart = echarts.init(document.getElementById('main'));
	// 显示标题,图例和空的坐标轴
	myChart.setOption({
		title: {
			text: '异步数据加载示例'
		},
		tooltip: {},
		legend: {
			data:['销量']
		},
		xAxis: {
			data: []
		},
		yAxis: {},
		series: [{
			name: '销量',
			type: 'bar',
			data: []
		}]
	});
	function addData(){
		$.get('data.php').done(function(data,status) {
		//$data=eval(data);
		var data=eval('('+data+')'); //转换为json
		// 填入数据
		myChart.setOption({
			xAxis: {
				data: data.categories
			},
			series: [{
				// 根据名字对应到相应的系列
				name: '销量',
				data: data.data
			}]
		});
		
		});
		
	}
	
	myChart.timeTicket = setInterval(function () {
		addData(); //动态刷新
	}, 500);
	
	
    </script>
	<p>ok</p>
</body>
</html>

data.php


<?php
$mysqli=new mysqli('localhost','demo','demo','demo');
$sql="SELECT * FROM sale_data2";
$result = $mysqli->query($sql,MYSQLI_USE_RESULT);
if($result){
	$i=0;
	$categories=array();
	$datas=array();
	while($row = $result->fetch_assoc())
	 {
		$categories[$i]=$row['category'];
		$datas[$i]=$row['data'];
		$i=$i+1;
	 }
	$arr=array('categories'=>$categories,'data'=>$datas);
	echo json_encode($arr);
}
$mysqli->close();
?>

总结

通过编写代码,可以实现像DataV那样的效果,只是没有DataV那样通过拖拽的方式方便和快捷。


参考:http://echarts.baidu.com/tutorial.html



版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Echarts5.3.2可视化案例-应用篇
Echarts5.3.2可视化案例-应用篇 Canvas案例 SVG案例
0 0
Echarts5.3.2可视化案例-交互篇(下)
Echarts5.3.2可视化案例-交互篇 Echarts简介 官网介绍 Echarts案例 Echarts 前后端交互
0 0
Echarts5.3.2可视化案例-交互篇(上)
Echarts5.3.2可视化案例-交互篇 Echarts简介 官网介绍 Echarts案例 Echarts 前后端交互
0 0
Echarts5.3.2可视化案例-布局篇(下)
Echarts5.3.2可视化案例-布局篇 00参考以及效果 01背景知识 大屏 flex布局
0 0
Echarts5.3.2可视化案例-布局篇(上)
Echarts5.3.2可视化案例-布局篇 00参考以及效果 01背景知识 大屏 flex布局
0 0
vue中引入echarts图表实现数据可视化
echarts是一款实现数据可视化非常强大的前端工具,本文来讲解具体如何使用
0 0
基于echarts组件制作数据可视化大屏
什么是数据可视化: 数据可视化主要旨在借助于图形化手段,清晰有效地传达与沟通信息。在实际工作中,数据分析能够帮助管理者进行判断和决策,以便采取适当策略与行动。 数据可视化分析有什么作用: 1.现状分析 告诉你过去发生了什么,告诉你企业现阶段的整体运营情况,通过各个经营指标的完成情况来衡量企业的运营状态,以说明企业整体运营是更好了还是坏了,好的程度是如何,坏的程度又到哪里。 2.原因分析 告诉你某一现状为什么发生,经过第一阶段的现状分析,我们对企业的运营情况有了一个基本的了解,但是不知道运营情况具体好在哪里,差在哪里,是什么原因引起的。这时候我们就需要开展原因分析,以进一步确定业务变动的
0 0
数据可视化图表插件--Echarts
使用步骤: 1.引用echarts相关js文件 2.在body里面写一个具有宽度或者高度的容器(div) 3.初始化echarts 4.指定图表的配置项和数据 5.显示图表 第4步中,数据的动态来源都是基于ajax与后台交互。 Demo示例:  详细学习地址:         ech
2215 0
数据可视化图表插件--HighCharts
使用步骤: 1.引入JQuery和HighCharts库 2.div设置id用于包含 Highcharts 绘制的图表 3.使用json数据格式来配置图表 4.动态数据与服务端交互 Demo示例: 详细学习地址:HighCharts中文教程                          菜鸟教程
881 0
文章
问答
文章排行榜
最热
最新
相关电子书
更多
WebGL在数据可视化中的实践
立即下载
数据展现:可视化报表及嵌入应用
立即下载
WebGL 在前端可视化中的实践
立即下载