Echarts5开发技术

叁歲伎倆 2023-10-13 15:12 3阅读 0赞

> npm 国内最新镜像：  
> npm config set registry https://registry.npmmirror.com

### 文章目录 ###

*  前言
 *  具体步骤
 *  主视图
 *   *  柱状图
     *  饼图
     *  折线图
     *  散点图
     *  曲线图
     *  仪表盘图
     *  雷达图
     *  地图
 *  动态获取图表所需数据

--------------------

# 前言 #

`提示：这里可以添加本文要记录的大概内容：`

在 VS code上新建项目（加Router）后删掉无用代码及配置

然后在`index.html`里面加段样式让他撑满整个窗口

html,body,#app{
        
            width: 100%;
            height: 100%;
            margin: 0;
          }

--------------------

# 具体步骤 #

提供一个图形显示的区域、标记，一般使用div，然后在里面增加`ref`属性（相当于`id`属性）

`提示：图形写在mounted挂载中：`

**固定套路：**

1.  获取到图形显示标记，随后导入`echarts`

let div = this.$refs['container'] // ref属性值

import * as echarts from 'echarts'

1.  创建echarts对象

let chart = echarts.init(div)

1.  创建图形配置对象（各个图形都不一样）

let option

1.  使用图形配置项（在创建图形配置对象之后）

chart.setOption(option)

--------------------

钩子函数中固定代码：

let div = this.$refs['c']
        let chart = echarts.init(div)
        let option  //各个图形都不一样
        chart.setOption(option)

# 主视图 #

<template>
      <div class="wrapper">
        <aside>
          <div class="links">
            <RouterLink to="/bar">柱状图</RouterLink>
            <RouterLink to="/pie">饼状图</RouterLink>
            <RouterLink to="/line">折线图</RouterLink>
            <RouterLink to="/scatter">散点图</RouterLink>
            <RouterLink to="/graph">曲线图</RouterLink>
            <RouterLink to="/guage">仪表盘图</RouterLink>
            <RouterLink to="/radar">雷达图</RouterLink>
            <RouterLink to="/map">地图</RouterLink>
          </div>
        </aside>
        <section>
          
          <router-view></router-view>
        </section>
      </div>
    </template>

## 柱状图 ##

views 里面新建视图：Bar.vue  
index.js 内配置路由

import Bar from '@/views/Bar'
    // const routes 中括号中
      {
        
        path:'/bar',
        name:'bar',
        component: Bar
      },

**第一步：用 div 元素创建一个图形区域，用 ref 属性标识该区域**

对应样式：

**第二步：在钩子函数`mounted`内：**  
各种图形只有前两行代码是一致的

1.  获取到图形显示标记，随后导入`echarts`

let div = this.$refs['container'] // ref属性值

import * as echarts from 'echarts'

1.  创建echarts对象：

let chart = echarts.init(div)

1.  创建图形配置对象（各种图形都不一样）

配置项：`let option`

{
        
          title: {
        //标题
            text: '上半年订单数量统计',
            left: '40%'
          },
          tooltip: {
        //鼠标悬浮提示数据
            trigger: 'axis'
          },
          legend: {
        //图例说明
            orient: 'vertical',
            x: 'right',
            y: 'center'
          },
          xAxis: {
        //X轴
            data: ['一月', '二月', '三月', '四月', '五月', '六月'],
            name: '月份'
          },
          yAxis: {
        //Y轴
            name: '辆次'
          },
          series: [//系列 图标数据
            {
        
              data: [23, 25, 26, 30, 28, 24, 22],
              type: 'bar',//柱状图
              name: '买车'
            },
            {
        
              data: [50, 55, 40, 45, 58, 55, 67],
              type: 'bar',//柱状图
              name: '租车'
            },
          ]
        }

1.  使用图形配置项（在创建图形配置对象之后）

chart.setOption(option)

**完整代码：**

<template>
      
      
      <div ref="container" class="chart">
      </div>
    </template>
    
    <script>
    import * as echarts from 'echarts'
    
    export default {
        
      data() {
        
        return {
        
    
        }
      },
      methods: {
        
    
      },
      components: {
        },
      computed: {
        },
      watch: {
        },
      mounted() {
        
        // 挂载结束之后显示echarts图形
        // 1.获取到图形显示标记
        let div = this.$refs['container']   // 相当于document.getElementById('container')
        // 2.创建echarts对象
        let chart = echarts.init(div)
        // 3.创建图形配置对象
        let option = {
        
          title: {
        //标题
            text: '上半年订单数量统计',
            left: '40%'
          },
          tooltip: {
        //鼠标悬浮提示数据
            trigger: 'axis'
          },
          legend: {
        //图例说明
            orient: 'vertical',
            x: 'right',
            y: 'center'
          },
          xAxis: {
        //X轴
            data: ['一月', '二月', '三月', '四月', '五月', '六月'],
            name: '月份'
          },
          yAxis: {
        //Y轴
            name: '辆次'
          },
          series: [//系列 图标数据
            {
        
              data: [23, 25, 26, 30, 28, 24, 22],
              type: 'bar',//柱状图
              name: '买车'
            },
            {
        
              data: [50, 55, 40, 45, 58, 55, 67],
              type: 'bar',//柱状图
              name: '租车'
            },
          ]
        }
        // 4.使用图形配置项
        chart.setOption(option)
      }
    }
    </script>
    <style scoped>
    .chart {
        
      width: 800px;
      height: 500px;
    }
    </style>

![在这里插入图片描述][38fad4e20c5c4334ad6cdb3e4d0d5063.png]

## 饼图 ##

views 里面新建视图：Pie.vue  
index.js 内配置路由

import Pie from '@/views/Pie'
    // const routes 中括号中
      {
        
        path:'/pie',
        name:'pie',
        component: Pie
      },

大体步骤和上面基本一致，除了第三步：创建图形配置对象（各种图形都不一样）

{
        
                title: {
        //标题
                    text: '某电商网站销售额占比情况',
                    x: '50%',
                },
                tooltip: {
        //提示
                    trigger: 'item'
                },
                legend: {
        //图例说明
                    orient: 'vertical',
                    x: 'right',
                    y: 'center'
                },
                series: [//系列数据
                    {
        
                        type: 'pie',
                        data: [
                            {
        
                                value: 666,
                                name: '手机'
                            },
                            {
        
                                value: 888,
                                name: '笔记本电脑'
                            },
                            {
        
                                value: 999,
                                name: '电视'
                            },
                            {
        
                                value: 880,
                                name: '洗衣机'
                            },
                            {
        
                                value: 910,
                                name: '电冰箱'
                            }
                        ],
                        // 百分比
                        label: {
        
                        show: true,
                        formatter: '{b}: {d}%'
                        }
                    }
                ]
            }

**完整代码：**

<template>
        <div ref="c" style="width: 800px; height: 500px;">
    
        </div>
    </template>
    
    <script>
    import * as echarts from 'echarts'
    export default {
        
        data() {
        
            return {
        
    
            }
        },
        methods: {
        
    
        },
        components: {
        },
        computed: {
        },
        watch: {
        },
        mounted() {
        
            let div = this.$refs['c']
            let chart = echarts.init(div)
            let option = {
        
                title: {
        //标题
                    text: '某电商网站销售额占比情况',
                    x: '50%',
                },
                tooltip: {
        //提示
                    trigger: 'item'
                },
                legend: {
        //图例说明
                    orient: 'vertical',
                    x: 'right',
                    y: 'center'
                },
                series: [//系列数据
                    {
        
                        type: 'pie',
                        data: [
                            {
        
                                value: 666,
                                name: '手机'
                            },
                            {
        
                                value: 888,
                                name: '笔记本电脑'
                            },
                            {
        
                                value: 999,
                                name: '电视'
                            },
                            {
        
                                value: 880,
                                name: '洗衣机'
                            },
                            {
        
                                value: 910,
                                name: '电冰箱'
                            }
                        ],
                        // 百分比
                        label: {
        
                        show: true,
                        formatter: '{b}: {d}%'
                        }
                    }
                ]
            }
            chart.setOption(option)
        }
    }
    </script>
    <style scoped></style>

![在这里插入图片描述][07b404e0fffd4d4a9fbd2ab54c057420.png]

## 折线图 ##

views 里面新建视图：Line.vue  
index.js 内配置路由

import Line from '@/views/Line'
    // const routes 中括号中
      {
        
        path:'/line',
        name:'line',
        component: Line
      },

大体步骤和上面基本一致，除了第三步：创建图形配置对象（各种图形都不一样）

{
        
          title: {
        //标题
            text: '阶段考试成绩',
            left: '40%'
          },
          tooltip: {
        //鼠标悬浮提示数据
            trigger: 'axis'
          },
          legend: {
        //图例说明
            orient: 'vertical',
            x: 'right',
            y: 'center'
          },
          xAxis: {
        //X轴
            data: ['数据库', 'JavaSE', 'Web前端', '框架'],
            name: 'X轴标题'
          },
          yAxis: {
        //Y轴
            name: 'Y轴标题'
          },
          series: [//系列 图表数据
            {
        
              data: [85, 73, 84, 38,],
              type: 'line',//折线图
              name: '翠花',
              //smooth: true //平滑曲线
            },
            {
        
              data: [80, 83, 64, 98,],
              type: 'line',//折线图
              name: '熊大',
              //smooth: true //平滑曲线
            },
          ]
        }

**完整代码：**

<template>
      <div ref="c" style="width: 800px; height: 500px;">
      </div>
    </template>
    
    <script>
    import * as echarts from 'echarts'
    export default {
        
      data() {
        
        return {
        
    
        }
      },
      methods: {
        
    
      },
      components: {
        },
      computed: {
        },
      watch: {
        },
      mounted() {
        
        let div = this.$refs['c']
        let chart = echarts.init(div)
        let option = {
        
          title: {
        //标题
            text: '博客数据统计',
            left: '40%'
          },
          tooltip: {
        //鼠标悬浮提示数据
            trigger: 'axis'
          },
          legend: {
        //图例说明
            orient: 'vertical',
            x: 'right',
            y: 'center'
          },
          xAxis: {
        //X轴
            data: ['2023-08-06', '2023-08-07', '2023-08-08', '2023-08-09','2023-08-10','2023-08-11','2023-08-12'],
            name: '日期'
          },
          yAxis: {
        //Y轴
            name: '作品数据'
          },
          series: [//系列 图表数据
            {
        
              data: [2085, 2073, 1984, 1938, 1890, 2531, 1906],
              type: 'line',//折线图
              name: '阅读量',
              //smooth: true //平滑曲线
            },
            {
        
              data: [280, 173, 164, 298, 203, 198, 216],
              type: 'line',//折线图
              name: '粉丝数',
              //smooth: true //平滑曲线
            },
            {
        
              data: [2, 1, 4, 8, 3, 1, 2],
              type: 'line',//折线图
              name: '评论量',
              //smooth: true //平滑曲线
            },
            {
        
              data: [8, 10, 7, 15, 5, 3, 7],
              type: 'line',//折线图
              name: '收藏数',
              //smooth: true //平滑曲线
            },
          ]
        }
        chart.setOption(option)
    
      }
    }
    </script>
    <style scoped></style>

![在这里插入图片描述][a8f29130f51443db9936a286efe28094.png]

## 散点图 ##

散点又叫坐标点

views 里面新建视图：Scatter.vue  
index.js 内配置路由

import Scatterfrom '@/views/Scatter'
    // const routes 中括号中
      {
        
        path:'/scatter',
        name:'scatter',
        component: Scatter
      },

大体步骤和上面基本一致，除了第三步：创建图形配置对象（各种图形都不一样）

{
        
            title: {
         //标题
                text: '散点图' 
            },
            tooltip: {
        
                trigger: 'axis'
            },
            xAxis: {
        
              name:'x轴'
            },
            yAxis: {
        
              name:'y轴'
            },
            series: {
        //系列数据 
                data: [
                    [10, 8],
                    [10, -8],
                    [-10, 8],
                    [-10, -8]
                ],
                type: 'scatter'//类型 散点图
            }
                     
        }

**完整代码：**

![在这里插入图片描述][e700a08bee1e45f4ae325cd9b460ac6a.png]

## 曲线图 ##

views 里面新建视图：Graph.vue  
index.js 内配置路由

import Graph from '@/views/Graph'
    // const routes 中括号中
      {
        
        path:'/graph',
        name:'graph',
        component: Graph
      },

大体步骤和上面基本一致，除了第三步：创建图形配置对象（各种图形都不一样）

{
        
                    title: {
        //标题
                        text: '曲线图'
                    },
                    tooltip: {
        //提示
                        trigger: 'item'
                    },
                    xAxis: {
        //X轴
                        data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
                        name:'月份'
                    },
                    yAxis: {
        
                        name:'温度（℃）'
                    },//Y轴
                    series: [//数据
                        {
        
                            type: 'graph',//曲线图
                            coordinateSystem: 'cartesian2d',
                            edgeSymbol: ['circle', 'arrow'],
                            edgeSymbolSize: [4, 10],
                            symbolSize: 40,
                            label: {
        
                                show: true 
                            },
                            data: [2, 3, 6, 10, 15, 21, 25, 24, 20, 15, 9, 4],
                            lineStyle: {
        
                                        color: '#2f4554'
                                       },
                            // 箭头指向关系
                            links:[
                                    {
        
                                    source: 0,
                                    target: 1
                                    },
                                    {
        
                                    source: 1,
                                    target: 2
                                    },
                                    {
        
                                    source: 2,
                                    target: 3
                                    },
                                    {
        
                                    source: 3,
                                    target: 4
                                    },
                                    {
        
                                    source: 4,
                                    target: 5
                                    },
                                    {
        
                                    source: 5,
                                    target: 6
                                    },
                                    {
        
                                    source: 6,
                                    target: 7
                                    },
                                    {
        
                                    source: 7,
                                    target: 8
                                    },
                                    {
        
                                    source: 8,
                                    target: 9
                                    },
                                    {
        
                                    source: 9,
                                    target: 10
                                    },
                                    {
        
                                    source: 10,
                                    target: 11
                                    },
                                    {
        
                                    source: 11,
                                    target: 12
                                    },
                                ]
                        }
                    ]
            } //各个图形都不一样

**完整代码：**

<template>
      <div ref="c" style="width: 800px;height: 600px;">
      </div>
    </template>
    
    <script>
    import * as echarts from 'echarts'
    export default {
        
      data() {
        
        return {
        
    
        }
      },
      methods: {
        
    
      },
      components: {
        },
      computed: {
        },
      watch: {
        },
      mounted() {
        
        let div = this.$refs['c']
        let chart = echarts.init(div)
        let option = {
        
          title: {
        //标题
            text: '曲线图'
          },
          tooltip: {
        //提示
            trigger: 'item'
          },
          xAxis: {
        //X轴
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            name: '月份'
          },
          yAxis: {
        
            name: '温度（℃）'
          },//Y轴
          series: [//数据
            {
        
              type: 'graph',//曲线图
              coordinateSystem: 'cartesian2d',
              edgeSymbol: ['circle', 'arrow'],
              edgeSymbolSize: [4, 10],
              symbolSize: 40,
              label: {
        
                show: true
              },
              data: [2, 3, 6, 10, 15, 21, 25, 24, 20, 15, 9, 4],
              lineStyle: {
        
                color: '#2f4554'
              },
              // 箭头指向关系
              links: [
                {
        
                  source: 0,
                  target: 1
                },
                {
        
                  source: 1,
                  target: 2
                },
                {
        
                  source: 2,
                  target: 3
                },
                {
        
                  source: 3,
                  target: 4
                },
                {
        
                  source: 4,
                  target: 5
                },
                {
        
                  source: 5,
                  target: 6
                },
                {
        
                  source: 6,
                  target: 7
                },
                {
        
                  source: 7,
                  target: 8
                },
                {
        
                  source: 8,
                  target: 9
                },
                {
        
                  source: 9,
                  target: 10
                },
                {
        
                  source: 10,
                  target: 11
                },
                {
        
                  source: 11,
                  target: 12
                },
              ]
            }
          ]
        } //各个图形都不一样
        chart.setOption(option)
    
      }
    }
    </script>
    <style scoped></style>

![在这里插入图片描述][2b8d0c79d64540459fbe895bb4ac4301.png]

## 仪表盘图 ##

views 里面新建视图：Guage.vue  
index.js 内配置路由

import Guage from '@/views/Guage'
    // const routes 中括号中
      {
        
        path:'/guage',
        name:'guage',
        component: Guage
      },

大体步骤和上面基本一致，除了第三步：创建图形配置对象（各种图形都不一样）

{
        
          title: {
         //标题
                text: '仪表盘' 
            },   
                tooltip: {
        
                  trigger: 'item'
                },
                series: [
                  {
        
                    type: 'gauge',
                    data: [
                      {
        
                        value: 180,
                        name: '进度'
                      }
                    ],
                    max: 280 // 设置仪表盘的最大值为
                  }
                ]
             } //各个图形都不一样

**完整代码：**

<template>
      <div ref="a" style="width: 800px;height: 500px;">
      </div>
    </template>
    
    <script>
    import * as echarts from 'echarts'
    
    export default {
        
      data () {
        
        return {
        
    
        }
      },
      methods: {
        
    
      },
      components: {
        },
      computed: {
        },
      watch: {
        },
      mounted () {
        
        let div = this.$refs['a']
        let chart = echarts.init(div)
        let option = {
        
          title: {
         //标题
                text: '仪表盘' 
            },   
                tooltip: {
        
                  trigger: 'item'
                },
                series: [
                  {
        
                    type: 'gauge',
                    data: [
                      {
        
                        value: 180,
                        name: '进度'
                      }
                    ],
                    max: 280 // 设置仪表盘的最大值为
                  }
                ]
             } //各个图形都不一样
        chart.setOption(option)
    
      }
    }
    </script>
    <style scoped>
    </style>

![在这里插入图片描述][f4687c8bb4ca4c378e083a2d0c4f624f.png]

## 雷达图 ##

views 里面新建视图：Radar.vue  
index.js 内配置路由

import Radar from '@/views/Radar'
    // const routes 中括号中
      {
        
        path:'/radar',
        name:'radar',
        component: Radar
      },

大体步骤和上面基本一致，除了第三步：创建图形配置对象（各种图形都不一样）

{
        
          title: {
        //标题
            text: '雷达图'
          },
          tooltip: {
        //提示
            trigger: 'item'
          },
          radar: {
        //雷达图边界
            indicator: [
              {
         name: 'JAVA', max: 100 },
              {
         name: '数据库', max: 100 },
              {
         name: 'Spring Boot', max: 100 },
              {
         name: '前端', max: 100 },
              {
         name: '人工智能', max: 100 },
              {
         name: '电脑知识', max: 100 }
            ]
          },
          series: [//系列数据
            {
        
              type: 'radar',
              data: [
                {
        
                  value: [88, 60, 93, 99, 80, 95],
                  name: '二哈喇子！'
                }
              ]
            }
          ]
        } //各个图形都不一样

**完整代码：**

<template>
      <div ref="rader" style="width: 800px; height: 500px;">
      </div>
    </template>
    
    <script>
    import * as echarts from 'echarts'
    export default {
        
      data() {
        
        return {
        
    
        }
      },
      methods: {
        
    
      },
      components: {
        },
      computed: {
        },
      watch: {
        },
      mounted() {
        
        let div = this.$refs['rader']
        let chart = echarts.init(div)
        let option = {
        
          title: {
        //标题
            text: '雷达图'
          },
          tooltip: {
        //提示
            trigger: 'item'
          },
          radar: {
        //雷达图边界
            indicator: [
              {
         name: 'JAVA', max: 100 },
              {
         name: '数据库', max: 100 },
              {
         name: 'Spring Boot', max: 100 },
              {
         name: '前端', max: 100 },
              {
         name: '人工智能', max: 100 },
              {
         name: '电脑知识', max: 100 }
            ]
          },
          series: [//系列数据
            {
        
              type: 'radar',
              data: [
                {
        
                  value: [88, 60, 93, 99, 80, 95],
                  name: '二哈喇子！'
                }
              ]
            }
          ]
        } //各个图形都不一样
        chart.setOption(option)
    
      }
    }
    </script>
    <style scoped></style>

![在这里插入图片描述][f490d927a4984fa6b851fabe4c7b689c.png]

## 地图 ##

进到[阿里云地图][Link 1]，选择地区复制右侧阿里云地图数据API

views 里面新建视图：Map.vue  
index.js 内配置路由

import Radar from '@/views/Map'
    // const routes 中括号中
      {
        
        path:'/map',
        name:'map',
        component: Map
      },

大体步骤和上面基本一致，除了第三步：创建图形配置对象（各种图形都不一样）

在终端安装：`npm i axios`

山东省地图：

<template>
        <div ref="map" style="width: 100%;height: 100%;">
      
        </div>
    </template>
      
      <script>
      import * as echarts from 'echarts';
      import axios from 'axios'
      
      export default {
        
        data() {
        
          return {
        
      
          }
        },
        methods: {
        
      
        },
        components: {
        },
        computed: {
        },
        watch: {
        },
        mounted() {
        
          let div = this.$refs['map']
          let chart = echarts.init(div)
          axios.get('https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json')
            .then(resp => {
        
              let geoJson = resp.data
              echarts.registerMap('山东省', geoJson)
              let option = {
        
                series: [{
        
                  name: '人数',
                  label: {
        
                    normal: {
        
                      show: true,
                    },
                    emphasis: {
        
                      show: true
                    }
                  },
                  itemStyle: {
        
                    color: '#ddb926'
                  },
                  type: 'map',
                  zoom: 1,  // 正常比例
                  roam: true,
                  map: '山东省',
                  emphasis: {
        
                    label: {
        
                      show: true
                    }
                  },
                  // 文本位置修正
                  textFixed: {
        
                    Alaska: [20, -20]
                  },
                  data: [{
        
                    name: '济南市',
                    value: 818.27
                  },
                  {
        
                    name: '青岛市',
                    value: 945.29
                  },
                  {
        
                    name: '淄博市',
                    value: 448.85
                  },
                  {
        
                    name: '枣庄市',
                    value: 316.96
                  },
                  {
        
                    name: '东营市',
                    value: 199.66
                  },
                  {
        
                    name: '烟台市',
                    value: 662.02
                  },
                  {
        
                    name: '潍坊市',
                    value: 927.81
                  },
                  {
        
                    name: '济宁市',
                    value: 828.99
                  },
                  {
        
                    name: '泰安市',
                    value: 555.51
                  },
                  {
        
                    name: '威海市',
                    value: 365.43
                  },
                  {
        
                    name: '日照市',
                    value: 279.28
                  },
                  {
        
                    name: '临沂市',
                    value: 1073.13
                  },
                  {
        
                    name: '德州市',
                    value: 597.83
                  },
                  {
        
                    name: '聊城市',
                    value: 449.01
                  },
                  {
        
                    name: '滨州市',
                    value: 379.98
                  },
                  {
        
                    name: '菏泽市',
                    value: 539.33
                  }
                  ]
                }],
                visualMap: {
        
                  left: 'right',
                  min: 100,
                  max: 800,
                  inRange: {
        
                    color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
                  },
                  text: ['High', 'Low'], // 文本，默认为数值文本
                  calculable: true
                },
                tooltip: {
        
                  trigger: 'item',
                  showDelay: 0,
                  transitionDuration: 0.2,
                },
      
              }
              chart.setOption(option)
            })
        }
      }
      </script>
      
      <style scoped></style>

![在这里插入图片描述][047e42774fc042bf84e611f9b2196a06.png]

如果是国家、省份、市区的地图，就将`axios`请求的地址改为国家级别的地图数据即可，例如北京市朝阳区的：`https://geo.datav.aliyun.com/areas_v3/bound/110105.json`。然后在注册地图时将名称改为`'world'`即可。同时注意修改数据中地区的名称和值。  
![在这里插入图片描述][2b4117b417754109bd353d8856ab4a4c.png]

# 动态获取图表所需数据 #

获取后台动态数据就需要数据库了

DROP TABLE IF EXISTS score;
    DROP TABLE IF EXISTS student;
    CREATE TABLE student
    (
      studentNo    INT PRIMARY KEY auto_increment,
      studentName  VARCHAR(30)
    );
    
    CREATE TABLE score
    (
      scoreNo    INT PRIMARY KEY auto_increment,
      studentNo  INT,
      courseName VARCHAR(10),
      score      INT,
      FOREIGN KEY (studentNo) REFERENCES student (studentNo)
    ); 
    
    INSERT INTO student(studentName)
    VALUES ('熊大'),('熊二'),('光头强');
    -- RAND随机数
    # FLOOR()函数嵌套，向下取整
    INSERT INTO score(studentNo,courseName,score)
    VALUES (1,'数据库',FLOOR(RAND()* 100)),
           (1,'JavaSE',FLOOR(RAND()* 100)),
           (1,'web前端',FLOOR(RAND()* 100)),
           (1,'框架',FLOOR(RAND()* 100)),
           (2,'数据库',FLOOR(RAND()* 100)),
           (2,'JavaSE',FLOOR(RAND()* 100)),
           (2,'web前端',FLOOR(RAND()* 100)),
           (2,'框架',FLOOR(RAND()* 100)),
           (3,'数据库',FLOOR(RAND()* 100)),
           (3,'JavaSE',FLOOR(RAND()* 100)),
           (3,'web前端',FLOOR(RAND()* 100)),
           (3,'框架',FLOOR(RAND()* 100));

查询学生姓名、平均成绩：

SELECT studentName,FLOOR(AVG(score)) AS score
    FROM student st JOIN score sc 
    ON st.studentNo = sc.studentNo
    GROUP BY studentName;

![在这里插入图片描述][9b133fb5747946d8be92e812d389a638.png]  
首先[创建Springboot项目][Springboot]然后[配置环境（在前期准备中）][Link 2]

建包：dto/vo（封装查到的数据，类似与po，因为和表没关系了）、mapper、service、controller、config

在主启动类中增加注解：

// mapper包的限定名
    @MapperScan("com.echarts.mapper")
    // 开启MVC
    @EnableWebMvc

动态显示数据就是查询功能

dto包：

// 不需要有参
    @Data
    public class ScoreStat {
        
    	private String studentName;
    	private Integer score;
    }

mapper接口：

@Mapper
    public interface ScoreMapper {
        
    	@Select("SELECT studentName,FLOOR(AVG(score)) AS score\r\n" + 
    			" FROM student st JOIN score sc \r\n" + 
    			" ON st.studentNo = sc.studentNo\r\n" + 
    			" GROUP BY studentName")
    	List<ScoreStat> queryScoreStats();
    }

service接口：

public interface ScoreService {
        
    	List<ScoreStat> quScoreStats();
    	
    }

service实现类：

@Service
    public class ScoreServiceImpl implements ScoreService{
        
    
    	@Autowired
    	private ScoreMapper mapper;
    	
    	@Override
    	public List<ScoreStat> quScoreStats() {
        
    		// TODO 自动生成的方法存根
    		return mapper.queryScoreStats();
    	}
    
    }

controller类：

@RestController
    @RequestMapping("/score")
    public class ScoreController {
        
    	@Autowired
    	private ScoreService service;
    	
    	@GetMapping
    	public List<ScoreStat> get(){
        
    		return service.quScoreStats();
    	}
    }

测试：  
![在这里插入图片描述][041ecffe13d64278b87fec0c365d7341.png]  
前端：  
views 里面新建视图：Score.vue  
index.js 内配置路由

import Scorefrom '@/views/Score'
    // const routes 中括号中
      {
        
        path:'/score',
        name:'score',
        component: Score
      },

根组件中加一个`RouterLink`

Score.vue 视图内代码：

<template>
      <div ref="score" style="width: 800px;height: 500px;">
      </div>
    </template>
    
    <script>
    import * as echarts from 'echarts'
    import axios from 'axios'   //向后端发送请求
    export default {
        
      data () {
        
        return {
        
    
        }
      },
      methods: {
        
    
      },
      components: {
        },
      computed: {
        },
      watch: {
        },
      mounted () {
        
        let div = this.$refs['score']
        let chart = echarts.init(div)
        let option = {
         
                    title:{
        //标题
                        text:'平均成绩',
                        left: '40%'
                    },
                    tooltip: {
        //鼠标悬浮提示数据
                       trigger:'axis'
                    },
                    legend: {
        //图例说明
                        orient: 'vertical',
                        x:'right',
                        y:'center'
                    },
                    xAxis: {
        //X轴
                        data: [],
                        name:'学生姓名' 
                    },
                    yAxis: {
        //Y轴
                        name:'成绩' 
                    },
                    series: [//系列 图表数据
                        {
        
                        data:[],
                        type: 'bar',//柱状图
                        name:'平均成绩'
                        },
                        
                    ]
                  } //各个图形都不一样
                axios.get('http://localhost:3344/echarts/score/')
                .then( resp => {
        
                    resp.data.forEach(element => {
        
                        option.xAxis.data.push(element.studentName) 
                        option.series[0].data.push(element.score)
                    });
                    chart.setOption(option)
                } )
      }
    }
    </script>
    <style scoped>
    </style>

![在这里插入图片描述][deb3c5f9e51b4237949006d2ccd2c2fe.png]

[38fad4e20c5c4334ad6cdb3e4d0d5063.png]: https://img-blog.csdnimg.cn/38fad4e20c5c4334ad6cdb3e4d0d5063.png
[07b404e0fffd4d4a9fbd2ab54c057420.png]: https://img-blog.csdnimg.cn/07b404e0fffd4d4a9fbd2ab54c057420.png
[a8f29130f51443db9936a286efe28094.png]: https://img-blog.csdnimg.cn/a8f29130f51443db9936a286efe28094.png
[e700a08bee1e45f4ae325cd9b460ac6a.png]: https://img-blog.csdnimg.cn/e700a08bee1e45f4ae325cd9b460ac6a.png
[2b8d0c79d64540459fbe895bb4ac4301.png]: https://img-blog.csdnimg.cn/2b8d0c79d64540459fbe895bb4ac4301.png
[f4687c8bb4ca4c378e083a2d0c4f624f.png]: https://img-blog.csdnimg.cn/f4687c8bb4ca4c378e083a2d0c4f624f.png
[f490d927a4984fa6b851fabe4c7b689c.png]: https://img-blog.csdnimg.cn/f490d927a4984fa6b851fabe4c7b689c.png
[Link 1]: http://datav.aliyun.com/portal/school/atlas/area_selector
[047e42774fc042bf84e611f9b2196a06.png]: https://img-blog.csdnimg.cn/047e42774fc042bf84e611f9b2196a06.png
[2b4117b417754109bd353d8856ab4a4c.png]: https://img-blog.csdnimg.cn/2b4117b417754109bd353d8856ab4a4c.png
[9b133fb5747946d8be92e812d389a638.png]: https://img-blog.csdnimg.cn/9b133fb5747946d8be92e812d389a638.png
[Springboot]: https://blog.csdn.net/rej177/article/details/126996018
[Link 2]: https://rej177.blog.csdn.net/article/details/132174411?spm=1001.2014.3001.5502
[041ecffe13d64278b87fec0c365d7341.png]: https://img-blog.csdnimg.cn/041ecffe13d64278b87fec0c365d7341.png
[deb3c5f9e51b4237949006d2ccd2c2fe.png]: https://img-blog.csdnimg.cn/deb3c5f9e51b4237949006d2ccd2c2fe.png