## echarts 图表组件

使用方式：`<echart />` 标签

echarts，一个使用 JavaScript 实现的开源可视化库。

可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari 等）。

底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

echarts 提供了常规的折线图、柱状图、散点图、饼图、K 线图，用于统计的盒形图。

其他功能如地理数据可视化的地图、热力图、线图，关系数据可视化的关系图、旭日图，多维数据可视化的平行坐标。

还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

### 属性

- params - 对象，接口参数，默认：`{}`

- config - 对象，实例化对象的全局配置，配置后将无视下面的规则覆盖整个图表，多用于复杂的图表统计，默认：`{}`

- url - 字符串，拉取数据的接口地址，默认：`''`

- data - 对象，图表默认数据，没有 url 请求可以展示静态数据，默认：`{}`

- yAxis - 对象/字符串，Y 轴数据，默认：`value`

- xAxis - 对象/字符串，X 轴数据，默认：`category`

- tooltip - 对象，提示框，鼠标悬浮交互时的信息提示，默认：`{}`

- series - 对象，图表内容，默认：`{}`

- theme - 字符串，图表主题，不传为默认的设计稿风格，其他流行风格有`vintage`、`macarons`、`infographic`、`shine`、`roma`

- name - 字符串，图表名称，必传，默认：`''`

- title - 字符串，图表标题，默认：`未知`

- titleColor - 字符串，标题颜色，不传会从配置文件或主题中取默认值

- titleFontSize - 数字，标题字体大小，不传会从配置文件或主题中取默认值

- titleFontWeight - 数字/字符串，标题字体粗细，不传会从配置文件或主题中取默认值

- titleX - 数字/字符串，标题的水平位置，可以是 20 像素值，也可以是'20%'相对于容器高宽的百分比，也可以是 'left', 'center', 'right'，不传会从配置文件或主题中取默认值

- titleY - 数字/字符串，标题的垂直位置，可以是 20 像素值，也可以是'20%'相对于容器高宽的百分比，也可以是 'top', 'middle', 'bottom'，不传会从配置文件或主题中取默认值

- subTitle - 字符串，图表副标题，默认：`''`

- subTitleColor - 字符串，副标题颜色，不传会从配置文件或主题中取默认值

- subTitleFontSize - 数字，副标题字体大小，不传会从配置文件或主题中取默认值

- legendShow - 布尔对象，是否显示图例，默认：`true`

- legendType - 字符串，图例类型，'plain'：普通图例。缺省就是普通图例。'scroll'：可滚动翻页的图例。当图例数量较多时可以使用，默认：`plain`

- legendColor - 字符串，图例颜色，不传会从配置文件或主题中取默认值

- legendFontSize - 数字，图例字体大小，不传会从配置文件或主题中取默认值

- legendX - 数字/字符串，图例的水平位置，可以是 20 像素值，也可以是'20%'相对于容器高宽的百分比，也可以是 'left', 'center', 'right'，不传会从配置文件或主题中取默认值

- legendY - 数字/字符串，图例的垂直位置，可以是 20 像素值，也可以是'20%'相对于容器高宽的百分比，也可以是 'top', 'middle', 'bottom'，不传会从配置文件或主题中取默认值

- legendOrient - 字符串，图例朝向, horizontal -- 水平对齐，vertical -- 垂直对齐，默认：`horizontal`

- widthT - 字符串，图表宽度，默认：`870px`

- heightT - 字符串，图表高度，默认：`384px`

### 事件

- time-line-change 时间轴中的时间点改变后的方法,回调为当前页的索引值,在echart实例触发`timelinechanged`事件时触发

- series-click 点击方法，回调当前点击的图表值,在echart实例触发`click`事件时触发

### 其他

该组件（echart.vue）内部的echart实例（myChart）支持一些调用,如:

- 实例访问方法：

```
 <echart ref='echartRef'/>

 this.$refs.echartRef.XXX

```

- 可以监听的实例事件`timelinechanged`:

```
this.$refs.echartRef.myChart.on('timelinechanged', function (res) {
  //实现你的逻辑
})
```

- 可以监听的实例事件`click`:

```
this.$refs.echartRef.myChart.on('click', 'series.bar', function (res) {
  //实现你的逻辑
})
```

- 可以调用的实例方法`onresize`:

```
this.$refs.echartRef.myChart.onresize()
```

### 注意

1、图表对象实例化必须要有独一无二的 ID 和 ref 名称，否则图表出不来

2、做响应式开发图表，宽度不要定死，布局可以从父级来进行调整