vue使用echarts是，动态获取数据，动态更新图表数据。

最新推荐文章于 2024-05-23 15:15:19 发布

东林牧之

最新推荐文章于 2024-05-23 15:15:19 发布

阅读量1.6w

点赞数 11

分类专栏： vue 文章标签： echarts vue.js

本文链接：https://blog.csdn.net/weixin_46371752/article/details/123342748

版权

vue 专栏收录该内容

28 篇文章 1 订阅

订阅专栏

当我们初始化完数据后，需要更新数据时，虽然请求成功，获取到新的数据。但是echarts的图表没有根据数据更新而更新，原因是数据更新了，但echarts还是初始化时的那个。

我们可以在请求成功后，重新初始化echarts。这样图表就能根据数据进行变化了。

         <div id="first-line-left" style="height: 220px;width: 500px">
           </div>
      
          <div class="first-left-input">
            <el-input v-model.number="pie_count" placeholder="输入50-300的数字"></el-input>
          </div>
          <el-button type="warning" @click="pie_submit(0,pie_count)">提交</el-button>

效果图是这个。

我设计的功能是：

1、进来时，就有默认的数据展示出来。

2、在input框中输入数字，提交到后端，获取到特定数据条数，更新图表。

函数设置

 export default {
    name: 'LogAnalyse',
    data () {
      return {
        pie_count: '',//绑定输入框
        pie_data: [], //后端数据可以保存到这里
        
      }
    },
    mounted () {
      this.firstleft()
    },

    methods: {
      //饼状图
      firstleft (type=0,number=100) {
        //获取数据
        let pie_data = this.get_pie_data(type,number)
        pie_data.then(res => {
          this.pie_data = res.data.data
          this.pie_leng = res.data.lenth
          let myChart = echarts.init(document.getElementById('first-line-left'))
          // 绘制图表
          var option = {
            title: { text: '告警类型占比' },
            series: [
              {
                type: 'pie',
                data: this.pie_data
              }
            ]
          }

          myChart.setOption(option)
        })
        // 基于准备好的dom，初始化echarts实例

      },

      //请求函数，这里使用同步请求，才能将后端返回的数据给echarts使用
      get_pie_data (pie = 0, number = 100) {
        return new Promise((resolve, reject) => {
          axios({
            url: this.$settings.base_url + `/user/logdata/?number=${number}&type=${pie}`,
            method: 'post'
          }).then(res => {
            resolve(res)
          }).catch(error => {
            reject(error)
          })
        })
      },

      //点击提交的时候，触发这个函数
      pie_submit (pie = 0, number = 100) {
        console.log(this.pie_count, 123)
        if (Number.isInteger(number)) {
          if (number <= 300 && number >= 10) {
            this.firstleft(pie,number)
          } else {
            this.$message.error('范围需要在50-300之间')
          }
        } else {
          this.$message.error('输入的是非数字！！')
        }
      },

    },

  }
  }
</script>

思路：