开发者

SpringBoot+Vue使用Echarts的方式

目录
  • 前言
  • 1 前端准备
    • 1.1 下载echarts
    • 1.2 引入echarts
    • 1.3 使用echarts
      • 1.3.1 准备echarts容器
      • 1.3.2 初始化echarts
      • 1.3.3 渲染echarts
  • 2 使用接口完成
    • 2.1 后端接口准备
      • 2.2 前端渲染处理
      • 总结

        前言

        在vue项目中使用echarts,本次演示是使用vue2

        1 前端准备

        echarts官网:

        https://echarts.apache.org/zh/index.html

        官网提供了基本的使用说明和大量的图表

        SpringBoot+Vue使用Echarts的方式

        SpringBoot+Vue使用Echarts的方式

        1.1 下载echarts

        执行命令

        npm install echarts

        直接这样执行很可能会失败,建议使用cnpm install echarts,前提是配置镜像

        这样就代表下载echarts成功了

        SpringBoot+Vue使用Echarts的方式

        1.2 引入echarts

        引入很简单,只需要

        // 引入echarts
        import * as echarts from 'echarts';

        1.3 使用echarts

        使用echarts也分为几个步骤,这里分开说明

        1.3.1 准备echarts容器

        创建一个echarts容器,一般div即可

        <div id="main" class="data-class"></div>

        1.3.2 初始化echarts

        这一步相当于让vue知道,我们要将一个id为main的容器为echarts展示

        // 根据容器初始化echarts
        const myChart = echarts.init(document.getElementById('main'));

        1.3.3 渲染echarts

        给myChart 渲染基本数据,包括标题,样式,xy轴等基本属性,这里用的是官方demo

          // 绘制图表
            myChart.setOption({
              title: {
                text: 'ECharts 入门示例'
              },
              tooltip: {},
              xAxis: {
                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
              },
              yAxis: {},
              series: [
                {
                  n编程ame: '销量',
                  type: 'bar',
                  data: [5, 20, 36, 10, 10, 20]
                }
              ]
            });

        这样一个基本的基于vue使用echarts的demo就完事了,查看界面

        SpringBoot+Vue使用Echarts的方式

        完整代码

        <templa编程客栈te>
          <div id="main" class="data-class"></div>
        </template>
        
        <script>
        // 引入echarts
        import * as echarts from 'echarts';
        // 基于准备好的dom,初始化echarts实例
        export default {
          name: "Data",
          d编程ata() {
            return {
        
            };
          },
          methods:{
          },
          mounted(){
            // 根据容器初始化echarts
            const myChart = echarts.init(document.getElementById('main'));
            // 绘制图表
            myChart.setOption({
              title: {
                text: 'ECharts 入门示例'
              },
              tooltip: {},
              xAxis: {
                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
              },
              yAxis: {},
              series: [
                {
                  name: '销量',
                  type: 'bar',
                  data: [5, 20, 36, 10, 10, 20]
                }
              ]
            });
          }
        }
        
        
        
        </script>
        
        <style scoped>
        .data-class{
          height: 300px;
          width: 100%;
        }
        </style>

        2 使用接口完成

        以上只是一个demo,工作中都需要统计业务数据,前后端共同完成

        2.1 后端接口准备

        后端只需要提供一个接口,返回的格式根据图表需要的数据格式进行返回

        这里使用随机数模仿一个业务统计的接口,year代表年份,num代表数量

        @GetMapping("/testStatistics")
            public Result testStatistics(){
                ArrayList<Map<String,Object>> resultList = new ArrayL编程客栈ist<>();
                for (int iYUpsAisM = 2018; i < 2025; i++) {
                    Map<String, Object> resultMap = new HashMap<>();
                    resultMap.put("year",i);
                    resultMap.put("num", RandomUtil.randomInt(1000,10000));
                    resultList.add(resultMap);
                }
                return Result.ok(resultList);
            }

        返回的就是这样的格式

        SpringBoot+Vue使用Echarts的方式

        2.2 前端渲染处理

        前端只需要把后端返回的业务数据渲染到容器中即可,参考代码:

        <template>
          <div id="main" class="data-class"></div>
        </template>
        
        <script>
        // 引入echarts
        import * as echarts from 'echarts';
        // 引入axIOS
        import axios from "axios";
        // 基于准备好的dom,初始化echarts实例
        export default {
          name: "Data",
          data() {
            return {
        
            };
          },
          mounted(){
            // 请求接口返回视图数据
            async function getData() {
              try {
                // 使用 await 等待异步请求完成
                const res = await axios.get('http://localhost:9090/statistics/testStatistics');
                // 返回所需数据
                return res.data.data;
              } catch (error) {
                // 处理请求错误
                console.error('请求出错:', error);
                throw error;
              }
            }
            // 异步获取数据
            (async () => {
              const data = await getData();
              // 根据容器初始化echarts
              const myChart = echarts.init(document.getElementById('main'));
              // 绘制图表
              myChart.setOption({
                title: {
                  text: '年收入统计'
                },
                tooltip: {
        
                },
                xAxis: {
                  data:data.map(item => item.year)
                },
                yAxis: {},
                series: [
                  {
                    name: '收入',
                    type: 'bar',
                    data: data.map(item => item.num)
                  }
                ]
              });
            })();
        
          }
        }
        
        
        
        </script>
        
        <style scoped>
        .data-class{
          height: 300px;
          width: 100%;
        }
        </style>
        

        查看效果

        SpringBoot+Vue使用Echarts的方式

        总结

        总体还是很简单的,只需要根据视图需要的数据格式和后端沟通好返回的格式

        以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程客栈(www.devze.com)。

        0

        上一篇:

        下一篇:

        精彩评论

        暂无评论...
        验证码 换一张
        取 消

        最新开发

        开发排行榜