一、全局 echarts 对象

概念：

  全局 echarts 对象是引入 echarts.js 文件后可以直接使用的

官方 API 文档 (opens new window)：

1、常用方法：

• echarts.init( )
• registerTheme( ) ：自定义主题时接触过
• registerMap( ) ：ECharts 地图时接触过
• connect( )

2、connect()方法

  connect()方法是用于关联多个图表。

原理：

  一个页面可以有多个独立图表（多个 ECharts 实例对象），而 connect()可以实现多图关联，传入联动目标为 ECharts 实例对象，支持数组。

应用场景：

• 保存图片时自动拼接
• 刷新按钮
• 重置按钮
• 提示框联动、图例选择、数据范围修改等

// 图表一
mCharts.setOption({
  toolbox: {
    feature: {
      // 1、保存图片时自动拼接
      saveAsImage: {}
    }
  },
  series: [
    {
      type: 'bar',
      data: yDataArr
    }
  ]
})

// 图表二
$.get('json/map/china.json', function (ret) {
  echarts.registerMap('chinaMap', ret)

  mCharts2.setOption({
    geo: {
      type: 'map',
      map: 'chinaMap'
    }
  })

  // 图表🚩关联
  echarts.connect([mCharts, mCharts2]) // 将柱状图和地图关联起来
})

二、echartsInstance 对象

概念：

  echartsInstance 对象是通过 echarts.init 方法调用后得到的

官方 API 文档：

https://echarts.apache.org/zh/api.html#echarts

常用方法：

• setOption( )
• resize( ) ：图表自适应时接触过
• on\off( )
• dispatchAction( )
• clear( )
• dispose

1、on \ off( )方法 ✨

  on\off( )方法用于对事件的绑定或者解除。关于事件，具体可以查看官方 API 文档的events 部分 (opens new window)。

  应用场景：

map 地图中，点击省份时获取对应的数据信息。

• 鼠标事件

ⅰ.常见事件：'click'、'dblclick'、'mousedown'、'mousemove'、'mouseup'等（其中：dblclick 为双击点击事件）
ⅱ.事件参数(arg)：为触发事件元素的相关数据信息

<script>
  mCharts.on('click', function (arg) {
    console.log(arg)
    console.log('click...')
  }) // 对事件进行监听

  // mCharts.off('click') // 解绑click的事件
</script>

• ECharts 其他事件

ⅰ.常见事件：'legendselectchanged'、'datazoom'、'pieselectchange'、'mapselectchange'等等
ⅱ.事件参数(arg)：为触发事件元素的相关数据信息

<script>
  var option = {
    legend: {
      data: ['淘宝', '京东', '唯品会', '1号店', '聚美优品']
    }
  }
  mCharts.on('legendselectchanged', function (arg) {
    console.log(arg)
    console.log('legendselectchanged...')
  })
</script>

2、dispatchAction()方法

  dispatchAction( )方法用于触发某些行为，使用代码模拟用户的行为。关于行为，具体可以查看官方 API 文档的action 部分 (opens new window)。

ⅰ.常见行为：'hightlight'、'tooltip'等等
ⅱ.事件参数(arg)：为触发事件元素的相关数据信息

<script>
  $('#btn1').click(function () {
    // 模拟用户的行为
    mCharts.dispatchAction({
      type: 'highlight',
      seriesIndex: 0, // 系列的索引
      dataIndex: 1 // 数据的索引
    })
    mCharts.dispatchAction({
      type: 'showTip',
      seriesIndex: 0,
      dataIndex: 2
    })
  })
</script>

3、clear()方法、dispose()方法

<script>
  $('#btn2').click(function () {
    // 清空图表的实例（隐藏）
    mCharts.clear()
  })

  $('#btn3').click(function () {
    // 重新设置option（显示）
    mCharts.setOption(option)
  })

  $('#btn4').click(function () {
    // 销毁mCharts
    mCharts.dispose()
  })
</script>