Online图表JS增强

全局变量

• headId 当前图表的ID

• onClick 用于添加点击事件

  添加点击事件

  通过全局 onClick 对象来添加点击事件。
  不同的图表（柱状图、折线图、饼图）定义的方式不同

• onClick.bar 柱状图

• onClick.line 折线图
• onClick.pie 饼图

  示例

  

  // 点击柱状图
  onClick.bar = function () {
    this.$message.success("点击了柱状图！")
  }

  效果

  

  事件参数

  

  公共参数

  ```
• type：当前点击事件的类型（bar、line、pie）
• value：点击的值
• target：点击的图表原始对象

  <a name="FSihP"></a>
  #### 柱状图参数
  

• xField：点击的X轴名称
• yField：点击的Y轴名称（如果有多个Y轴的话，可以以此来判断）

  ![](https://cdn.nlark.com/yuque/0/2020/png/1694517/1605628407124-2babaf95-0ffe-4a96-a050-57817ebf64df.png#align=left&display=inline&height=122&margin=%5Bobject%20Object%5D&originHeight=122&originWidth=726&size=0&status=done&style=none&width=726)
  <a name="a9nVg"></a>
  #### 折线图参数
  

• xField：点击的X轴名称
• yField：点击的Y轴名称（如果有多个Y轴的话，可以以此来判断）

  ![](https://cdn.nlark.com/yuque/0/2020/png/1694517/1605628406927-0c522184-29fa-4441-8848-83b62033c57d.png#align=left&display=inline&height=122&margin=%5Bobject%20Object%5D&originHeight=122&originWidth=796&size=0&status=done&style=none&width=796)<br />注意：点击“点”和点击“线”传递的参数是不一样的，详见下图<br />![](https://cdn.nlark.com/yuque/0/2020/png/1694517/1605628407009-c95a68d5-95e8-4b4b-9dc6-d038d93de680.png#align=left&display=inline&height=397&margin=%5Bobject%20Object%5D&originHeight=397&originWidth=656&size=0&status=done&style=none&width=656)
  <a name="cvqJz"></a>
  #### 饼图参数
  

• item：点击的项目名称 ```