交互API（echarts对象和echartsInstance对象）

最新推荐文章于 2024-08-04 00:00:00 发布

漂流の少年

最新推荐文章于 2024-08-04 00:00:00 发布

阅读量992

点赞数 2

分类专栏： ECharts 文章标签： echarts

本文链接：https://blog.csdn.net/YINZHE__/article/details/120405330

版权

ECharts 专栏收录该内容

26 篇文章 3 订阅

订阅专栏

1.全局echarts对象

引入echarts.js文件之后就可以使用

常用方法

1.init方法

初始化ECharts实例对象

使用主题

2.registerTheme方法

注册主题

只有注册过的主题，才能在init方法中使用该主题

3.registerMap方法

注册地图数据

$.get('json/map/china.json',function(data){
        echarts.registerMap('china',data);
});

geo组件使用地图数据

var option = {
    geo: {
        type:'map',
        map:'china',
    }
}

4.connect方法

一个页面中可以有多个独立的图表

每一个图表对应一个ECharts实例对象

connect可以实现多图关联，传入联动目标为ECharts实例对象，支持数组

用途：保存图片的时候能自动拼接多个图表、刷新按钮、重置按钮、提示框联动等等...

var mCharts = echarts.init(document.querySelector('#div1'))
...
var mCharts2 = echarts.init(document.querySelector('#div2'))
...
echarts.connect([mCharts,mCharts2])

2.echartsInstance对象

可通过echarts.init方法调用之后得到

常用方法

1.setOption

用来设置图表的配置项以及数据

可多次调用，会对新旧配置进行一个合并(比如用来设置增量动画)

2.resize

用来实现图表自适应浏览器窗口大小的效果

常和window对象的resize事件结合使用

3.on/off

用于绑定/解绑事件处理函数

这样的事件可分为：

①鼠标事件

click、dblclick、mousedown、mousemove、mouseup

通过回调函数的参数arg可以获取与事件相关的数据信息

<script>
    var mCharts = echarts.init(document.querySelector('div'))
    ... 
    mCharts.on('click', function(arg){
      console.log(arg)
    })
    mCharts.off('click')        //对click事件解绑
</script>

②ECharts事件

legendselectchanged、'datazoom'、'pieselectchanged'、'mapselectchanged'等

通过回调函数的参数arg可以获取与事件相关的数据信息

以legendselectchanged事件（选中图例的变化）为例

<script>
      var mCharts = echarts.init(document.querySelector('div'))
      ...
      mCharts.on('legendselectchanged',function(arg){
        console.log(arg)
      })
  </script>

4.dispatchAction

使用代码模拟用户的行为

5.clear

清空当前实例，会移除实例中所有的组件和图表

清空之后可以再次使用setOption

6.dispose

销毁实例

销毁之后实例无法再使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="lib/echarts.min.js"></script>
  <script src="lib/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div style="width: 600px;height: 400px;"></div>
  <button id="btn1">触发行为</button>
  <button id="btn2">清空实例</button>
  <button id="btn3">setOption</button>
  <button id="btn4">销毁实例</button>
  <script>
      var mCharts = echarts.init(document.querySelector('div'))
      var pieData = [
        {
          name: '淘宝',
          value: 11231
        },
        {
          name: '京东',
          value: 22673
        },
        {
          name: '唯品会',
          value: 6123
        },
        {
          name: '聚美优品',
          value: 6700
        }
      ]
      var option = {
        tooltip:{
          show: true
        },
        series: [
          {
            type: 'pie',
            data: pieData,
          }
        ]
      }
      mCharts.setOption(option)
      $('#btn1').click(function(){
        mCharts.dispatchAction({
          type: 'showTip',  //事件类型
          seriesIndex: 0,   //图表的索引
          dataIndex: 2,     //数据的索引
        })
        mCharts.dispatchAction({
          type: 'highlight',//事件类型
          seriesIndex: 0,    //图表的索引
          dataIndex: 2,      //数据的索引
        })
      })
      $('#btn2').click(function(){
        // 清空图表的实例
        mCharts.clear()
      })
      $('#btn3').click(function(){
        // 重新设置option
        mCharts.setOption(option)
      })
      $('#btn4').click(function(){
        // 销毁mCharts
        mCharts.clear()
      })
  </script>
</body>
</html>

点击"触发行为"按钮