使用ECharts对数据进行可视化-阿里云开发者社区

开发者社区> 开发与运维> 正文

使用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



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

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章