# Online图表JS增强 [TOC] ## 全局变量 * `headId` 当前图表的ID * `onClick` 用于添加点击事件 ## 添加点击事件 通过全局 onClick 对象来添加点击事件。 不同的图表(柱状图、折线图、饼图)定义的方式不同 * `onClick.bar` 柱状图 * `onClick.line` 折线图 * `onClick.pie` 饼图 ### 示例 ![](https://img.kancloud.cn/fe/80/fe8005c226f4e8356ea124dd059a76e6_477x159.png) ``` js // 点击柱状图 onClick.bar = function () { this.$message.success("点击了柱状图!") } ``` ### 效果 ![](https://img.kancloud.cn/35/43/3543a0fab64f35da5538c6def110cc59_993x462.gif) ### 事件参数 ![](https://img.kancloud.cn/c1/f0/c1f063068165df50e9a9fa687756fcf4_366x147.png) #### 公共参数 - `type`:当前点击事件的类型(bar、line、pie) - `value`:点击的值 - `target`:点击的图表原始对象 #### 柱状图参数 - `xField`:点击的X轴名称 - `yField`:点击的Y轴名称(如果有多个Y轴的话,可以以此来判断) ![](https://img.kancloud.cn/54/08/5408ba85d902f6400090ffe8e3148c11_726x122.png) #### 折线图参数 - `xField`:点击的X轴名称 - `yField`:点击的Y轴名称(如果有多个Y轴的话,可以以此来判断) ![](https://img.kancloud.cn/3e/fb/3efbfe4b0ceed1c009bf34ee0e0b5fab_796x122.png) 注意:点击“点”和点击“线”传递的参数是不一样的,详见下图 ![](https://img.kancloud.cn/c4/dc/c4dcd191ed5b03b38a02ce458491b774_656x397.png) #### 饼图参数 - `item`:点击的项目名称 ![](https://img.kancloud.cn/5e/12/5e123c5540b7078822d98c8b30d1150f_709x112.png)