交互API
全局echarts对象
全局 echarts 对象是引入 echarts.js 文件之后就可以直接使用的
- echarts.init
初始化ECharts实例对象使用主题
- echarts.registerTheme
注册主题只有注册过的主题,才能在init方法中使用该主题
- echarts.registerMap
//注册地图数据
$.get('json/china.json', function (china) {
echarts.registerMap('china', china);
});
//geo组件使用地图数据
var option = {
geo: {
type: 'map',
map: 'china',
},
})
- echarts.connect
一个页面中可以有多个独立的图表
每一个图表对应一个 ECharts 实例对象
connect 可以实现多图关联，传入联动目标为 EChart 实例，支持数组
<body>
<div style="width: 600px;height:400px;border: 1px solid red"></div>
<div style="width: 600px;height:400px;border: 1px solid green" id="div1"></div>
<script>
var box = echarts.init(document.querySelector("div"))
var xDataArr = ['张三', '李四', '王五', '赵六']
var yDataArr = [80, 90, 70, 80]
var option = {
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
data: xDataArr
},
yAxis: {
type: 'value'
},
series: [
{
type: 'bar',
data: yDataArr,
markPoint: {
data: [
{
type: 'max', name: '最大值'
},
{
type: 'min', name: '最小值'
}
]
},
markLine: {
data: [
{
type: 'average', name: '平均值'
}
]
},
label: {
show: true,
rotate: 60
},
barWidth: '30%'
}
]
}
box.setOption(option)
var box2 = echarts.init(document.querySelector('#div1'))
$.get('json/map/china.json', function(res){
echarts.registerMap('china', res)
var option2 = {
geo: {
type: 'map',
map: 'china'
}
}
box2.setOption(option2)
echarts.connect([box, box2]) // 将柱状图和地图关联起来
})
</script>
</body>
加载的图片 下载之后的图片
echartsInstance对象
eChartsInstance 对象是通过 echarts.init 方法调用之后得到的
1>echartsInstance.setOption
- 设置或修改图表实例的配置项以及数据
- 多次调用setOption方法
- 合并新的配置和旧的配置
- 增量动画
2>echartsInstance.resize
重新计算和绘制图表，一般和window对象的resize事件结合使用
window.onresize = function(){
box.resize();
}
或者
windows.onresize=box.resize
3>echartsInstance.on和echartsInstance.off
绑定或者解绑事件处理函数
- 鼠标事件
常见事件: 'click'、'dblclick'、'mousedown'、'mousemove'、'mouseup' 等事件，参数 arg: 和事件相关的数据信息
box.on('click', function (arg) {
// console.log(arg)
console.log('点击了')
})
解绑事件:
box.off('click')
- ECharts 事件
常见事件：legendselectchanged、'datazoom'、'pieselectchanged'、'mapselectchanged'等，事件参数 arg: 和事件相关的数据信息
box.on('legendselectchanged', function (arg) {
console.log(arg)
console.log('图例选择发生了改变...')
})
- echartsInstance.dispatchAction
主动触发某些行为, 使用代码模拟用户的行为
// 触发高亮的行为
box.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: 1
})
// 触发显示提示框的行为
box.dispatchAction({
type: "showTip",
seriesIndex: 0,
dataIndex: 3
})
- echartsInstance.clear
清空当前实例，会移除实例中所有的组件和图表
清空之后可以再次 setOption
- echartsInstance.dispose
销毁实例
销毁后实例无法再被使用
