引入ECharts
echarts提供多种引入方式，请根据你的项目类型选择合适的方式：
模块化包引入
如果你熟悉模块化开发，你的项目本身就是模块化且遵循AMD规范的，那引入echarts将很简单，使用一个符合AMD规范的模块加载器，如esl.js，只需要配置好packages路径指向src即可，你将享受到图表的按需加载等最大的灵活性，由于echarts依赖底层zrender，你需要同时下载zrender到本地，可参考demo，你需要配置如下。
需要注意的是，包引入提供了开发阶段最大的灵活性，但并不适合直接上线，减少请求的文件数量是前端性能优化中最基本但很重要的规则，务必在上线时做文件的连接压缩。
//from echarts example
require.config({
packages: [
{
name: 'echarts',
location: '../../src',
main: 'echarts'
},
{
name: 'zrender',
location: '../../../zrender/src', // zrender与echarts在同一级目录
main: 'zrender'
}
]
})
模块化单文件引入（推荐）
如果你使用模块化开发但并没有自己的打包合并环境，或者说你不希望在你的项目里引入第三方库的源文件，我们建议你使用单文件引入，同模块化包引入一样，你需要熟悉模块化开发。
自2.1.8起，我们为echarts开发了专门的合并压缩工具echarts-optimizer。如你所发现的，build文件夹下已经包含了由echarts-optimizer生成的单文件：
dist（文件夹） : 经过合并、压缩的单文件
line.js : 折线图（如需折柱动态类型切换，require时还需要echarts/chart/bar）
bar.js : 柱形图（如需折柱动态类型切换，require时还需要echarts/chart/line）
scatter.js : 散点图
k.js : K线图
pie.js : 饼图（如需饼漏斗图动态类型切换，require时还需要echarts/chart/funnel）
radar.js : 雷达图
map.js : 地图
force.js : 力导向布局图（如需力导和弦动态类型切换，require时还需要echarts/chart/chord）
chord.js : 和弦图（如需力导和弦动态类型切换，require时还需要echarts/chart/force）
funnel.js : 漏斗图（如需饼漏斗图动态类型切换，require时还需要echarts/chart/pie）
gauge.js : 仪表盘
eventRiver.js : 事件河流图
treemap.js : 矩阵树图
venn.js : 韦恩图
echarts.js : 这是包含AMD加载器的echarts主文件，需要通过script最先引入
chart（文件夹） : echarts-optimizer通过依赖关系分析同时去除与echarts.js的重复模块后为echarts的每一个图表类型单独打包生成一个独立文件，根据应用需求可实现图表类型按需加载
source（文件夹） : 经过合并，但并没有压缩的单文件，内容同dist，可用于调试
采用单一文件使用例子见ECharts单一文件引入，存放在example/www下，首先你需要通过script标签引入echarts主文件
//from echarts example<body>
<div id="main" style="height:400px"></div>
...
<script src="./js/echarts.js"></script>
</body>
在主文件引入后你将获得一个AMD环境，配置require.conifg如下：
//from echarts example<body>
<div id="main" style="height:400px"></div>
...
<script src="./js/echarts.js"></script>
<script type="text/javascript">
require.config({
paths: {
echarts: './js/dist'
}
})
</script>
</body>
require.config配置后就可以通过动态加载使用echarts
//from echarts example<body>
<div id="main" style="height:400px"></div>
...
<script src="./js/echarts.js"></script>
<script type="text/javascript">
require.config({
paths: {
echarts: './js/dist'
}
})
require(
[
'echarts',
'echarts/chart/line', // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表
'echarts/chart/bar'
],
function (ec) {
var myChart = ec.init(document.getElementById('main'))
var option = {
...
}
myChart.setOption(option)
}
)
</script>
</body>
总结来说，模块化单文件引入ECharts，你需要如下4步：
为ECharts准备一个具备大小（宽高）的Dom（当然可以是动态生成的）
通过script标签引入echarts主文件
为模块加载器配置echarts的路径，从当前页面链接到echarts.js所在目录，见上述说明
动态加载echarts及所需图表然后在回调函数中开始使用（容我罗嗦一句，当你确保同一页面已经加载过echarts，再使用时直接require('echarts').init(dom)就行）
详见入门教程 ( Getting started ) »
标签式单文件引入
自1.3.5开始，ECharts提供标签式引入。如果你的项目本身并不是基于模块化开发的，或者是基于CMD规范（如使用的是seajs），那么引入基于AMD模块化的echarts可能并不方便，我们建议你采用srcipt标签式引入，忘掉require。Srcipt标签引入echarts后将可以直接使用两个全局的命名空间：echarts，zrender，可参考ECharts标签式引入，需要注意的是excanvas依赖body标签插入Canvas节点去判断Canvas的支持，如果你把引用echarts的script标签放置head内在IE8-的浏览器中会出现报错，解决的办法就是把标签移动到body内（后）。
标签式引入环境中，常用模块的引用可通过命名空间直取，同模块化下的路径结构，如：
echarts.config = require('echarts/config')， zrender.tool.color = require('zrender/tool/color')
//from echarts example<body>
<div id="main" style="height:400px"></div>
...
<script src="example/www2/js/dist/echarts-all.js"></script>
<script>
var myChart = echarts.init(document.getElementById('main'))
var option = {
...
}
myChart.setOption(option)
</script>
</body>
D3是目前最流行的JavaScript可视化图表库之一，D3的图表类型非常丰富，并且支持SVG格式，因此应用十分广泛，也有很多图表插件基于D3开发，比如MetricsGraphics.js，在D3上构建的数据图表非常强大。
D3的特点
允许绑定任意数据到DOM，将数据驱动转换应用到Document中。
不仅可以创建精美的HTML表格，而且可以绘制折线图、柱形图和饼图等数据图表。
支持SVG，在Web页面上渲染毫无压力。
回到顶部
D3的使用方法
关于D3的具体用法，可以看D3图形库API参考这篇文章。本文主要对介绍一些经典图表的实现效果及代码。
index.html代码：
<!DOCTYPE html>
<meta charset="utf-8">
<style>
svg {
font: 10px sans-serif
}
.y.axis path {
display: none
}
.y.axis line {
stroke: #fff
stroke-opacity: .2
shape-rendering: crispEdges
}
.y.axis .zero line {
stroke: #000
stroke-opacity: 1
}
.title {
font: 300 78px Helvetica Neue
fill: #666
}
.birthyear,
.age {
text-anchor: middle
}
.birthyear {
fill: #fff
}
rect {
fill-opacity: .6
fill: #e377c2
}
rect:first-child {
fill: #1f77b4
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 20, right: 40, bottom: 30, left: 20},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom,
barWidth = Math.floor(width / 19) - 1
var x = d3.scale.linear()
.range([barWidth / 2, width - barWidth / 2])
var y = d3.scale.linear()
.range([height, 0])
var yAxis = d3.svg.axis()
.scale(y)
.orient("right")
.tickSize(-width)
.tickFormat(function(d) { return Math.round(d / 1e6) + "M" })
// An SVG element with a bottom-right origin.
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
// A sliding container to hold the bars by birthyear.
var birthyears = svg.append("g")
.attr("class", "birthyears")
// A label for the current year.
var title = svg.append("text")
.attr("class", "title")
.attr("dy", ".71em")
.text(2000)
d3.csv("population.csv", function(error, data) {
// Convert strings to numbers.
data.forEach(function(d) {
d.people = +d.people
d.year = +d.year
d.age = +d.age
})
// Compute the extent of the data set in age and years.
var age1 = d3.max(data, function(d) { return d.age }),
year0 = d3.min(data, function(d) { return d.year }),
year1 = d3.max(data, function(d) { return d.year }),
year = year1
// Update the scale domains.
x.domain([year1 - age1, year1])
y.domain([0, d3.max(data, function(d) { return d.people })])
// Produce a map from year and birthyear to [male, female].
data = d3.nest()
.key(function(d) { return d.year })
.key(function(d) { return d.year - d.age })
.rollup(function(v) { return v.map(function(d) { return d.people }) })
.map(data)
// Add an axis to show the population values.
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + width + ",0)")
.call(yAxis)
.selectAll("g")
.filter(function(value) { return !value })
.classed("zero", true)
// Add labeled rects for each birthyear (so that no enter or exit is required).
var birthyear = birthyears.selectAll(".birthyear")
.data(d3.range(year0 - age1, year1 + 1, 5))
.enter().append("g")
.attr("class", "birthyear")
.attr("transform", function(birthyear) { return "translate(" + x(birthyear) + ",0)" })
birthyear.selectAll("rect")
.data(function(birthyear) { return data[year][birthyear] || [0, 0] })
.enter().append("rect")
.attr("x", -barWidth / 2)
.attr("width", barWidth)
.attr("y", y)
.attr("height", function(value) { return height - y(value) })
// Add labels to show birthyear.
birthyear.append("text")
.attr("y", height - 4)
.text(function(birthyear) { return birthyear })
// Add labels to show age (separate not animated).
svg.selectAll(".age")
.data(d3.range(0, age1 + 1, 5))
.enter().append("text")
.attr("class", "age")
.attr("x", function(age) { return x(year - age) })
.attr("y", height + 4)
.attr("dy", ".71em")
.text(function(age) { return age })
// Allow the arrow keys to change the displayed year.
window.focus()
d3.select(window).on("keydown", function() {
switch (d3.event.keyCode) {
case 37: year = Math.max(year0, year - 10) break
case 39: year = Math.min(year1, year + 10) break
}
update()
})
function update() {
if (!(year in data)) return
title.text(year)
birthyears.transition()
.duration(750)
.attr("transform", "translate(" + (x(year1) - x(year)) + ",0)")
birthyear.selectAll("rect")
.data(function(birthyear) { return data[year][birthyear] || [0, 0] })
.transition()
.duration(750)
.attr("y", y)
.attr("height", function(value) { return height - y(value) })
}
})
