/echarts-package.js

echarts的二次封装，开发时可以更多的关注数据，用更少的代码实现图表。

Primary LanguageJavaScript

echarts-package.js

echarts的二次封装，开发时可以更多的关注数据，用更少的代码实现图表。


引用

通过 <script src="echarts-package.js"> 引用即可。

注意在引用 echarts-package.js 之前应该首先引用 echarts 。

通过 script 标签引入后，会生成全局变量 charts ， 如果变量冲突，可使用 charts 的方法 noConflict 解决变量冲突。
例如 var ch = charts.noConflict(); 即可用 ch 代替 charts 变量，并使 charts 被释放。


设置默认选项

charts.setDefault(type, public, component, data);

  1. type:图表类型
  2. public:公共选项(可选)
  3. component:组件选项(可选)
  4. data:数据选项(可选)

public/component/data选项详见echarts文档中的option


更改默认选项

charts.changeDefault(type, newItem);

  1. type:图表类型
  2. newItem:新的选项

你可以通过changeDefault方法来增加和改变type类型图表的默认选项，使用该方法后，新的图表默认的选项就会改变。


克隆选项

charts.cloneDefault(type, source);

  1. type:图表类型
  2. source:被clone的目标

假设你使用bar类型的图表时设置了默认选项，现在你想写一个line类型的图表，但它的选项和bar类型有很多重复，你可以用cloneDefault的方法clone出line图表的默认选项，再用changeDefault方法改变某些选项。


添加扩展

charts.extend(name, fun);

  1. name:扩展函数的名称
  2. fun:扩展的函数

charts的extend方法可以用来扩展自定义方法，用于补充未封装或自定义的一些方法。
注意：为了能够链式调用，你需要在你自定义的function中返回this对象。


charts方法

charts的方法支持链式调用，例如： 

charts('bar', '#myCharts')
.title('我的柱形图')
.axis('xAxis', ['a', 'b', 'c', 'd', 'e'])
.axis('yAxis', 'value')
.series([{name:"abc",data:[5,4,6,8,30]}])
.create();

charts(type, selector);

  1. type:图表类型
  2. selector:css选择器

你需要通过charts方法初始化一个图表，指定图表的type类型并使用css选择器选择一个具有宽高的DOM元素。

charts.title(text, config);

  1. type:图表类型
  2. config:配置项(可选)

title方法用来设置图表标题，config用来配置默认选项的额外选项，比如你可以通过传入{subtext:'副标题'}来设置副标题。

charts.legend(data, config);

  1. data:详见echarts文档legend中的data
  2. config:配置项(可选)

legend方法用来设置图例

charts.axis(axis, data, config);

  1. axis:坐标轴类型，传入xAxis或yAxis
  2. data:坐标轴的data，可以传入数组或坐标轴类型字符串
  3. config:配置项(可选)

axis方法用来设置坐标轴数据。

charts.series(series, config);

  1. series:详见echarts文档中的series
  2. config:配置项(可选)

series方法用来设置数据。

charts.create();

create方法最后调用，无需传入参数，使用默认的配置选项和传入的数据创建图表。