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="width: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】