Echart - 最好最强大效果最丰富的可视化图表插件

# 官网 http://echarts.baidu.com/ 
# demo http://echarts.baidu.com/gallery/index.html[/code] 
Echart

npm install echarts --save


[/code]
demo1 :  从简单的柱状图开始

核心知识点【setOption参数介绍】：[b]http://echarts.baidu.com/option.html#title[/b]

var echarts = require('echarts');

var myChart = echarts.init(document.getElementById('main'));

myChart.setOption({
title: { text: 'ECharts 入门示例' },
tooltip: {},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});




demo2 ： 异步数据加载和更新

ECharts 由数据驱动，数据的改变驱动图表展现的改变，因此动态数据的实现也变得十分简单。

var echarts = require('echarts');
var myChart = echarts.init(document.getElementById('main'));
myChart.showLoading();
// 显示标题，图例和空的坐标轴
myChart.setOption({
title: {
text: '异步数据加载示例'
},
tooltip: {},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: []
}]
});
setTimeout(function () {
myChart.hideLoading();
// 填入数据
myChart.setOption({
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
series: [{
// 根据名字对应到相应的系列
name: '销量',
data: [5, 20, 36, 10, 10, 20]
}]
});
},2000);