## Vue 中使用 Axios 和 ECharts 渲染图表时，数据显示不出的问题该如何解决？

百变鹏仔 2个月前 (11-26) #echarts

文章标签不出

vue 中使用 axios 异步请求并渲染 echarts 图表的常见问题

在 vue 项目中，结合 axios 和 echarts 库加载动态数据并展示图表时，可能会遇到数据显示不出的问题。

问题分析：

根据您提供的代码，问题可能出在以下两方面：

立即学习“前端免费学习笔记（深入）”；

数据请求时机不当：
您在 mounted() 生命周期钩子中调用 drawline() 方法，但由于数据请求是异步的，它可能在图表初始化后才完成。因此，图表无法及时获取有效数据。
图表渲染时机不当：
在您的 drawline() 方法中，您在数据请求成功后才执行 mychart.setoption(option)，这会导致图表一开始显示为空。

解决方案：

要解决这些问题，您可以按照以下步骤进行优化：

将 arrtest() 函数移至 methods 对象中，以便可以在需要时随时调用。
在 mounted() 生命周期钩子中调用 arrtest()，启动数据请求。
在数据请求成功回调中，调用 drawline() 方法来渲染图表。
在 mychart.setoption(option) 之前先赋值给 x_city 和 y_people 数组，确保图表数据是最新的。

以下是对您的代码进行修改的示例：

export default {  data() {    return {      x_city: [],      y_people: [],    };  },  mounted() {    this.arrtest();  },  methods: {    arrtest() {      let that = this;      axios.get('http://localhost:3000/src/statics/test1.php').then((res) => {        for (var i = 0; i < res.data.length; i++) {          that.x_city.push(res.data[i].city);          that.y_people.push(parseInt(res.data[i].y_people));        }        this.drawLine();      });    },    drawLine() {      let myChart = echarts.init(document.getElementById('myChart'));      let option = {        tooltip: {          show: true,        },        legend: {          data: ['people'],        },        xAxis: [          {            type: 'category',            data: that.x_city,          },        ],        yAxis: [          {            type: 'value',          },        ],        series: [          {            name: 'people',            type: 'bar',            data: that.y_people,          },        ],      };      myChart.setOption(option);    },  },};

通过对这些修改，您的图表应该能够正确地加载动态数据并进行渲染。

文章推荐

## Vue 中使用 Axios 和 ECharts 渲染图表时，数据显示不出的问题该如何解决？

详解在React 组件中使用Echarts的正确姿势

PHP 使用Echarts生成数据统计报表详解

canvas使用贝塞尔曲线平滑拟合折线段的方法详解

echarts实现去掉X轴、Y轴和网格线效果实例分享

vue.js将echarts封装为组件一键使用