Echarts简介:

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

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

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

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


一: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 ~~~