# 一、全局 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>
更新于 : 7/8/2024, 10:21:14 AM