美文网首页
2019-10-12 刷新echarts图形数据的方式

2019-10-12 刷新echarts图形数据的方式

作者: qiaoguoxing | 来源:发表于2019-10-12 09:46 被阅读0次

    第一种方式:像这样完全重绘一下echarts图形

    drawZjymqkChart () {

          let myChart = document.querySelector('#js-zjymqk-chart')

          // let chart = this.$echarts.init(myChart)

          // chart.setOption(chartFun.setTriangleChart(this.chartsData.zjymqk))

        },

    这样做有可能会存在问题,这相当于每次都重新绘制了一遍图形,还有就是不知道是什么原因导致一些图形不刷新(比如最近项目遇到的象形图)

    第二种方式:通过数据更新的方式

    首先把所画的图定义成一个全局的对象  例如:myChart: null,

    然后通过watch图形绑定数据的变化,执行数据刷新的函数: this.updateData(),在这里我们只改变了yDate和sdata的值。

    updateData () {

          let option = this.myChart.getOption()

          var sdata = this.chartsData.zjymqk.seriesData

          var yData = []

          for (var key in sdata) {

             yData.push(sdata[key])

          }

          option.series[0].data = yData

          option.series[1].data = yData

          this.myChart.setOption(option)

        },

    相关文章

      网友评论

          本文标题:2019-10-12 刷新echarts图形数据的方式

          本文链接:https://www.haomeiwen.com/subject/dngfmctx.html