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

    目录

    前言

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

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

    至于如何在 vue2 中使用 echarts，请见这篇文章：https://blog.csdn.net/m0_54355172/article/details/131960527

    1. 项目搭建

    1.1. 前端

    1. 先搭建一个 vue2.0 的脚手架

      • 安装vue-cli

        1. 卸载老版本

          npm uninstall vue-cli -g

          • 1

        2. 安装脚手架

          npm install -g @vue/cli

          • 1

      • 新建一个 vue2 的项目

        vue create pie_front

        • 1

    2. 引入 echarts 依赖：见博客：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>

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24
      • 25
      • 26
      • 27
      • 28
      • 29
      • 30
      • 31
      • 32
      • 33
      • 34
      • 35
      • 36
      • 37
      • 38
      • 39
      • 40
      • 41
      • 42
      • 43
      • 44
      • 45
      • 46
      • 47
      • 48
      • 49
      • 50
      • 51
      • 52
      • 53
      • 54
      • 55
      • 56
      • 57
      • 58
      • 59
      • 60
      • 61
      • 62
      • 63
      • 64
      • 65
      • 66
      • 67
      • 68
      • 69
      • 70
      • 71
      • 72
      • 73
      • 74
      • 75
      • 76
      • 77
      • 78
      • 79
      • 80
      • 81
      • 82
      • 83
      • 84
      • 85
      • 86
      • 87
      • 88
      • 89
      • 90

    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>

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20

    5. 初始页面

    1.2. 后端

    postgreSQL 表数据：

    后端接口：http://127.0.0.1:8099/pie/getPieData

    依赖：

    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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    PieReadMapper.java

    @Repository
public interface PieReadMapper extends BaseMapper<Commodity> {

}

    • 1
    • 2
    • 3
    • 4

    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;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    PieController.java

    @Slf4j
@RestController
@RequestMapping("/pie")
public class PieController {

    @Resource
    private PieReadMapper pieReadMapper;


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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

    PieBackApplication.java 启动类

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

}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    2. 后端数据渲染前端

    2.1 补充1：在 vue 中使用 axios

    1. 引入依赖

      npm install axios

      • 1

    2. main.js 全局引入 axios

      import axios from 'axios'

Vue.prototype.$axios = axios

      • 1
      • 2
      • 3

    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)
        })
      }

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12

      那如何用 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)
        })
      }

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14

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

    1. 解决跨域问题

      在后台新加一个配置类

      @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);
    }

}

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13

    2.3. 修改前端代码

    2.3.1 修改饼图样式

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

            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' }
                ]
                }
            ]
            },
      }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46

    2.3.2 调用后台数据渲染饼图

    <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}% 
     商品收益}  {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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121

    2.3.3 改造成内外两个圈

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

    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: []
                }
            ]
            },

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
          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)
        }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
  • 相关阅读:
    【2022 Q2&Q3 华为机试真题 C++】字符串子序列II
    40-Jenkins-环境变量的使用
    Linux系统调优详解（九）——sar查看系统整体运行状态
    Java基础算法---使用双重循环输出九九乘法表
    GLTF模型添加关节控制
    数字IC手撕代码-XX公司笔试真题（数据流pipeline加和）
    利用FPGA和CPLD数字逻辑实现模数转换器
    【Spring注解必知必会】深度解析@Configuration注解
    02_SpringMVC从0开始框架搭建
    【论文精读】MVSNet架构各组件详解
  • 原文地址：https://blog.csdn.net/m0_54355172/article/details/132793723