动态渲染 echarts 饼图（vue 2 + axios + Springboot）

红太狼 2023-10-15 20:12 27阅读 0赞

#### 目录 ####

*  前言
 *  1. 项目搭建
 *   *  1.1. 前端
     *  1.2. 后端
 *  2. 后端数据渲染前端
 *   *  2.1 补充1：在 vue 中使用 axios
     *  2.2. 补充2：Springboot 处理跨域问题
     *  2.3. 修改前端代码
     *   *  2.3.1 修改饼图样式
         *  2.3.2 调用后台数据渲染饼图
         *  2.3.3 改造成内外两个圈

## 前言 ##

因为[上文][Link 1]中提到的需求就是在 vue2 里面绘制echarts，所以，这里就搭建一个 vue2 的脚手架了。

想要深入了解 echarts 属性，请到此篇文章：[**如何用echarts画一个好看的饼图**][Link 1]

至于如何在 vue2 中使用 echarts，请见这篇文章：[https://blog.csdn.net/m0\_54355172/article/details/131960527][https_blog.csdn.net_m0_54355172_article_details_131960527]

## 1. 项目搭建 ##

### 1.1. 前端 ###

1.  先搭建一个 vue2.0 的脚手架
    
     *  安装vue-cli
        
        1.  卸载老版本
            
                npm uninstall vue-cli -g
        2.  安装脚手架
            
                npm install -g @vue/cli
     *  新建一个 vue2 的项目
        
            vue create pie_front
2.  引入 echarts 依赖：见博客：[https://blog.csdn.net/m0\_54355172/article/details/131960527][https_blog.csdn.net_m0_54355172_article_details_131960527]
3.  MyPie.vue 初始代码如下：
    
        <template>
            <div>
              <div class="charts">
                <div id="comPie" style="height: 400px; width: 44em" />
              </div>
            </div>
          </template>
          
          <script>
          export default {
                
            name: 'myPie',
            data () {
                
              return {
                
                pieOption : {
                
                    tooltip: {
                
                        trigger: 'item'
                    },
                    legend: {
                
                        top: '5%',
                        left: 'center'
                    },
                    series: [
                        {
                
                        name: 'Access From',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        label: {
                
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                
                            label: {
                
                            show: true,
                            fontSize: 40,
                            fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                
                            show: false
                        },
                        data: [
                            {
                 value: 1048, name: 'Search Engine' },
                            {
                 value: 735, name: 'Direct' },
                            {
                 value: 580, name: 'Email' },
                            {
                 value: 484, name: 'Union Ads' },
                            {
                 value: 300, name: 'Video Ads' }
                        ]
                        }
                    ]
                    },
              }
            },
            mounted () {
                
              this.showPie()
            },
            methods: {
                
              showPie () {
                
                // 指定 echarts 图表初始化的容器
                const pieCharts = this.$echarts.init(document.querySelector('#comPie'))
                // 渲染 echarts
                pieCharts.setOption(this.pieOption, true)
              },
            },
          }
          </script>
          
          <style scoped type="text/less">
            #channelPie {
                
              margin-top: 1em;
            }
            button {
                
              width: 80px;
              height: 30px;
              border: 1px solid #2a69ee;
              border-radius: 5px;
              font: normal normal 14px 微软雅黑;
              color: #2a69ee;
              background-color: white;
            }
            .charts {
                
              display: flex;
              justify-content: center;
            }
          </style>
4.  App.vue 原始代码
    
        <template>
          <div id="app">
            <myPie msg="Welcome to Your Vue.js App"/>
          </div>
        </template>
        
        <script>
        import myPie from './components/MyPie.vue'
        
        export default {
                
          name: 'App',
          components: {
                
            myPie
          }
        }
        </script>
        
        <style>
        
        </style>
5.  初始页面  
    ![8ab1054c250d40e2ab48cece2cec8050.png][]

### 1.2. 后端 ###

postgreSQL 表数据：  
![7b0fd3eb77644ef3aebd0aae73055fe6.png][]

后端接口：http://127.0.0.1:8099/pie/getPieData  
![d9f94310c2964cbb9926765619246fec.png][]

依赖：  
![f634f5e1ac06429d9d9812c20ef3b2e2.png][]

application.yml

spring:
     datasource:
       type: com.alibaba.druid.pool.DruidDataSource
       url: jdbc:postgresql://localhost:5432/study?useUnicode=true&characterEncoding=UTF-8&useSSL=false
       username: postgres
       password: admin
       driver-class-name: org.postgresql.Driver
    server:
     port: 8099

PieReadMapper.java

@Repository
    public interface PieReadMapper extends BaseMapper<Commodity> {
        
    
    }

Commodity.java 实体类

@TableName("t_commodity")
    @Data
    public class Commodity {
        
    
        @TableId("cid")
        private String id;
        @TableField("cname")
        private String name;
        private Integer count;
        private BigDecimal income;
    }

PieController.java

@Slf4j
    @RestController
    @RequestMapping("/pie")
    public class PieController {
        
    
        @Resource
        private PieReadMapper pieReadMapper;
    
    
        @PostMapping("getPieData")
        public JSONArray getPieData(String param) {
        
            log.info("前端参数===>{}", param);
    //        QueryWrapper<Commodity> wrapper = new QueryWrapper<>();
    //        wrapper.setEntity(new Commodity());
            List<Commodity> commodities = pieReadMapper.selectList(null);
            String s = JSONObject.toJSONString(commodities);
            return JSONArray.parseArray(s);
        }
    }

PieBackApplication.java 启动类

@MapperScan("com.chenjy.pie_back.mapper.**")
    @SpringBootApplication
    public class PieBackApplication {
        
        public static void main(String[] args) {
        
            SpringApplication.run(PieBackApplication.class, args);
        }
    
    }

## 2. 后端数据渲染前端 ##

### 2.1 补充1：在 vue 中使用 axios ###

1.  引入依赖
    
        npm install axios
2.  main.js 全局引入 axios
    
        import axios from 'axios'
        
        Vue.prototype.$axios = axios
3.  使用 axios 发送 post 请求
    
        getPieData() {
              
                const url = 'http://127.0.0.1:8099/pie/getPieData'
                this.$axios({
              
                    method: 'post',
                    url: url,
                    data: null
                }).then(res => {
              
                    console.log(res.data)
                }, err => {
              
                    console.log('错误信息：', err.message)
                })
              }
    
    > 那如何用 axios 发送 GET 请求呢？如下：
    
        testGet() {
              
                const url = 'http://127.0.0.1:8099/pie/testGet'
                this.$axios({
              
                    // method: 'get', 默认 get，可不写
                    url: url,
                    params: {
              
                        str: '前端发起一次 get 请求'
                    }
                }).then(res => {
              
                    console.log(res.data)
                }, err => {
              
                    console.log('错误信息：', err.message)
                })
              }

### 2.2. 补充2：Springboot 处理跨域问题 ###

1.  **解决跨域问题**  
    ![dd98fc8b538c4bea925e0cace36405f5.png][]  
    在后台新加一个配置类
    
        @Configuration
        public class config implements WebMvcConfigurer {
              
        
            @Override
            public void addCorsMappings(CorsRegistry registry) {
              
                registry.addMapping("/**")
                        .allowedOriginPatterns("*")
                        .allowCredentials(true)
                        .allowedMethods("GET", "POST", "DELETE", "PUT", "PATCH")
                        .maxAge(3600);
            }
        
        }
    
    ![375ebb98b23845ed99b431ef9e07b7bc.png][]

### 2.3. 修改前端代码 ###

#### 2.3.1 修改饼图样式 ####

![58b8c72e9de244edb377d1fd73c91352.png][]

假数据先不去掉，后续把方法加上了再去掉。

pieOption : {
        
                title: {
        
                    show: true,
                    text: '商品收益',
                    x: 'left',
                    y: 'top'
                },
                tooltip: {
        
                    trigger: 'item'
                },
                legend: {
        
                    orient: 'vertical',
                    x: 'right',
                    y: 'center',
                    align: 'left',
                    icon: 'circle',
                },
                series: [
                    {
        
                    type: 'pie',
                    radius: ['60%', '70%'],
                    roseType: 'area',
                    avoidLabelOverlap: false,
                    itemStyle: {
        
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
        
                        show: false,
                        position: 'center'
                    },
                    labelLine: {
        
                        show: false
                    },
                    data: [
                        {
         value: 1048, name: 'Search Engine' },
                        {
         value: 735, name: 'Direct' },
                        {
         value: 580, name: 'Email' },
                        {
         value: 484, name: 'Union Ads' },
                        {
         value: 300, name: 'Video Ads' }
                    ]
                    }
                ]
                },
          }

#### 2.3.2 调用后台数据渲染饼图 ####

![d5eefbae07be4774ab9d565f3892200b.png][]

<template>
        <div>
          <div class="charts">
            <div id="comPie" style="height: 400px; width: 44em" />
          </div>
        </div>
      </template>
      
      <script>
    
    
      export default {
          
        name: 'myPie',
        data () {
          
          return {
          
            pieOption : {
          
                title: {
          
                    show: true,
                    text: '商品收益',
                    left: 100,
                },
                tooltip: {
          
                    trigger: 'item',
                    formatter: '{b}  {d}% <br> 商品收益}  {c}',
                },
                legend: {
          
                    orient: 'vertical',
                    right: 80,
                    top: 100,
                    align: 'left',
                    icon: 'circle',
                    data:[],
                },
                series: [
                    {
          
                    type: 'pie',
                    radius: ['60%', '70%'],
                    roseType: 'area',
                    avoidLabelOverlap: false,
                    itemStyle: {
          
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
          
                        show: false,
                        position: 'center'
                    },
                    labelLine: {
          
                        show: false
                    },
                    data: []
                    }
                ]
                },
          }
        },
        mounted () {
          
          this.getPieData()
        },
        methods: {
          
          // 每次给饼图传入新的数据之后都要调用这个函数来重新渲染饼图
          showPie () {
          
            // 指定 echarts 图表初始化的容器
            const pieCharts = this.$echarts.init(document.querySelector('#comPie'))
            // 渲染 echarts
            pieCharts.setOption(this.pieOption, true)
          },
          // 调用后台获取饼图数据，并重新渲染饼图
          getPieData() {
          
            const url = 'http://127.0.0.1:8099/pie/getPieData'
            this.$axios({
          
                method: 'post',
                url: url,
                data: null
            }).then(res => {
          
                const datas = res.data
                this.setPieData(datas)
                this.showPie()
            }, err => {
          
                console.log('错误信息：', err.message)
            })
          },
          // 根据传入数据给饼图参数赋值
          setPieData(datas) {
          
            // 根据 arrays 配置 option 的 legend 和 series.data 的数据
            const data = Array.from(datas)
            const legendArr = []
            const seriesArr = []
            for (let i = 0; i < data.length; i++) {
          
               const seriesObj = {
          }
               legendArr.push(data[i].name)
               seriesObj.value = data[i].income
               seriesObj.name = data[i].name
               seriesArr.push(seriesObj)
            }
            this.pieOption.legend.data = legendArr
            this.pieOption.series[0].data = seriesArr
          }
        },
      }
      </script>
      
      <style scoped type="text/less">
        #channelPie {
          
          margin-top: 1em;
        }
        button {
          
          width: 80px;
          height: 30px;
          border: 1px solid #2a69ee;
          border-radius: 5px;
          font: normal normal 14px 微软雅黑;
          color: #2a69ee;
          background-color: white;
        }
        .charts {
          
          display: flex;
          justify-content: center;
        }
      </style>

#### 2.3.3 改造成内外两个圈 ####

如果要弄成内外两个圈的饼图，可以在 series 中再加一个数组：

![88f00965780f4cd59759d16ec605f35b.png][]

series: [
                    {
        
                    name: '商品收益',
                    type: 'pie',
                    radius: ['60%', '70%'],
                    roseType: 'area',
                    avoidLabelOverlap: false,
                    itemStyle: {
        
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
        
                        show: false,
                        position: 'center'
                    },
                    labelLine: {
        
                        show: false
                    },
                    data: []
                    },
                    {
        
                    name: '商品收益',
                    type: 'pie',
                    radius: '35%',
                    // roseType: 'area',
                    avoidLabelOverlap: false,
                    itemStyle: {
        
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
        
                        show: false,
                        position: 'center'
                    },
                    labelLine: {
        
                        show: false
                    },
                    data: []
                    }
                ]
                },

setPieData(datas) {
        
            // 根据 arrays 配置 option 的 legend 和 series.data 的数据
            const data = Array.from(datas)
            const legendArr = []
            const seriesArr = []
            for (let i = 0; i < data.length; i++) {
        
               const seriesObj = {
        }
               legendArr.push(data[i].name)
               seriesObj.value = data[i].income
               seriesObj.name = data[i].name
               seriesArr.push(seriesObj)
            }

[Link 1]: https://blog.csdn.net/m0_54355172/article/details/132778783
[https_blog.csdn.net_m0_54355172_article_details_131960527]: https://blog.csdn.net/m0_54355172/article/details/131960527
[8ab1054c250d40e2ab48cece2cec8050.png]: https://img-blog.csdnimg.cn/8ab1054c250d40e2ab48cece2cec8050.png
[7b0fd3eb77644ef3aebd0aae73055fe6.png]: https://img-blog.csdnimg.cn/7b0fd3eb77644ef3aebd0aae73055fe6.png
[d9f94310c2964cbb9926765619246fec.png]: https://img-blog.csdnimg.cn/d9f94310c2964cbb9926765619246fec.png
[f634f5e1ac06429d9d9812c20ef3b2e2.png]: https://img-blog.csdnimg.cn/f634f5e1ac06429d9d9812c20ef3b2e2.png
[dd98fc8b538c4bea925e0cace36405f5.png]: https://img-blog.csdnimg.cn/dd98fc8b538c4bea925e0cace36405f5.png
[375ebb98b23845ed99b431ef9e07b7bc.png]: https://img-blog.csdnimg.cn/375ebb98b23845ed99b431ef9e07b7bc.png
[58b8c72e9de244edb377d1fd73c91352.png]: https://img-blog.csdnimg.cn/58b8c72e9de244edb377d1fd73c91352.png
[d5eefbae07be4774ab9d565f3892200b.png]: https://img-blog.csdnimg.cn/d5eefbae07be4774ab9d565f3892200b.png
[88f00965780f4cd59759d16ec605f35b.png]: https://img-blog.csdnimg.cn/88f00965780f4cd59759d16ec605f35b.png