ECharts.js学习（一）
在项目开发的时候，在前端的数据需要用图表的形式展示。网上搜索了一下，发现有几种统计图库。具体有哪几种可以看：
一、ECharts.js的特点
这也是一款基于HTML5的图形库。图形的创建也比较简单，直接引用Javascript即可。使用这个库的原因主要有三点，一个是因为这个库是百度的项目，而且一直有更新，目前最新的是EChart 3；第二个是这个库的项目文档比较详细，每个点都说明的比较清楚，而且是中文的，理解比较容易；第三点是这个库支持的图形很丰富，并且可以直接切换图形，使用起来很方便。
先用个小案例
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <!DOCTYPE html> <body> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div id="main" style="height:400px"></div> <!-- ECharts单文件引入 --> <script src="http://echarts.baidu.com/build/dist/echarts.js"></script> <script type="text/javascript"> // 路径配置 require.config({ paths: { echarts: 'http://echarts.baidu.com/build/dist' } }); // 使用 require( [ 'echarts', 'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载 ], function (ec) { // 基于准备好的dom，初始化echarts图表 var myChart = ec.init(document.getElementById('main')); var option = { tooltip: { show: true }, legend: { data:['销量'] }, xAxis : [ { type : 'category', data : ["苹果","三星","小米","华为","oppo","酷派"] } ], yAxis : [ { type : 'value' } ], series : [ { "name":"销量", "type":"bar", "data":[100, 120, 150, 160, 220, 80] } ] }; // 为echarts对象加载数据 myChart.setOption(option); } ); </script> </body>
显示效果：
这个是我在CEharts官方文档的小案例：
官方文档：ECharts官方文档
二、CEharts进行步骤讲解
第一步，引用Js文件
<script type="text/javascript" src="js/echarts.js"></script>
js文件有几个版本，可以根据实际需要引用需要的版本。echarts.js下载链接
第一步，准备一个放图表的容器
<div id="main" style="600px; height: 400px;"></div>
第三步，设置参数，初始化图表
<script type="text/javascript"> //指定图标的配置和数据 var option = { title:{ text:'数据统计' }, tooltip:{}, legend:{ data:['手机销量'] }, xAxis:{ data:["苹果","小米","华为","三星"] }, yAxis:{ }, series:[{ name:'销量', type:'line', data:[800,1000,1300,400] }] }; //初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); //使用制定的配置项和数据显示图表 myChart.setOption(option); </script>
效果图：不清楚是因为我缩小网页了
饼图和折线图、柱状图有一点区别。主要是在参数和数据绑定上。饼图没有X轴和Y轴的坐标，数据绑定上也是采用value 和name对应的形式。
var option = { title:{ text:'ECharts 数据统计' }, series:[{ name:'访问量', type:'pie', radius:'60%', data:[ {value:1000,name:'苹果'}, {value:1200,name:'小米'}, {value:1800,name:'华为'}, {value:400,name:'三星'} ] }] };
效果截图
有关最基础的就讲到这里，下篇，我将如何通过后台数据完成图表。
想的太多，做的太少，中间的落差就是烦恼，要么去做，要么别想 少尉【20】