Echarts数据可视化学习——入门篇

Echarts入门篇

  • Echarts简介
  • 下载安装Echarts
  • 下载Hbuilder
  • 创建项目
  • 绘制图形
  • 补充

Echarts简介

Echarts数据可视化学习——入门篇_第1张图片

Echarts是一个使用 JavaScript实现的开源可视化库,提供大量常用的数据可视化图表,创建了坐标系、图例、提示、工具箱等基础组件,并在此上绘制折线图、柱状图、饼图、散点图、地理坐标/地图、K线图、雷达图、盒须图、热力图等,且同时支持任意维度的堆积和多图表混合展现。
ECharts兼容目前绝大部分浏览器(IE、Chrome、Edge、Firefox,Safari等)及兼容多种设备,可以随时随地展示。

下载安装Echarts

进入Echarts官网

Echarts数据可视化学习——入门篇_第2张图片
在ECharts官网点击“下载”中的“在线定制”,可自由选择所需图表、坐标系、组件进行打包下载,并且可对渲染引擎、兼容及压缩问题进行设置。选择需要的图表、组件后打包下载echarts.min.js文件。

下载Hbuilder

我们要安装一个开发者工具来编译代码,推荐使用Hbuilder。
进入Hbuilder官网

Echarts数据可视化学习——入门篇_第3张图片
根据你是windows系统还是Mac OS系统安装对应版本的Hbuilder,建议安装标准版。

一路回车即可

创建项目

进入Hbuilder界面,点击创建一个web项目,选择存放位置
Echarts数据可视化学习——入门篇_第4张图片
创建完成后,在界面左侧会出现一个项目文件,将下载的 echarts.min.js文件导入进来

Echarts数据可视化学习——入门篇_第5张图片

绘制图形

绘制一个简单的柱状图

设置标题并引入echarts.min.js:
Echarts数据可视化学习——入门篇_第6张图片
在绘图前我们需要为Echarts准备一个具备高宽的DOM容器:
Echarts数据可视化学习——入门篇_第7张图片
然后使用js获取dom元素,通过echarts.init方法初始化一个echarts实例:
在这里插入图片描述

指定图表的配置项和数据,配置图表的标题、工具箱:
Echarts数据可视化学习——入门篇_第8张图片

通过setOption方法生成一个简单的柱状图:
在这里插入图片描述
完整代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Bar</title>
		<!--引入echarts.min.js -->
		<script src="js/echarts.min.js"></script>
	</head>
	<body>
		<!--为Echarts准备一个具备大小(高宽)的DOM-->
		<div id="main" style="width: 600px;height: 400px;"></div>
		<script type="text/javascript">
			//基于准备好的dom,初始化echarts实例
			var myechart = echarts.init(document.getElementById('main'));
			//指定图表的配置项和数据
			var option = {
     
				title : {
     
					text:'Echarts 入门实例'
				},
				tooltip : {
     },
				legend : {
     
					data:['销量']
				},
				xAxis : {
     
					data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
				},
				yAxis : {
     },
				series : [{
     
					name : '销量',
					type : 'bar',
					data : [5,20,36,10,10,20]
				}]
			};
			//使用刚才指定的配置项和数据显示图表
			myechart.setOptions(option);
		</script>
	</body>
</html>

使用浏览器运行,这里使用谷歌:
Echarts数据可视化学习——入门篇_第9张图片
运行结果如下:
Echarts数据可视化学习——入门篇_第10张图片

补充

ECharts官网提供各种图形的实例代码,我们也可以根据需要在线绘制各种炫酷图形。
Echarts数据可视化学习——入门篇_第11张图片
Echarts数据可视化学习——入门篇_第12张图片

你可能感兴趣的:(Echarts数据可视化,可视化,数据可视化,javascript)