echart从后台返回数据,但是数据不更新的解决办法

今天在完成项目的时候遇到了后台数据更新,但是echart的图表却不更新,这时可以在setoption里面添加true,ECharts 中实现异步数据的更新,在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 setOption 填入数据和配置项就行。

echarts.init(document.getElementById('main')).setOption({
        xAxis: {
          type: 'category',
          // x轴
          data: data.abscissa,
          boundaryGap: [0, 3],
          axisTick: {
            show: false
          }
        },
        grid: {
          left: 0,
          right: 10,
          bottom: 30,
          top: 30,
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // type: "cross",
          },
          padding: [5, 10]
        },
        yAxis: {
          //  name: this.title,
          type: 'value',
          max: function(value) {
            return value.max + 5
          },
          axisLine: {
            show: false // 不显示坐标轴轴线
          },
          axisTick: {
            show: false // 不显示坐标轴刻度
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed'
            }
          }
        },
        series: this.temp
      }, true)
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现点击el-table不同行,显示该行数据echarts表格,可以按照以下步骤进行操作: 1. 在el-table中添加@click事件,绑定一个方法,用于处理点击事件。 2. 在该方法中获取当前点击的行数据,并将数据传递给要显示echarts表格的组件。 3. 在要显示echarts表格的组件中,接收传递过来的数据,并根据数据生成echarts图表。 以下是一个示例代码,供参考: ```html <template> <div> <el-table :data="tableData" @row-click="handleRowClick"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column prop="score" label="分数"></el-table-column> </el-table> <echarts-chart :chart-data="currentData"></echarts-chart> </div> </template> <script> import EchartsChart from './EchartsChart.vue'; export default { components: { EchartsChart }, data() { return { tableData: [ { name: '张三', age: 18, score: 90 }, { name: '李四', age: 20, score: 85 }, { name: '王五', age: 22, score: 95 } ], currentData: null } }, methods: { handleRowClick(row) { this.currentData = row; } } } </script> ``` 在上述代码中,我们在el-table组件中添加了@click事件,并绑定了handleRowClick方法。在该方法中,我们将当前点击的行数据赋值给currentData变量。 同时,在模板中添加了一个echarts-chart组件,并将currentData作为其属性传递。在echarts-chart组件中,我们可以根据传递的数据生成对应的echarts图表。 注意:以上示例代码中的echarts-chart组件是自定义的,需要根据具体需求进行编写。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值