ECharts实现简单饼图和柱状图

1.饼图

前端使用vue，后端使用SpringBoot

html 复制代码

<template>
  <div>
    <div class="card" style="padding: 15px">
      数据可视化分析：图书类型销量
    </div>

    <div style="display: flex; margin: 10px 0">
      <div style="display: flex; margin: 10px 0">
        <div style="width: 1200px;height: 600px;" class="card" id="goodsPie"></div>
      </div>
    </div>

  </div>
</template>

<script>
import * as echarts from "echarts";

let pieGoodsOptions = {
  title: {
    text: '', // 主标题
    subtext: '', // 副标题
    left: 'center'
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c} ({d}%)'
  },
  legend: {
    top: '8%',
    type: 'scroll',
    orient: 'vertical',
    left: 'left',
    pageIconColor: 'red', // 激活的分页按钮颜色
    pageIconInactiveColor: 'yellow', // 没激活的分页按钮颜色
  },
  series: [
    {
      name: '', // 鼠标移上去显示内容
      type: 'pie',
      radius: '50%',
      center: ['50%', '60%'],
      data: [
        {value: 0, name: ''}, // 示例数据：name表示维度，value表示对应的值
      ]
    }
  ]
}

export default {
  name: "Visualization",
  data() {
    return {
      
    }
  },
  created() {
    this.loadGoodsPie();
  },
  methods: {
    loadGoodsPie(){
      this.$request.get('/goods/getPie').then(res => {
        if (res.code === '200') {
          let chartDom = document.getElementById('goodsPie');
          let myChart = echarts.init(chartDom);
          pieGoodsOptions.title.text = res.data.text
          pieGoodsOptions.title.subtext = res.data.subText
          pieGoodsOptions.series[0].name = res.data.name
          pieGoodsOptions.series[0].data = res.data.data
          myChart.setOption(pieGoodsOptions);
        } else {
          this.$message.error(res.msg)
        }
      })
    },
  }
}
</script>

java 复制代码

/**
 * 渲染图书类型销量饼状图
 */
@GetMapping("/getPie")
public Result getPie() {
    Map<String, Object> resultMap = new HashMap<>();
    List<Map<String, Object>> list = new ArrayList<>();

    // 获得商品分类名称为key，该分类销量为value的map
    List<Goods> goodsList = goodsService.selectAll(new Goods());
    Map<String, Integer> collect = goodsList.stream().filter(x -> ObjectUtil.isNotEmpty(x.getTypeId()))
            .collect(Collectors.groupingBy(Goods::getTypeName, Collectors.reducing(0, Goods::getCount, Integer::sum)));

    for (String key : collect.keySet()) {
        Map<String, Object> map = new HashMap<>();
        map.put("name", key);
        map.put("value", collect.get(key));
        list.add(map);
    }

    resultMap.put("text", "图书类型销售量统计饼图");
    resultMap.put("subText", "统计维度：图书类型");
    resultMap.put("name", "占比数据");
    resultMap.put("data", list);

    return Result.success(resultMap);
}

1.柱状图

前端使用vue，后端使用SpringBoot

html 复制代码

<template>
  <div>
    <div class="card" style="padding: 15px">
      数据可视化分析：店铺销量
    </div>

    <div style="display: flex; margin: 10px 0">

      <!-- 后台主页左上部分：公告 -->
      <div style="display: flex; margin: 10px 0">
        <div style="width: 600px;height: 600px;" class="card" id="businessBar"></div>
      </div>

    </div>

  </div>
</template>

<script>
import * as echarts from "echarts";

let barBusinessOptions = {
  title: {
    text: '', // 主标题
    subtext: '', // 副标题
    left: 'center'
  },
  xAxis: {
    axisLabel:{
      interval: 0,
      //rotate:30,
      formatter: function (name) {
        return (name.length > 8 ? (name.slice(0,8)+"...") : name );
      },
    },
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] // 示例数据：统计的维度（横坐标）
  },
  yAxis: {
    type: 'value'
  },
  tooltip: {
    trigger: 'item'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130], // 示例数据：横坐标维度对应的值（纵坐标）
      type: 'bar',
      itemStyle: {
        normal: {
          color:function(){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
        },
      },
    }
  ]
}

export default {
  name: "Visualization2",
  data() {
    return {
      
    }
  },
  created() {
    this.loadBusinessBar();
  },
  methods: {
    loadBusinessBar(){
      this.$request.get('/goods/getBar').then(res => {
        if (res.code === '200') {
          let chartDom = document.getElementById('businessBar');
          let myChart = echarts.init(chartDom);
          barBusinessOptions.title.text = res.data.text
          barBusinessOptions.title.subtext = res.data.subText
          barBusinessOptions.xAxis.data = res.data.xAxis
          barBusinessOptions.series[0].data = res.data.yAxis
          myChart.setOption(barBusinessOptions);
        } else {
          this.$message.error(res.msg)
        }
      })
    },
  }
}
</script>

java 复制代码

/**
 * 渲染店铺销量柱状图
 */
@GetMapping("/getBar")
public Result getBar() {
    Map<String, Object> resultMap = new HashMap<>(); // 存取最后返回的数据
    Map<String, Object> res = new HashMap<>(); // 暂存销量前5的数据
    List<String> xList = new ArrayList<>(); // 店铺名称
    List<Integer> yList = new ArrayList<>(); // 店铺总销量

    // 获得店铺名称为key，该店铺全部销量求和为value的map
    List<Goods> goodsList = goodsService.selectAll(new Goods());
    Map<String, Integer> collect = goodsList.stream().filter(x -> ObjectUtil.isNotEmpty(x.getBusinessId()))
            .collect(Collectors.groupingBy(Goods::getBusinessName, Collectors.reducing(0, Goods::getCount, Integer::sum)));

    collect.entrySet()
            .stream()
            // 排序
            .sorted((p1, p2) -> p2.getValue().compareTo(p1.getValue()))
            // 截取前limitSize个
            .limit(5)
            .collect(Collectors.toList()).forEach(ele -> res.put(ele.getKey(), ele.getValue()));

    for (String key : res.keySet()) {
        xList.add(key);
        yList.add((Integer) res.get(key));
    }

    resultMap.put("text", "店铺销售量前五统计柱状图");
    resultMap.put("subText", "统计维度：店铺名称");
    resultMap.put("xAxis", xList);
    resultMap.put("yAxis", yList);

    return Result.success(resultMap);
}

可以点个免费的赞吗！！！