1 全局echarts对象

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

1.1 init方法

初始化ECharts实例对象

使用主题

1.2 registerTheme方法

注册主题

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

1.3 registerMap方法

注册地图数据

//记得在上面引入JQuery
$.get('json/map/china.json',function(chinaJson){
    echarts.registerMap('China',chinaJson)
});

geo组件使用地图数据

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

1.4 connect方法

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

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

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

保存图片自动拼接

扫描二维码关注公众号，回复： 15195275 查看本文章

刷新按钮

重置按钮

提示框联动、图例选择、数据范围修改等

2 echartInstance对象

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

2.1 setOption方法

1、设置或修改图表实例的配置项以及数据

2、多次调用setOption方法

(1)合并新的配置和旧的配置

(2)增量动画

2.2 resize方法

1、重新计算和绘制图表

2、一般和window对象的resize事件结合使用

window.onresize = function() {
    mycharts.resize();
}

2.3 on\off方法

1、绑定或者解绑事件处理函数

2、鼠标事件

常见事件：'click'、'dbclick'、'mousedown'、'mousemove'、'mouseup'

事件参数arg：和事件相关的数据信息

3、ECharts事件

常见事件：lengendaelectchanged、'datazoom'、'pieselectchanged'、'mapselectchanged'等

click和lengendaelectchanged的例子：

代码

<!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>饼状图的基本实现</title>
  <script src="../lib/echarts.min.js"></script>
</head>

<body>
  <div id="app" style="width: 600px;height: 400px;"></div>
  <script>
    // 1.Echarts 基本结构的创建
    // 引入js文件---创建容器---初始化对象---配置配置项---
    // 2.准备数据[{name;???, value:???},{}]
    // 运动与健康：1100，餐饮：2800，外出与旅行：4500，衣物：2202，电子游戏：2421，医药：800
    // 3.将type设置为pie
    var myCharts = echarts.init(document.querySelector('#app'))
    // 需要设置给饼图的数据
    var pieData = [
      {
        name: '运动与健康',
        value: '1100'
      },
      {
        name: '餐饮',
        value: '2800'
      },
      {
        name: '外出与旅行',
        value: '4500'
      },
      {
        name: '衣物',
        value: '2202'
      },
      {
        name: '电子游戏',
        value: '2421'
      },
      {
        name: '医药',
        value: '800'
      }

    ]
    var option = {
      // 注意：饼图不是直角坐标系图表，就不用配置x轴和y轴了
      legend: {
        data: ['运动与健康', '餐饮', '外出与旅行', '衣物', '电子游戏', '医药']
      },
      series: [
        {
          type: 'pie',
          data: pieData
        }
      ]
    }
    myCharts.setOption(option)
    myCharts.on('click', function (arg) {
      console.log(arg)
    })
    myCharts.on('legendselectchanged', function (arg) {
      console.log(arg)
    })
  </script>
</body>

</html>

2.4 dispatchAction方法

1、触发某些行为

2、使用代码模拟用户的行为

mChart.dispatchAction({
    type: '',
    seriesIndex: 0, //系列的索引
    dataIndex: 1 //数据的索引
})

2.5 clear方法

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

2、清空之后可以再次setOption

2.6 dispose方法

销毁实例销毁后无法再次被使用

echarts进阶--交互API