小白学ECharts——快速入门及项目整合（SpringCloud+Vue在线教育项目）

于 2020-06-06 15:57:15 发布
阅读量840 收藏 5
点赞数 2
分类专栏： # SpringCloud+Vue在线教育项目（全栈） 文章标签： 可视化 java vue 数据可视化 spring boot
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_46275020/article/details/106584759
版权

小白学ECharts——快速入门

文章目录

前言：什么是ECharts?

ECharts是百度的一个项目，后来百度把Echarts捐给apache，用于图表展示，提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于
BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

官方网站：https://echarts.baidu.com/
现在被重定向到了： https://echarts.apache.org/zh/index.html
官网：
在这里插入图片描述

5分钟入门案例：

第一步：获取ECharts

你可以通过以下几种方式获取 ECharts。

  1. 从 Apache ECharts (incubating) 官网下载界面 获取官方源码包后构建。
  2. 在 ECharts 的 GitHub 获取。
  3. 通过 npm 获取 echarts，npm install echarts --save，详见“在 webpack 中使用echarts
  4. 通过 jsDelivr 等 CDN 引入

第二步：写代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试 ECharts</title>
    <script src="./js/echarts.min.js"></script>
</head>
<body>
    
    <div id="main" style="width: 600px;height: 400px;"></div>

    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 基于图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data: ['销量']
            },
            xAxis: {
                data: ['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子']
            },
            yAxis: {

            },
            series: [{
                name: '销量',
                type: 'bar',
                data: [5,20,36,10,10,20]
            }]
        };

        //使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
    </script>


</body>
</html>

效果：
在这里插入图片描述

第三步：换个折线图

<div id="main" style="width: 600px;height: 400px;"></div>

    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 基于图表的配置项和数据
        var option = {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line'
            }]
        };


        //使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
    </script>

效果：
在这里插入图片描述

项目实战：

第一步：下载依赖：

npm install --save echarts@4.1.0

第二步：写后端接口

service

	//图表显示：返回两部分数据，日期json数据，数量json数据
    @Override
    public Map<String, Object> getData(String type, String begin, String end) {
        //根据条件查询对应数据
        QueryWrapper<StatisticsDaily> wrapper = new QueryWrapper<>();
        wrapper.between("date_calculated", begin, end);
        wrapper.select("date_calculated", type);

        System.out.println(type);

        List<StatisticsDaily> staList = baseMapper.selectList(wrapper);

        //前端要求返回的数json数组形式
        //后端的list集合会变成json数组形式
        Map<String,Object> map = new HashMap<>();
        List<String> dayList = new ArrayList<>();
        List<Integer> dataList = new ArrayList<>();


        //遍历，进行封装
        for (StatisticsDaily sta : staList) {
            String dateCalculated = sta.getDateCalculated();
            dayList.add(dateCalculated);

            switch(type){
                case "register_num":
                    dataList.add(sta.getRegisterNum());
                    break;
                case "login_num":
                    dataList.add(sta.getLoginNum());
                    break;
                case "video_view_num":
                    dataList.add(sta.getVideoViewNum());
                    break;
                case "course_num":
                    dataList.add(sta.getCourseNum());
                    break;
                default:
                    break;
            }
        }

        map.put("dayList",dayList);
        map.put("dataList", dataList);

        return map;
    }

controller

	//图表显示：返回两部分数据，日期json数据，数量json数据
    @GetMapping("/getData/{type}/{begin}/{end}")
    @ApiOperation("图表显示：返回两部分数据，日期json数据，数量json数据")
    public R getData(@PathVariable String type,@PathVariable String begin,@PathVariable String end){
        Map<String,Object> map = service.getData(type, begin, end);
        System.out.println(map);
        return R.ok().data(map);
    }

第三步：写api

getData(searchObj){
        return request({
            url: `/statistic/getData/${searchObj.type}/${searchObj.begin}/${searchObj.end}`,
            method: 'get'
        })
    }

第四步：vue页面

vue页面用v-model双向绑定了多选框及传递了接口第一个参数。
使用了ECharts绘制折线图，和x坐标轴触发提示以及区域缩放。

<template>
  <div class="app-container">
    <!--表单-->
    <el-form :inline="true" class="demo-form-inline">

      <el-form-item>
        <el-select v-model="searchObj.type" clearable placeholder="请选择">
          <el-option label="学员登录数统计" value="login_num"/>
          <el-option label="学员注册数统计" value="register_num"/>
          <el-option label="课程播放数统计" value="video_view_num"/>
          <el-option label="每日课程数统计" value="course_num"/>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-date-picker
          v-model="searchObj.begin"
          type="date"
          placeholder="选择开始日期"
          value-format="yyyy-MM-dd" />
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="searchObj.end"
          type="date"
          placeholder="选择截止日期"
          value-format="yyyy-MM-dd" />
      </el-form-item>
      <el-button
        :disabled="btnDisabled"
        type="primary"
        icon="el-icon-search"
        @click="initData()">查询</el-button>
    </el-form>

    <div class="chart-container">
      <div id="chart" class="chart" style="height:500px;width:100%" />
    </div>
  </div>
</template>

<script>
import sta from '@/api/edu/sta'
import echarts from 'echarts'

export default {
    data(){
        return {
            searchObj: {},
            btnDisabled: false,
            xData: [],
            yData: [],
            text: ''
        }
    },
    created(){
        
    },
    methods:{
        updateText(){
            switch(this.searchObj.type){
                case "login_num":
                    this.text = "学员登录数统计"
                    break;
                case "register_num":
                    this.text = "学员注册数统计"
                    break;
                case "video_view_num":
                    this.text = "课程播放数统计"
                    break;
                case "course_num":
                    this.text = "每日课程数统计"
                    break;
                default:
                    break;
            }
        },
        //初始化数据
        initData(){
            sta.getData(this.searchObj).then(response => {
                this.updateText()
                console.log(this.text)

                this.xData = response.data.dayList
                this.yData = response.data.dataList

                //调用生成图表的方法
                this.showChart()
            })
        },
        //展示图表
        showChart(){        
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('chart'));
            // 基于图表的配置项和数据
            var option = {
                title: {
                    text: this.text
                },
                //x坐标轴触发提示
                 tooltip: {
                    trigger: 'axis'
                },
                //区域缩放
                dataZoom: [{
                    show: true,
                    height: 30,
                    xAxisIndex: [
                        0
                    ],
                    bottom: 30,
                    start: 10,
                    end: 80,
                    handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
                    handleSize: '110%',
                    handleStyle: {
                        color: '#d3dee5'

                    },
                    textStyle: {
                        color: '#fff'
                    },
                    borderColor: '#90979c'
                    },
                    {
                    type: 'inside',
                    show: true,
                    height: 15,
                    start: 1,
                    end: 35
                 }],
                // x轴是类目轴（离散数据），必须通过data设置类目数据
                xAxis: {
                    type: 'category',
                    data: this.xData
                },
                // y轴是数据轴（连续数据）
                yAxis: {
                    type: 'value'
                },
                // 系列列表：每个系列通过type决定自己的图表类型
                series: [{
                    //系列中的数据内容数组
                    data: this.yData,
                    //折线图
                    type: 'line'
                }]
            };
            //使用刚指定的配置项和数据显示图表
            myChart.setOption(option);
        }
    }
}
</script>

第五步：测试

向数据库中添加了几条测试数据，显示如图：
在这里插入图片描述

水平有限，有遗漏之处欢迎指出。

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

热爱旅行的小李同学

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值