Echart 组件的记录
Echart组件
1、Echart组件的使用
1.1、Echart 官方事例
通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图，下面是完整代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
在实际使用中，依据实际需求对Option进行设置；预制给一个模板Option，然后依据实际需要，对相应的属性进行修改。在实现的时候可以对grid属性、dataZoom属性、xAxis属性、yAxis属性、series属性、dataSet属性等封装成函数，依次修改。
1.2、Echart 在其他框架的使用
在项目中，echarts一般嵌入到其他的框架中；这样就可以简单的设置一些特殊属性，一些通用操作，可以被封装起来。
2、Echart中dataset属性(新)
ECharts 4 开始支持了 数据集（dataset）组件用于单独的数据集声明，从而数据可以单独管理，被多个组件复用，并且可以自由指定数据到视觉的映射。这在不少场景下能带来使用上的方便。之前数据一般存放在series中的data属性中。用dataset会比之前的老方法更方便一些。属性如下：
-
dataset. id
组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。
-
dataset. source
原始数据。一般来说，原始数据表达的是二维表。可以用如下这些格式表达二维表：
二维数组，其中第一行/列可以给出 维度名，也可以不给出，直接就是数据：[ ['product', '2015', '2016', '2017'], ['Matcha Latte', 43.3, 85.8, 93.7], ['Milk Tea', 83.1, 73.4, 55.1], ['Cheese Cocoa', 86.4, 65.2, 82.5], ['Walnut Brownie', 72.4, 53.9, 39.1] ] -
dataset. dimensions
-
dataset. sourceHeader
详细使用可以查阅，echarts官网的配置手册中的配置项。需要指出的配置手册中，dataset属性有疑惑，实际上它既可以是个数组也可以是个对象
3、基础属性设置
Title设置
title也可以设置多个，不过title需要制定具体的位置，可以参考官网样例：
var titles=[]
titles.push({
textAlign: 'center',
text: name,
textStyle: {
fontSize: 12,
fontWeight: 'normal'
}
