Echarts5开发技术

二哈喇子！2026-01-23 23:59

npm 国内最新镜像：

npm config set registry https://registry.npmmirror.com

文章目录

前言

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

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

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

css 复制代码 
      html,body,#app{
        width: 100%;
        height: 100%;
        margin: 0;
      }

具体步骤

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

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

固定套路：

  1. 获取到图形显示标记，随后导入echarts
javascript 复制代码 
let div = this.$refs['container'] // ref属性值
javascript 复制代码 
import * as echarts from 'echarts'
  1. 创建echarts对象
javascript 复制代码 
let chart = echarts.init(div)
  1. 创建图形配置对象（各个图形都不一样）
javascript 复制代码 
let option
  1. 使用图形配置项（在创建图形配置对象之后）
javascript 复制代码 
chart.setOption(option)

钩子函数中固定代码：

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

主视图

html 复制代码 
<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-link >两种写法都行</router-link> -->
      <router-view></router-view>
    </section>
  </div>
</template>

柱状图

views 里面新建视图：Bar.vue

index.js 内配置路由

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

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

html 复制代码 
<template>
  <!-- 提供一个图形显示的区域、标记，一般使用div -->
  <!-- ref相当于 id属性 -->
  <div ref="container" class="chart">
  </div>
</template>

对应样式：

javascript 复制代码 
<style scoped>
.chart {
  width: 800px;
  height: 500px;
}
</style>

第二步：在钩子函数mounted内：

各种图形只有前两行代码是一致的

  1. 获取到图形显示标记，随后导入echarts
javascript 复制代码 
let div = this.$refs['container'] // ref属性值
javascript 复制代码 
import * as echarts from 'echarts'
  1. 创建echarts对象：
javascript 复制代码 
let chart = echarts.init(div)
  1. 创建图形配置对象（各种图形都不一样）

配置项：let option

javascript 复制代码 
    {
      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. 使用图形配置项（在创建图形配置对象之后）
javascript 复制代码 
chart.setOption(option)

完整代码：

javascript 复制代码 
<template>
  <!-- 提供一个图形显示的区域、标记，一般使用div -->
  <!-- ref相当于 id属性 -->
  <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>

饼图

views 里面新建视图：Pie.vue

index.js 内配置路由

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

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

javascript 复制代码 
			 {
            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}%'
                    }
                }
            ]
        }

完整代码：

javascript 复制代码 
<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>

折线图

views 里面新建视图：Line.vue

index.js 内配置路由

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

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

javascript 复制代码 
	{
      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 //平滑曲线
        },
      ]
    }

完整代码：

javascript 复制代码 
<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>

散点图

散点又叫坐标点

views 里面新建视图：Scatter.vue

index.js 内配置路由

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

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

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

完整代码：

javascript 复制代码 
<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: '散点图' 
        },
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
          name:'x轴'
        },
        yAxis: {
          name:'y轴'
        },
        series: {//系列数据 
            data: [
                [10, 8],
                [10, -8],
                [-10, 8],
                [-10, -8]
            ],
            type: 'scatter'//类型 散点图
        }
                 
    }
    chart.setOption(option)

  }
}
</script>
<style scoped>
</style>

曲线图

views 里面新建视图：Graph.vue

index.js 内配置路由

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

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

javascript 复制代码 
			{
                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
                                },
                            ]
                    }
                ]
        } //各个图形都不一样

完整代码：

javascript 复制代码 
<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>

仪表盘图

views 里面新建视图：Guage.vue

index.js 内配置路由

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

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

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

完整代码：

javascript 复制代码 
<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>

雷达图

views 里面新建视图：Radar.vue

index.js 内配置路由

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

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

javascript 复制代码 
	{
      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: '二哈喇子！'
            }
          ]
        }
      ]
    } //各个图形都不一样

完整代码：

javascript 复制代码 
<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>

地图

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

views 里面新建视图：Map.vue

index.js 内配置路由

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

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

在终端安装：npm i axios

山东省地图：

javascript 复制代码 
<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>

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

动态获取图表所需数据

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

sql 复制代码 
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));

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

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

首先创建Springboot项目然后配置环境（在前期准备中）

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

在主启动类中增加注解：

java 复制代码 
// mapper包的限定名
@MapperScan("com.echarts.mapper")
// 开启MVC
@EnableWebMvc

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

dto包：

java 复制代码 
// 不需要有参
@Data
public class ScoreStat {
	private String studentName;
	private Integer score;
}

mapper接口：

java 复制代码 
@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接口：

java 复制代码 
public interface ScoreService {
	List<ScoreStat> quScoreStats();
	
}

service实现类：

java 复制代码 
@Service
public class ScoreServiceImpl implements ScoreService{

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

}

controller类：

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

测试：

前端：

views 里面新建视图：Score.vue

index.js 内配置路由

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

根组件中加一个RouterLink

Score.vue 视图内代码：

java 复制代码 
<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>
热门推荐
01GitHub 镜像站点02OpenCode 入门教程：介绍 · 安装 · 配置第三方 API (如 Claude)03Claude Code Skills 实用使用手册04UV安装并设置国内源05在VSCode配置Java开发环境的保姆级教程（适配各类AI编程IDE）06BongoCat - 跨平台键盘猫动画工具07安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）08AI 规范驱动开发“三剑客”深度对比：Spec-Kit、Kiro 与 OpenSpec 实战指南09Linux下V2Ray安装配置指南10Open Code教程（四）| 高级配置与集成