vue.axios数据与echarts data交互

我们在给数据数据进行统计时，会用到饼状图，条形图等。而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: {
          
   },
        series: [{
          
   
          name: 销量,
          type: bar,
          data: [5, 20, 36, 10, 10, 100]
        }]
      });
    },
}

完成如下图：

以上代码我都是从拷贝过来的，欲知详情可以去官网查看。 不过在现实中我们往往要的是真实数据来进行统计，这就要从后台获取数据。

动态数据结合echarts

在后台查询出数据

@GetMapping("/consunmerSex")
    public List<Map<String,Object>> consunmerSex(){
          
   
        //根据条件构造器查询出用户性别为男的个数
        QueryWrapper<Consumer> queryWrapper01=new QueryWrapper<>();
        queryWrapper01.eq("sex","男");
        Integer count01 = consumerService.count(queryWrapper01);

        //根据条件构造器查询出用户性别为女的个数
        QueryWrapper<Consumer> queryWrapper02=new QueryWrapper<>();
        queryWrapper02.eq("sex","女");
        Integer count02 = consumerService.count(queryWrapper02);

        //创建一个集合来装获取到的用户性别数据
        List<Integer>list=new ArrayList<>();
        list.add(count01);
        list.add(count02);

        //创建一个集合来装性别标识
        List<String>list01=new ArrayList<>();
        list01.add("男");
        list01.add("女");

        //创建一个集合来装分男女性别查询出来的数据
        List<Map<String,Object>> SexConsunmer=new ArrayList<>();
        for (int i=0;i<list.size();i++){
          
   
            Map<String,Object> map=new HashMap<>();
            map.put("name",list01.get(i));
            map.put("Nub",list.get(i));
            SexConsunmer.add(map);
        }
        return SexConsunmer;
    }

在前台设置容器接收

data(){
          
   
 return{
          
   
     /*用户男性别个数*/
      nanConsunmer:,
      /*用户女性别个数*/
      nvConsunmer:,
 }
}
mounted() {
          
   
    //方法调用
    this.statistics();
  },

方法

完成如下：