流程图
终于把视频看完，作为一个没有任何前端经验的人，可谓被大坑。就想赶紧总结一下，往下一个目标进发。
Echarts 主要适用于数据可视化开发人员，如果你只是想画图的话，真的没必要去学的很深。只是画图的话，其他任何可视化软件基本都可以实现其中的大部分功能。
内容主要有三部分，第一部分是主要的学习文档，第二部分是Echart核心部分，就是画图的代码框架，最后一部分是图形的细节添加。
Echart
1 主要文档
学习Echarts主要浏览几个网页就够了：
-
首页：http://echarts.baidu.com/
在首页有完整的说明，也专门的例子进行讲解，如果有一定前端基础，可以很快上手。而没有经验的，照模画样也可以弄出来。 -
一般例子：http://echarts.baidu.com/echarts2/doc/example.html
一般性的例子里面包含了常用的一般性表格，点击进去就可以看到代码。修改后点击刷新就能得到修改后的样子。
example1
code
- 特别例子：http://echarts.baidu.com/examples.html#chart-type-graph
- 画廊：http://gallery.echartsjs.com/explore.html#sort=ranktimeframe=allauthor=all
在特别例子和画廊里，有官方的精美例子，而Gallery里面则是用户自己制作的一些精美图形来进行分享。你所需要做的，就是过去拷贝代码拿来用。
example2
- 说明文档：http://echarts.baidu.com/echarts2/doc/doc.html
说明文档里面包含整个介绍说明就是个指导说明书。
doc
2 核心部分
核心部分就两部分：
- 开头
- option
对于开头部分，Echart总共有三种引入方式根据自己的需要再doc里面进行查询就好了。本文在这里举其中一例：
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height:400px"></div>
<!-- ECharts单文件引入 -->
<script src="D:\用户目录\下载\echarts-2.2.7\echarts-2.2.7\echarts.js"></script>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts图表
var myChart = echarts.init(document.getElementById('main'));
其中的
<script src="D:\用户目录\下载\echarts-2.2.7\echarts-2.2.7\echarts.js"></script>
可以引用本地也可以在网上直接引用，但推荐在官网下载后在本地用，更稳定。不同的包实现的功能也是不一样的，画不同的图形，需要引入不同的包。
包js
第二部分，option，也就是图形设置部分。前一部分算是代码的声明，后一部分则是控制图形的主体。同时，这部分可以直接拷贝例子中的代码，拿过来就可以用：
// 对，就这一部分，很重要！！！！
var option = {
title: {
text: '工作流条形图'
},
legend: {
data: ['计划完成时间','实际完成时间']
},
xAxis: {
type : 'time'
},
yAxis: {
type:'category',
data: ['任务一','任务二','任务三','任务四','任务五','任务六','任务七']
},
tooltip:{ trigger:'axis',
formatter:function(params) {
var res=params[0].name+"</br>"
var date0=params[0].data;
var date1=params[1].data;
var date2=params[2].data;
date0=date0.getFullYear()+"-"+(date0.getMonth()+1)+"-"+date0.getDate();
date1=date1.getFullYear()+"-"+(date1.getMonth()+1)+"-"+date1.getDate();
date2=date2.getFullYear()+"-"+(date2.getMonth()+1)+"-"+date2.getDate();
res+=params[0].seriesName+":"+date0+"</br>"
res+=params[1].seriesName+":"+date1+"</br>"
res+=params[2].seriesName+":"+date2+"</br>"
console.log(params[0]);
return res;
}
},
series: [
{
name:'开始时间',
type:'bar',
stack: '总量',
itemStyle : { normal: {color:'rgba(0,0,0,0)'}},
data:[
new Date("2015/09/2"),
new Date("2015/09/15"),
new Date("2015/09/15"),
new Date("2015/10/03"),
new Date("2015/10/04"),
new Date("2015/10/05"),
new Date("2015/10/06")]
},
{
name:'计划完成时间',
type:'bar',
stack: '总量',
data:[
new Date("2015/09/12"),
new Date("2015/09/20"),
new Date("2015/09/25"),
new Date("2015/10/05"),
new Date("2015/10/07"),
new Date("2015/10/09"),
new Date("2015/10/12")]
},
{
name:'实际完成时间',
type:'bar',
stack: '总量',
data:[
new Date("2015/09/5"),
new Date("2015/09/21"),
new Date("2015/09/26"),
new Date("2015/10/10"),
new Date("2015/10/15"),
new Date("2015/10/19"),
new Date("2015/10/16")]
}
]
};
上述其实就是图中的代码部分：
code
这个是收尾：
// 为echarts对象加载数据
myChart.setOption(option);
</script>
</body>
将上述代码直接复制粘贴到txt，保存为utc-8/html格式就可以直接打开得到文最初的图形了。
3 图形说明
其实所有的绘图软件都会包含这一部分，而这一部分也不可能背下来。我们能做的，就是知道有本参考书，什么时候需要了，一查就能找到答案。
所有的选项说明doc里面都有说明：
选项
说明
小结
- 包很重要。不同的功能用不同的包。
- option很重要。需要展示什么就找什么图。
- 细节很重要。需要的时候一点点查找。最重要的还是，你拿这个干什么，如果只是需要画一个图，真的没必要一头扎进去，excel/r/python都可以。
当然，要学的深还是需要自己挖掘一下的。更多的了解，可以在官网和交流区了解。
网友评论