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

要实现echarts数据的动态更新，需要使用echarts提供的setOption方法，该方法可以动态更新图表的数据和配置。具体操作步骤如下：

1. 在Vue组件中引入echarts库，并创建一个echarts实例：

import echarts from 'echarts'

export default {
  name: 'EchartsDemo',
  data () {
    return {
      chartData: {} // 存储图表数据
    }
  },
  mounted () {
    this.initChart()
  },
  methods: {
    initChart () {
      this.chart = echarts.init(this.$refs.chart) // 创建echarts实例
      this.chart.setOption(this.chartData) // 设置初始数据
    }
  }
}

2. 监听数据变化，并更新图表数据：

watch: {
  data () {
    // 根据新的数据更新图表数据
    this.chartData = {
      xAxis: {
        type: 'category',
        data: this.data.labels
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        name: '销量',
        data: this.data.values,
        type: 'bar'
      }]
    }
    this.chart.setOption(this.chartData) // 更新图表数据
  }
}

3. 读取JSON数据并显示在图表中：

import axios from 'axios'

export default {
  name: 'EchartsDemo',
  data () {
    return {
      chartData: {},
      data: {} // 存储JSON数据
    }
  },
  mounted () {
    this.initChart()
    this.loadData()
  },
  methods: {
    initChart () {
      this.chart = echarts.init(this.$refs.chart)
      this.chart.setOption(this.chartData)
    },
    loadData () {
      axios.get('/data.json').then(response => {
        this.data = response.data
      })
    }
  },
  watch: {
    data () {
      this.chartData = {
        xAxis: {
          type: 'category',
          data: this.data.labels
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          name: '销量',
          data: this.data.values,
          type: 'bar'
        }]
      }
      this.chart.setOption(this.chartData)
    }
  }
}

上述代码中，通过axios库从data.json文件中读取JSON数据，并将其存储在data变量中。然后，在data变量发生变化时，根据新的数据更新图表数据，最后调用setOption方法动态更新图表。