echarts数据的动态更新 + vue + 读取json

ECharts 是一款非常强大的可视化图表库，它支持多种类型的图表展示，并提供了丰富的交互方式和动画效果。在 Vue 中使用 ECharts 非常方便，只需要引入 echarts 和 vue-echarts 即可。

动态更新 ECharts 数据的方法有多种，下面介绍两种比较常见的方式。

方法一：使用 ECharts 的 setOption 方法

ECharts 提供了 setOption 方法，可以用来更新图表数据。我们可以通过在 Vue 中监听数据变化，然后调用 setOption 方法更新图表数据。

示例代码如下：

<template>
  <div id="chart"></div>
</template>

<script>
import echarts from 'echarts'
import { VueECharts } from 'vue-echarts'

export default {
  components: {
    VueECharts
  },
  data() {
    return {
      chartData: {
        // 初始数据
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line'
        }]
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  methods: {
    initChart() {
      this.chart = echarts.init(document.getElementById('chart'))
      this.chart.setOption(this.chartData)
    },
    updateChart() {
      // 更新数据
      this.chartData.series[0].data = [randomData(), randomData(), randomData(), randomData(), randomData(), randomData(), randomData()]
      // 调用 setOption 方法更新图表数据
      this.chart.setOption(this.chartData)
    }
  }
}

function randomData() {
  return Math.floor(Math.random() * 1000)
}
</script>

在上面的代码中，我们首先在 data 中定义了初始的图表数据，然后在 mounted 钩子函数中调用 initChart 方法初始化图表。

在 updateChart 方法中，我们通过修改数据，然后调用 setOption 方法更新图表数据。

方法二：使用 ECharts 的动态数据接口

ECharts 还提供了动态数据接口，在数据变化时自动更新图表数据。我们只需要通过调用 setOption 方法传入一个动态数据接口，就可以实现图表数据的动态更新。

示例代码如下：

<template>
  <div id="chart"></div>
</template>

<script>
import echarts from 'echarts'
import { VueECharts } from 'vue-echarts'

export default {
  components: {
    VueECharts
  },
  data() {
    return {
      option: {
        xAxis: {
          type: 'category',
          data: []
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [],
          type: 'line'
        }]
      },
      dataUrl: 'data.json',
      timer: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  methods: {
    initChart() {
      this.chart = echarts.init(document.getElementById('chart'))
      this.chart.setOption(this.option)
      this.getData()
      // 每隔一段时间更新数据
      this.timer = setInterval(() => {
        this.getData()
      }, 5000)
    },
    getData() {
      // 通过 axios 获取数据
      axios.get(this.dataUrl).then(res => {
        const data = res.data
        // 更新 option 中的数据
        this.option.xAxis.data = data.map(item => item.time)
        this.option.series[0].data = data.map(item => item.value)
        // 调用 setOption 方法更新图表数据
        this.chart.setOption(this.option, true)
      })
    }
  },
  destroyed() {
    clearInterval(this.timer)
  }
}
</script>

在上面的代码中，我们首先在 data 中定义了 option、dataUrl 和 timer 三个变量。option 用于存储图表的配置项和数据，dataUrl 用于存储获取数据的接口地址，timer 用于存储定时器，用于定时更新数据。

在 initChart 方法中，我们首先初始化图表，然后调用 getData 方法获取初始数据，并启动定时器定时更新数据。

在 getData 方法中，我们通过 axios 获取数据，并更新 option 中的数据，然后调用 setOption 方法更新图表数据。同时，我们还传入了 true 参数，表示采用动态数据接口的方式更新数据。

最后，在 destroyed 钩子函数中，我们清除定时器，防止内存泄漏。