在vue中通过axios获取json数据echarts一个柱状图

可以直接在vue项目中使用axios获取json数据，然后通过echarts渲染一个柱状图。具体步骤可以参考以下代码：

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

<script>
import axios from 'axios';
import echarts from 'echarts';

export default {
  mounted() {
    this.getChartData();
  },
  methods: {
    getChartData() {
      axios.get('/api/chart-data.json').then(response => {
        const data = response.data;
        const categories = data.categories;
        const values = data.values;
        this.drawChart(categories, values);
      }).catch(error => {
        console.log(error);
      });
    },
    drawChart(categories, values) {
      const chart = echarts.init(document.getElementById('chart'));
      const option = {
        xAxis: {
          type: 'category',
          data: categories
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: values,
          type: 'bar'
        }]
      };
      chart.setOption(option);
    }
  }
};
</script>

这里假设我们的json数据位于/api/chart-data.json，可以根据实际情况进行调整。