vue.axios数据与echarts data交互

最新推荐文章于 2022-08-24 19:12:56 发布

爱恰鸡米花

最新推荐文章于 2022-08-24 19:12:56 发布

阅读量1.6k

点赞数 5

分类专栏：学习

本文链接：https://blog.csdn.net/weixin_44542401/article/details/118110487

版权

本文介绍了如何在Vue项目中使用Axios获取后台数据，并结合Echarts进行动态图表展示。首先，通过安装和引入Echarts，创建图表实例。接着，详细讲述了如何从后台获取实际数据，并将这些数据赋值给Echarts的data属性，实现动态数据的图表渲染。

摘要由CSDN通过智能技术生成

我们在给数据数据进行统计时，会用到饼状图，条形图等。而echarts为我们提供了各式各样的的统计图形，这是echarts官网图片
在这里插入图片描述
废话不多说上实例：

实例

基于打包环境安装echarts

npm install echarts --save

项目中引入echarts

import * as echarts from 'echarts';

创建一个实例

//创建容器
<div id="main" style="float:left;width:100%;height: 300px;background: #DCDFE6"></div>

mounted(){
   
  this.statistics();
},
methods:{
   
statistics(){
   
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));
      // 绘制图表
      myChart.setOption({
   
        title: {
   
          text: 'ECharts 入门示例'
        },
        tooltip: {
   },
        xAxis: {
   
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {