1. 刷新图表
使用 setOption 方法可以刷新图表,更新图表的配置项和数据。
// 初始化图表
var myChart = echarts.init(document.getElementById('myChart'));
// 刷新图表
myChart.setOption({
series: [{
data: [10, 20, 30, 40, 50]
}]
});
2. 重绘图表
使用 resize 方法可以重绘图表,主要用于在容器大小变化时调整图表的尺寸。
// 初始化图表
var myChart = echarts.init(document.getElementById('myChart'));
// 重绘图表
myChart.resize();
3. 动态添加数据
通过 appendData 方法可以向图表中动态添加数据。
// 初始化图表
var myChart = echarts.init(document.getElementById('myChart'));
// 动态添加数据
myChart.appendData({
seriesIndex: 0,
data: [60, 70, 80, 90, 100]
});
4. 获取图表实例
使用 getInstanceByDom 方法可以根据 DOM 元素获取图表实例。
// 获取图表实例
var myChart = echarts.getInstanceByDom(document.getElementById('myChart'));
// 进行操作
myChart.setOption({/* ... */});
5. 注册自定义事件
通过 on 方法可以注册自定义事件,监听图表上的交互事件。
// 初始化图表
var myChart = echarts.init(document.getElementById('myChart'));
// 注册点击事件
myChart.on('click', function(params) {
console.log('Clicked on', params);
});
6. 移除自定义事件
使用 off 方法可以移除已注册的自定义事件监听器。
// 初始化图表
var myChart = echarts.init(document.getElementById('myChart'));
// 注册点击事件
function clickHandler(params) {
console.log('Clicked on', params);
}
myChart.on('click', clickHandler);
// 移除点击事件
myChart.off('click', clickHandler);
这些操作可以让你更加灵活地控制图表的展示和交互。在实际使用中,根据需求选择适当的操作方法,以实现图表的动态更新和用户交互。详细的 API 文档可以在 ECharts 的[官方文档](https://echarts.apache.org/zh/api.html)中找到。
转载请注明出处:http://www.zyzy.cn/article/detail/5069/ECharts