Echarts自定义数据视图(DataView)-按钮名称-刷新方法

基于jquery3.1 & echarts.js;

了解更多细节请访问:  https://www.echartsjs.com

先上效果图:  gif没录好,大家可以自己把代码拷贝,到本地

 

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="utf-8" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>数据分析</title>
  <script src="../js/jquery-3.3.1.min.js"></script>
  <script src="../js/echarts.js"></script>
</head>
<body class="padding-top55" style="background-color: white">
      <!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
      <div id="echart1" style="margin-top:100px;width: 100%;height: 500px"></div>
</body>
<script type="text/javascript">
  $(function() {
### ECharts 数据视图刷新解决方案 对于ECharts图表的数据视图无法自动刷新或手动更新的问题,可以采取多种方式来解决这个问题。 #### 方法一:通过 `setOption` 更新数据 当需要动态更新图表中的数据时,可以通过调用实例对象上的 `setOption` 方法并传入新的配置项参数来进行局部更新。这种方式适用于大部分场景下的数据变化需求[^1]。 ```javascript // 假设 myChart 是初始化后的 ECharts 实例 function updateData(newData) { myChart.setOption({ series: [{ // 这里指定要修改的具体系列索引号 data: newData, }] }); } ``` #### 方法二:监听事件触发重绘 如果是在 Vue 组件内部使用 ECharts,则可以在侦听器中监控依赖属性的变化,在检测到新旧值不同步的情况下主动调用 `chart.resize()` 或重新设置 option 来达到刷新效果[^2]。 ```javascript watch: { chartData(newValue, oldValue){ if(JSON.stringify(newValue)!==JSON.stringify(oldValue)){ this.myChart.setOption(this.option); } } }, mounted(){ const initChart = () => { let dom = document.getElementById('main'); var myChart = echarts.init(dom); window.onresize = function() { setTimeout(() => { myChart.resize(); }, 100); }; this.myChart = myChart; this.$nextTick(function(){ this.myChart.setOption(this.option); }) }; initChart.call(this); } ``` #### 方法三:利用工具箱特性 在某些情况下,可能希望给用户提供一种更直观的方式来控制图表的行为。此时可以考虑启用 ECharts 的内置工具栏(toolbox),其中包含了用于显示/隐藏数据详情、恢复默认状态以及导出图像等功能按钮。特别是 `dataView` 功能允许用户查看原始数据,并且支持编辑后即时应用更改至图表上[^3]。 ```json { "toolbox": { "show": true, "orient": "vertical", "left": "right", "top": "center", "feature": { "dataView": {"readOnly": false}, "restore": {}, "saveAsImage": {} } } } ``` 以上三种方案可以根据实际应用场景灵活选用,从而有效应对 ECharts 图表数据视图刷新难题。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值