echarts统计图表

雨点打透心脏的1/2处 2024-04-06 11:13 181阅读 0赞

1、简介

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

官方网站：https://echarts.apache.org/zh/index.html

官网示例-柱状图

1.1、下载echarts.min.js

地址：https://www.jsdelivr.com/package/npm/echarts
在这里插入图片描述

1.2、引入js
  1. <!-- 引入刚刚下载的 ECharts 文件 -->
  2. <script src="./echarts.min.js"></script>

在这里插入图片描述

1.3、定义图表区域
  1. <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
  2. <div id="main" style="width: 600px;height:400px;"></div>
1.4、生成一个简单的柱状图

完整代码

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <!-- 引入刚刚下载的 ECharts 文件 -->
  6.     <script src="./echarts.min.js"></script>
  7.   </head>
  9.   <body>
  10.     <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
  11.     <div id="main" style="width: 600px;height:400px;"></div>
  12.     <script type="text/javascript">
  13.       // 基于准备好的dom，初始化echarts实例
  14.       var myChart = echarts.init(document.getElementById('main'));
  16.       // 指定图表的配置项和数据
  17.       var option = {
  19.         title: {
  21.           text: 'ECharts 入门示例'
  22.         },
  23.         tooltip: {
  24.       },
  25.         legend: {
  27.           data: ['销量']
  28.         },
  29.         xAxis: {
  31.           data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  32.         },
  33.         yAxis: {
  34.       },
  35.         series: [
  36.           {
  38.             name: '销量',
  39.             type: 'bar',
  40.             data: [5, 20, 36, 10, 10, 20]
  41.           }
  42.         ]
  43.       };
  45.       // 使用刚指定的配置项和数据显示图表。
  46.       myChart.setOption(option);
  47.     </script>
  48.   </body>
  49. </html>
1.5、样式

在这里插入图片描述

官网示例-折线图

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <!-- 引入刚刚下载的 ECharts 文件 -->
  6.     <script src="./echarts.min.js"></script>
  7.   </head>
  9.   <body>
  10.     <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
  11.     <div id="main" style="width: 600px;height:400px;"></div>
  12.     <script type="text/javascript">
  13.       // 基于准备好的dom，初始化echarts实例
  14.       var myChart = echarts.init(document.getElementById('main'));
  16.       // 指定图表的配置项和数据
  17.       var option = {
  19.             xAxis: {
  21.                 type: 'category',
  22.                 data: ['A', 'B', 'C']
  23.             },
  24.             yAxis: {
  26.                 type: 'value'
  27.             },
  28.             series: [
  29.                 {
  31.                 data: [120, 200, 150],
  32.                 type: 'line'
  33.                 }
  34.             ]
  35.             };
  37.       // 使用刚指定的配置项和数据显示图表。
  38.       myChart.setOption(option);
  39.     </script>
  40.   </body>
  41. </html>

样式
在这里插入图片描述

项目中引用-前端

2.1、安装ECharts
  1. npm install echarts --save
2.2、路由跳转
  1. {
  2.     path: '/sta',
  3.     component: Layout,
  4.     redirect: '/sta/create',
  5.     name: '统计分析',
  6.     meta: { title: '统计分析', icon: 'example' },
  7.     children: [
  8.       {
  9.         path: 'create',
  10.         name: '生成数据',
  11.         component: () => import('@/views/sta/create'),
  12.         meta: { title: '生成数据', icon: 'table' }
  13.       },
  14.       {
  15.         path: 'show',
  16.         name: '图表显示',
  17.         component: () => import('@/views/sta/show'),
  18.         meta: { title: '图表显示', icon: 'tree' }
  19.       }
  20.     ]
  21.   }

在这里插入图片描述

2.3、api请求地址

在这里插入图片描述

2.4、引入api中的js和下载的echarts

在这里插入图片描述

2.5、定义接收后端返回的数据的数组变量

在这里插入图片描述

2.6、修改option的数据

在这里插入图片描述

2.7、完整的show.vue文件代码
  1. <template>
  2.     <div class="app-container">
  3.       <!--表单-->
  4.       <el-form :inline="true" class="demo-form-inline">
  6.         <el-form-item>
  7.           <el-select v-model="searchObj.type" clearable placeholder="请选择">
  8.             <el-option label="学员登录数统计" value="login_num"/>
  9.             <el-option label="学员注册数统计" value="register_num"/>
  10.             <el-option label="课程播放数统计" value="video_view_num"/>
  11.             <el-option label="每日课程数统计" value="course_num"/>
  12.           </el-select>
  13.         </el-form-item>
  15.         <el-form-item>
  16.           <el-date-picker
  17.             v-model="searchObj.begin"
  18.             type="date"
  19.             placeholder="选择开始日期"
  20.             value-format="yyyy-MM-dd" />
  21.         </el-form-item>
  22.         <el-form-item>
  23.           <el-date-picker
  24.             v-model="searchObj.end"
  25.             type="date"
  26.             placeholder="选择截止日期"
  27.             value-format="yyyy-MM-dd" />
  28.         </el-form-item>
  29.         <el-button
  30.           :disabled="btnDisabled"
  31.           type="primary"
  32.           icon="el-icon-search"
  33.           @click="showChart()">查询</el-button>
  34.       </el-form>
  36.       <div class="chart-container">
  37.         <div id="chart" class="chart" style="height:500px;width:100%" />
  38.       </div>
  39.     </div>
  40.   </template>
  41.   import echarts from 'echarts'
  42.   import staApi from '@/api/sta'
  44.   export default {
  45.       data() {
  46.           return {
  47.               searchObj:{},
  48.               btnDisabled:false,
  49.               xData:[],
  50.               yData:[]
  51.           }
  52.       },
  53.       methods:{
  54.           showChart() {
  55.               staApi.getDataSta(this.searchObj)
  56.                   .then(response => {
  57.                       console.log('*****************'+response)
  58.                       this.yData = response.data.numDataList
  59.                       this.xData = response.data.date_calculatedList
  61.                       //调用下面生成图表的方法，改变值
  62.                       this.setChart()
  63.                   })
  64.           },
  65.           setChart() {
  66.               // 基于准备好的dom，初始化echarts实例
  67.               this.chart = echarts.init(document.getElementById('chart'))
  68.               // console.log(this.chart)
  70.               // 指定图表的配置项和数据
  71.               var option = {
  72.                   title: {
  73.                       text: '数据统计'
  74.                   },
  75.                   tooltip: {
  76.                       trigger: 'axis'
  77.                   },
  78.                   dataZoom: [{
  79.                       show: true,
  80.                       height: 30,
  81.                       xAxisIndex: [
  82.                           0
  83.                       ],
  84.                       bottom: 30,
  85.                       start: 10,
  86.                       end: 80,
  87.                       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',
  88.                       handleSize: '110%',
  89.                       handleStyle: {
  90.                           color: '#d3dee5'
  92.                       },
  93.                       textStyle: {
  94.                           color: '#fff'
  95.                       },
  96.                       borderColor: '#90979c'
  97.                       },
  98.                       {
  99.                       type: 'inside',
  100.                       show: true,
  101.                       height: 15,
  102.                       start: 1,
  103.                       end: 35
  104.                    }],
  105.                   // x轴是类目轴（离散数据）,必须通过data设置类目数据
  106.                   xAxis: {
  107.                       type: 'category',
  108.                       data: this.xData
  109.                   },
  110.                   // y轴是数据轴（连续数据）
  111.                   yAxis: {
  112.                       type: 'value'
  113.                   },
  114.                   // 系列列表。每个系列通过 type 决定自己的图表类型
  115.                   series: [{
  116.                       // 系列中的数据内容数组
  117.                       data: this.yData,
  118.                       // 折线图
  119.                       type: 'line'
  120.                   }]
  121.               }
  123.               this.chart.setOption(option)
  124.           }
  125.       }
  126.   }
  127.   </script>
2.8、样式调整

官网参考地址：https://echarts.apache.org/zh/option.html#legend

项目中引用-后端

3.1、controller代码
  1. //图表显示，返回两部分数据，日期json数组，数量json数组
  2. @GetMapping("showData/{type}/{begin}/{end}")
  3. public R showData(@PathVariable String type,@PathVariable String begin,
  4.                   @PathVariable String end) {
  6.     Map<String,Object> map = staService.getShowData(type,begin,end);
  7.     return R.ok().data(map);
  8. }
3.2、service代码
  1. //图表显示，返回两部分数据，日期json数组，数量json数组
  2. @Override
  3. public Map<String, Object> getShowData(String type, String begin, String end) {
  5.     //根据条件查询对应数据
  6.     QueryWrapper<StatisticsDaily> wrapper = new QueryWrapper<>();
  7.     wrapper.between("date_calculated",begin,end);
  8.     wrapper.select("date_calculated",type);
  9.     List<StatisticsDaily> staList = baseMapper.selectList(wrapper);
  11.     //因为返回有两部分数据：日期 和 日期对应数量
  12.     //前端要求数组json结构，对应后端java代码是list集合
  13.     //创建两个list集合，一个日期list，一个数量list
  14.     List<String> date_calculatedList = new ArrayList<>();
  15.     List<Integer> numDataList = new ArrayList<>();
  17.     //遍历查询所有数据list集合，进行封装
  18.     for (int i = 0; i < staList.size(); i++) {
  20.         StatisticsDaily daily = staList.get(i);
  21.         //封装日期list集合
  22.         date_calculatedList.add(daily.getDateCalculated());
  23.         //封装对应数量
  24.         switch (type) {
  26.             case "login_num":
  27.                 numDataList.add(daily.getLoginNum());
  28.                 break;
  29.             case "register_num":
  30.                 numDataList.add(daily.getRegisterNum());
  31.                 break;
  32.             case "video_view_num":
  33.                 numDataList.add(daily.getVideoViewNum());
  34.                 break;
  35.             case "course_num":
  36.                 numDataList.add(daily.getCourseNum());
  37.                 break;
  38.             default:
  39.                 break;
  40.         }
  41.     }
  42.     //把封装之后两个list集合放到map集合，进行返回
  43.     Map<String, Object> map = new HashMap<>();
  44.     map.put("date_calculatedList",date_calculatedList);
  45.     map.put("numDataList",numDataList);
  46.     return map;
  47. }

效果

在这里插入图片描述

结果！！

  1. 每天起床的时候，争取变得比你从前更聪明一点。认真地、出色地完成你的任务。慢慢地，你会有所进步，但这种进步不一定很快。但你这样能够为快速进步打好基础。到最后，你将会得到你应得的东西。

发表评论

表情：
评论列表 （有 0 条评论，181人围观）

还没有评论，来说两句吧...

相关阅读

    相关 echarts图表演示图表演示

    eCharts图表演示 比如说，公司现在接一个项目，这个中信银行，针对之前所有的贷款、大 小客户，要做出来图表系统（演示和查看）、报表系统（用来打印）。 郑州的大数据产

    怼烎@怼烎@/ 0 赞/ 89 阅读

    相关 统计图表

    统计图表 一. 为什么要使用统计图表 1，数据可视化，用于分析 2，用于方便领导进行决策统计 二. 需要支持的东西 必须得有数据【不能少】，数据需要分类

    电玩女神电玩女神/ 0 赞/ 400 阅读