百度开源的绘图JS组件:Echarts组件(本篇博客仅仅是简介,入门级别)

Echarts简介:

          (1)Echarts组件是百度开发的一款开源绘图软件:即用即插,非常方便!!!

          (2)这个组件可以让数据在前台的显示更加美观;说白了,目前的理解是,这个组件仅仅是让数据以更好看的方式在前台显示;所以,很ok;

          (3)Echarts是一个JS组件!!!

          (4)Echarts内容非常丰富,感兴趣可以在官网上查询;官网的教程多,案例也多,总有一款适合你~~~haha

目录

一:Echarts简单使用范例: 

首先,根据教程,先下载Echarts组件的JS文件:

其次,将下载的文件导入到项目中去

然后,编写范例(这是重点!!!)

最后,观察效果

二:最后几句话


一:Echarts简单使用范例: 

首先,根据教程,先下载Echarts组件的JS文件:

其次,将下载的文件导入到项目中去

解压后,找到:echarts.min.js这个js文件:

将Echarts组件的JS文件,添加到项目中:需要将这个文件放在WebContent目录下;;;一般会在WebContent目录下新建一个文件夹,专门存放外部引入的js文件啦;

然后,编写范例(这是重点!!!)

根据官网的教程:total.html内容如下:

(1)第一步:引入 ECharts:<script type="text/javascript" src="js/echarts.min.js"></script>

(2)第二步::为 ECharts 准备一个具备高宽的 DOM 容器。<div id="main" style="width: 600px;height:400px;"></div>

(3)第三步:设置图表:先定义图片表,然后在option中设置图表的各种属性,最后将设置项激活;

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/echarts.min.js"></script>
</head>
<body>
	<div id="main" style="width: 600px; height: 400px;"></div>
	<script type="text/javascript">
		// 基于准备好的dom,初始化echarts实例
		// 获取div对象,利用echarts.init()对获取的div进行初始化;于是就得到了一个myChart图表对象;
		var myChart = echarts.init(document.getElementById('main'));  

		// 指定图表的配置项和数据
		var option = {
			title : {
				text : 'ECharts 入门示例'
			},
			tooltip : {},
			legend : {
				data : [ '销量' ]   // 
			},
			xAxis : {
				data : [ "衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子" ]
			},
			yAxis : {},    // y轴没有设置,表示显示对应的数值;;;数值就在下面的series中定义;
			series : [ {
				name : '销量',    // 这个需要和上面legend中的data的名称保持对应;
				type : 'line',    // 代表柱状图
				data : [ 5, 20, 36, 10, 10, 20 ]
			} ]
		};

		// 使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);   // 激活刚才在option的设置项
	</script>
</body>
</html>

最后,观察效果

启动应用:访问total.html:


二:最后几句话

其实,Echarts功能十分强大:不懂的时候,有需要的时候,可以多参考官网教程和案例!

而且,像这种东西,没事各种尝试尝试就行,多试,OK~~~

猜你喜欢

转载自blog.csdn.net/csucsgoat/article/details/114495014
今日推荐