前言
- 本篇来学习下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>
