# 一、全局 echarts 对象
概念:
全局 echarts 对象是引入 echarts.js 文件后可以直接使用的
# 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]) // 将柱状图和地图关联起来 })
Copied!
# 二、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>
Copied!
- ECharts 其他事件
ⅰ.常见事件:'legendselectchanged'、'datazoom'、'pieselectchange'、'mapselectchange'等等
ⅱ.事件参数(arg):为触发事件元素的相关数据信息
<script> var option = { legend: { data: ['淘宝', '京东', '唯品会', '1号店', '聚美优品'] } } mCharts.on('legendselectchanged', function (arg) { console.log(arg) console.log('legendselectchanged...') }) </script>
Copied!
# 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>
Copied!
# 3、clear()方法、dispose()方法
<script> $('#btn2').click(function () { // 清空图表的实例(隐藏) mCharts.clear() }) $('#btn3').click(function () { // 重新设置option(显示) mCharts.setOption(option) }) $('#btn4').click(function () { // 销毁mCharts mCharts.dispose() }) </script>
Copied!
← 显示和动画 Three.js入门 →