book2Task2 用基础南丁格尔玫瑰图展示2020年各地区的消费总额占比

最新推荐文章于 2024-08-14 15:45:18 发布

a '^<^

最新推荐文章于 2024-08-14 15:45:18 发布

阅读量373

点赞数 7

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/H222222222222/article/details/135570722

版权

本文介绍了如何使用ECharts库结合axios获取API数据，展示了2020年各地区的消费总额占比情况。通过JavaScript处理数据，将地区名和消费总额转换为南丁格尔玫瑰图，并在浏览器控制台打印数据结构。

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

<template>
  <div>
    用基础南丁格尔玫瑰图展示2020年各地区的消费总额占比
    同时将用于图表展示的数据结构在浏览器的console中进行打印输出
  </div>
  <div id="main"></div>
</template>

<script>
import echarts from '../assets/echarts.min'; // 请确保安装了 echarts，并使用正确的引入方式
import axios from '../assets/axios'; // 请确保安装了 axios，并使用正确的引入方式

export default {
  mounted() {
    var myChart = echarts.init(document.getElementById('main'));

    axios.post('/api/selectOrderInfo', {
      "startTime": "2020-01-01T00:00:00+0800",
      "endTime": "2020-12-31T23:59:59+0800"
    }).then(response => {
      var data = response.data.data;

      // 按地区汇总消费总额
      var regionData = data.reduce((acc, item) => {
        var regionName = item.regionName;
        var finalTotalAmount = item.finalTotalAmount;

        if (acc[regionName]) {
          acc[regionName] += finalTotalAmount;    //条件成立，将当前的 finalTotalAmount 累加到已有的总金额上
        } else {
          acc[regionName] = finalTotalAmount;     //条件不成立，在 acc 对象中创建一个新的属性，表示当前区域的总金额
        }                        //在一个对象 acc 中对区域（regionName）的总金额进行累加。

        return acc;
      }, {});

      // 转换为数组形式
      var roseData = Object.entries(regionData).map(([region, totalAmount]) => ({
        name: region,
        value: totalAmount
      }));                       //Object.entries() 方法和 map() 方法，目的是将一个包含区域（region）和总金额（totalAmount）的对象（regionData）转换为一个新的对象数组（roseData），每个对象包含 name 和 value 属性。

      // 打印处理后的数据结构
      console.log(roseData);

      // 设置图表选项
      var option = {
        title: {
          text: '2020年各地区消费总额占比',
          left: 'center'
        },
        series: [{
          name: '消费总额',
          type: 'pie',
          radius: [20, '75%'],  //饼图的半径。20是内半径，'75%'是外半径，表示半径的百分比
          roseType: 'radius',   // 'radius' 表示使用半径模式
          data: roseData
        }]
      };

      // 使用刚指定的配置项和数据显示图表
      myChart.setOption(option);
    });
  }
}
</script>

<style>
#main {
  width: 100%;
  height: 500px;
}
</style>