交互API
- 前言
- 全局ECharts对象
- echartsInstance对象
前言
- 本篇来学习下ECharts中交互API的使用
全局ECharts对象
- 全局 echarts 对象是引入 echarts.js 文件之后就可以直接使用的
-
init ：初始化ECharts实例对象，使用主题
-
registerTheme：注册主题
echarts.registerTheme('CustomTheme', {
"color": [
"#5470c6",
"#91cc75",
"#fac858",
"#ee6666",
"#73c0de",
"#3ba272",
"#fc8452",
"#9a60b4",
"#ea7ccc"
],
- registerMap：注册地图数据
- connect：实现多图关联，传入联动目标为 EChart 实例，支持数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>全局ECharts对象</title>
<!-- cdn方式 引入echarts.js文件 -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
<!-- 引入自定义主题-->
<script src="lib/CustomTheme.js"></script>
<!--引入jquery-->
<script src="lib/jquery.min.js"></script>
</head>
<body>
<!-- 准备一个呈现图表的盒子 -->
<div id='app' style="width: 600px;height: 400px;border: 1px solid deeppink"></div>
<div id='map' style="width: 600px;height: 400px;border: 1px solid blueviolet"></div>
<script>
// init 初始化echarts实例对象 并设置主题
var myCharts = echarts.init(document.getElementById('app'), 'CustomTheme')
var xDataArr = ['张三', '李四', '王五', '大明白', '小糊涂'] // x轴数据
var yDataArr = [88, 92, 63, 77, 94] // y轴数据
var option = {
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
data: xDataArr
},
yAxis: {
type: 'value'
},
series: [
{
name: '分数',
type: 'bar', // 图表类型 bar:柱状图 line:折线图 pie:饼图
data: yDataArr,
markPoint: { // 标记最大最小值
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
markLine: {
data: [
{
type: 'average', name: '平均值'
}
]
},
label: {
show: true, // 柱状图显示数值
rotate: 30, // 值旋转角度
},
barWidth: '30%' // 柱的宽度
}
]
}
myCharts.setOption(option)
var myCharts2 = echarts.init(document.getElementById("map"))
// json/map/china.json 为本地的地图矢量数据
$.get('json/map/china.json', function (chinaJson) {
console.log(chinaJson) // chinaJson 地图矢量数据
// registerMap :注册地图矢量数据
echarts.registerMap('chinaMap', chinaJson)
var option = {
geo: {
type: 'map',// map是一个固定的值 类型
map: 'chinaMap',//chinaMap需要和registerMap中的第一个参数保持一致
roam: true, // 设置允许缩放以及拖动的效果
label: {
show: true // 展示标签
},
zoom: 1, // 设置初始化的缩放比例
}
}
myCharts2.setOption(option)
// connect : 实现多图关联
echarts.connect([myCharts, myCharts2])
})
</script>
</body>
</html>
- 多图联动保存的图片
echartsInstance对象
eChartsInstance 对象是通过 echarts.init 方法调用之后得到的实例对象
- setOption
- 设置或修改图表实例的配置项以及数据
- 多次调用setOption方法
合并新的配置和旧的配置
增量动画
- resize : 重新计算和绘制图表
window.onresize = function(){
myChart.resize();
}
- on/off：绑定或者解绑事件处理函数
- 鼠标事件
- 常见事件: ‘click’、‘dblclick’、‘mousedown’、‘mousemove’、‘mouseup’
- ECharts 事件
- legendselectchanged、‘datazoom’、‘pieselectchanged’、‘mapselectchanged’
- 鼠标事件
- dispatchAction: 主动触发某些行为, 使用代码模拟用户的行为
- clear：清空当前实例，会移除实例中所有的组件和图表；清空之后可以再次 setOption
- dispose：销毁实例；销毁后实例无法再被使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>echartsInstance对象</title>
<!-- cdn方式 引入echarts.js文件 -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
<script src="lib/jquery.min.js"></script>
</head>
<body>
<div id='app' style="width: 600px;height:400px"></div>
<button id="btn1">触发行为</button>
<button id="btn2">clear</button>
<button id="btn3">setOption</button>
<button id="btn4">dispose</button>
<script>
var mCharts = echarts.init(document.getElementById("app"))
var pieData = [
{
name: 'pass',
value: 80
},
{
name: 'fail',
value: 10
},
{
name: 'skip',
value: 5
},
{
name: 'error',
value: 5
}
]
var option = {
legend: {
data: ['pass', 'fail', 'skip', 'error']
},
tooltip: {
show: true
},
series: [
{
type: 'pie',
data: pieData,
label: {
show: true,
formatter: function (arg) {
console.log(arg)
return arg.data.name + '\n' + arg.percent + '%'
}
},
selectedMode: 'single', // multiple 多选 single 单选
selectedOffset: 30,// 偏移距离
// radius: ['50%', '80%']
}
]
}
mCharts.setOption(option)
// 事件监听
mCharts.on('click', function (arg) {
console.log(arg)
})
mCharts.off('click') // 解绑click的事件
// echarts事件变化
mCharts.on('legendselectchanged', function (arg) {
console.log('legendselectchanged', arg)
})
$('#btn1').click(function () {
// 模拟用户的行为
mCharts.dispatchAction({
type: 'highlight',
seriesIndex: 0, // 图表索引
dataIndex: 1 // 数据的索引 图表中的哪一项
})
mCharts.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: 0
})
})
$('#btn2').click(function () {
// 清空图表的实例
mCharts.clear()
})
$('#btn3').click(function () {
// 重新设置option
mCharts.setOption(option)
})
$('#btn4').click(function () {
// 销毁mCharts
mCharts.dispose()
})
</script>
</body>
</html>
![P1827 [USACO3.4] 美国血统 American Heritage](https://img-blog.csdnimg.cn/5a47c30d5c244b23a1906a9544e832e9.png)
