ECharts使用指南
简介：
?ECharts是百度开发的一个国内比较常用的网页图表工具，也算是它旗下不可多得的优秀工具之一。如果你看过其它的js图表工具就可以知道这玩意的强大之处了，相比其它xxChart，ECharts提供了基本上最完善的图表类型模板，api接口和配置项，其次，它用起来比较方便，现成的模板非常易于使用，如果不需要一些高级特性，那么只需要一点前端知识就能完成数据的可视化。
参考：
html及javascript
如果你完全不了解html和javascript的相关内容，有那么一些网站可以参考：
?W3Cschool
?廖雪峰的官网
这些或许并不是最好的参考，但可以作为方便的随时在手边的教程来使用。
那就开始吧：
第一步，引入ECharts：
?echars的引入十分简单，只需要在html中嵌入即可：
echarts.min.js从官网下载
此时echarts.min.js保存在html文件同目录下
如果不想在本地保存echart.js文件，可以采用cdn引入：
改为
之后就可以开始进入echarts的世界了
第二步，生成echarts对象： ?要创建图表首先要给图表一个安置的空间，所以可以在body内嵌入一个空的标签，赋值一个id，以用来存放图表对象，当然如果有多个图表那可以创建多个标签。参考官方的初始化方法，使用echarts.init(node)创建echarts对象，完整代码如下：
这个myChart就是重点关注对象，之后的几乎所有图表方法都跟这玩意有关。
第三步，设置配置项 ?echarts的需要通过一个option对象来进行配置，详细配置项见官网说明文档
?以折线图为例，option的形式类似于这样：
文章图片
折线图
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
};
其中series是数据系列，可以有多个，在这个折线图中只设置了一个
至于xAxis和yAxis是echarts提供的折线图配置项，要知道所有的可设置项可查看官方文档
第四步，载入option: ?如果要载入option，只需要调用setOption()就好了
myChart.setOption(option, true);
【ECharts使用指南】其中第二个参数为[notMerge]，当设置为false时，如果更新数据将会合并新旧数据
最后上一个完整版：
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
};
myChart.setOption(option, true);
常用的option配置项和对象方法 常用的mychart对象方法
myChart.showLoading(LoadingOption);
myChart.hideLoading();
添加showLoading()到加载数据之前可以显示一个Loading的界面，防止加载时间过长，hideLoading()清除加载页面
mychart.getOption();
获取option对象的克隆版本
mychart.dispose()
mychart.clear();
前者为释放图表，释放后不可在使用
后者为清空图表内容，清空后可再添加内容
常用的配置项 图例
legend: [{
data: categories.map(function (a) {
return a.name;
})，
selected: {
'系列1': true,
// 不选中'系列2'
'系列2': false
}
}],
因为原始数据不一定符合要求，所以data数据常常使用map和回调函数返回一个字符串数组
缩放
dataZoom: [
{ // 第一个 dataZoom 组件
radiusAxisIndex: [0, 2] // 表示这个 dataZoom 组件控制 第一个 和 第三个 radiusAxis
}]
dataZoom控制数据的缩放
以及最重要的
series:[{...},{...}]
series中包含了大量已有图表类型的配置项，具体内容参考配置项文档
异步加载数据 模板中常用的异步加载数据类型有json和图表类型用的gexf，有关gexf格式的详情可以看这里
为了方便起见，异步加载数据首先导入Jquery
加载gexf文件要先加载echarts的dataTool库
$.get('data.gexf',function(xml){
var graph = echarts.dataTool.gexf.parse(xml);
//通过dataTool解析gexf
}),
其中graph对象带有gexf中的节点信息
文章图片
graph
于是调用起来就非常方便了：
对于关系图，我们可以这样
series : [
{
name: 'graph',
type: 'graph',
layout: 'none',
data: graph.nodes,
links: graph.links
}
加载json文件同理：
$.get('data.json',function(data){
data.nodes;
//节点
data.links;
//边
})推荐阅读
- java简介|Java是什么（Java能用来干什么？）
- 7、前端--jQuery简介、基本选择器、基本筛选器、属性选择器、表单选择器、筛选器方法、节点操作、绑定事件
- 什么是张拉膜结构雨棚（有哪些特点？）
- ACI注册国际心理咨询师简介和可靠性分析
- iPhone手机这些使用指南|iPhone手机这些使用指南 你知道多少（）
- 新一代Python包管理工具
- 黑猴子的家（Flume简介）
- 开始你的第一个Echarts图表（分享自知乎网）
- Elasticsearch|Elasticsearch 简介
- OpenCV|OpenCV-Python实战（18）——深度学习简介与入门示例