前端整合ECharts

左手的ㄟ右手 2024-03-31 17:34 37阅读 0赞

### 1、简介 ###

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

官方网站：[https://echarts.baidu.com/][https_echarts.baidu.com]

### 2、基本使用 ###

入门参考：官网->文档->教程->5分钟上手ECharts

（1）创建html页面：柱图.html

（2）引入ECharts

> <script src="echarts.min.js"></script>

（3）定义图表区域

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

（4）渲染图表

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        <title>ECharts</title>
        
        <script src="echarts.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>

### 3、折线图 ###

实例参考：官网->实例->官方实例 [https://echarts.baidu.com/examples/][https_echarts.baidu.com_examples]

折线图.html

>     option = {
>       xAxis: {
>         type: 'category',
>         data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
>       },
>       yAxis: {
>         type: 'value'
>       },
>       series: [
>         {
>           data: [150, 230, 224, 218, 135, 147, 260],
>           type: 'line'
>         }
>       ]
>     };

## 二、项目中集成ECharts ##

### 1、安装ECharts ###

> npm install --save echarts@4.1.0

### 2、增加路由 ###

> src/router/index.js

在统计分析路由中增加子路由

{
        path: '/sta',
        component: Layout,
        redirect: '/sta/create',
        name: '统计分析',
        meta: { title: '统计分析', icon: 'example' },
        children: [
          {
            path: 'create',
            name: '生成数据',
            component: () => import('@/views/sta/create'),
            meta: { title: '生成数据', icon: 'table' }
          },
          {
            path: 'show',
            name: '图表显示',
            component: () => import('@/views/sta/show'),
            meta: { title: '图表显示', icon: 'tree' }
          }
        ]
      },

### 3、创建组件 ###

<template>
      <div class="app-container">
        
        <el-form :inline="true" class="demo-form-inline">
    
          <el-form-item label="日期">
            <el-date-picker
              v-model="day"
              type="date"
              placeholder="选择要统计的日期"
              value-format="yyyy-MM-dd"
            />
          </el-form-item>
    
          <el-button
            :disabled="btnDisabled"
            type="primary"
            @click="create()"
          >生成</el-button>
        </el-form>
    
      </div>
    </template>
    <script>
    import sta from '@/api/sta'
    export default {
      data() {
        return {
          day: '',
          btnDisabled: false
        }
      },
      created() {
    
      },
      methods: {
        create() {
          sta.createStaData(this.day)
            .then(response => {
              // 提示信息
              this.$message({
                type: 'success',
                message: '生成数据成功!'
              })
              // 跳转到图表显示页面
              this.$router.push({ path: '/sta/show' })
            })
        }
      }
    }
    </script>

## 三、完成后端业务 ##

### 1、controller ###

>     @GetMapping("getShowData/{type}/{begin}/{end}")
>         public R getShowData(@PathVariable String type,@PathVariable String begin,@PathVariable String end){
>             Map<String,Object> map = statisticsDailyService.getShowData(type,begin,end);
>             return R.ok().data(map);
>         }

### 2、service ###

**接口**

>     Map<String, Object> getShowData(String type, String begin, String end);

**实现**

@Override
        public Map<String, Object> getShowData(String type, String begin, String end) {
            QueryWrapper<StatisticsDaily> queryWrapper = new QueryWrapper<>();
            queryWrapper.between("date_calculated",begin,end);
            queryWrapper.select("date_calculated",type);//查询需要的列，数据时间和类型
            List<StatisticsDaily> lists = baseMapper.selectList(queryWrapper);
    
            //返回的数据有两部分：date_calculated     和      所类型type
            //前端需要json数据，对于java代码的list集合，需要返回x、y轴两个list数据
            ArrayList<String> dateList = new ArrayList<>();
            ArrayList<Integer> typeList = new ArrayList<>();
            //遍历lists封装两个list集合
            for (StatisticsDaily list:lists){
                dateList.add(list.getDateCalculated());//封装日期
    
                if (type.equals("login_num")){//封装数量类型
                    typeList.add(list.getLoginNum());
                }
                if (type.equals("register_num")){
                    typeList.add(list.getRegisterNum());
                }
                if (type.equals("video_view_num")){
                    typeList.add(list.getVideoViewNum());
                }
                if (type.equals("course_num")){
                    typeList.add(list.getCourseNum());
                }
            }
    
            Map<String, Object> map = new HashMap<>();
            map.put("dateList",dateList);
            map.put("typeList",typeList);
            return map;
        }

## 四、前后端整合 ##

### 1、创建api ###

import request from '@/utils/request'
    export default {
      // 1 生成统计数据
      createStaData(day) {
        return request({
          url: '/staservice/sta/registerCount/' + day,
          method: 'post'
        })
      },
      // 2 获取统计数据
      getDataSta(searchObj) {
        return request({
          url: `/staservice/sta/showData/${searchObj.type}/${searchObj.begin}/${searchObj.end}`,
          method: 'get'
        })
      }
    }

### 2、chart.vue中引入api模块 ###

>     import sta from '@/api/sta'

### 3、修改initChartData方法 ###

import echarts from 'echarts'
    import staApi from '@/api/sta'
    
    export default {
      data() {
        return {
          searchObj: {},
          btnDisabled: false,
          xData: [],
          yData: []
        }
      },
      methods: {
        showChart() {
          staApi.getDataSta(this.searchObj)
            .then(response => {
              console.log('*****************' + response)
              this.yData = response.data.numDataList
              this.xData = response.data.date_calculatedList
    
              // 调用下面生成图表的方法，改变值
              this.setChart()
            })
        },
        setChart() {
          // 基于准备好的dom，初始化echarts实例
          this.chart = echarts.init(document.getElementById('chart'))
          // console.log(this.chart)
    
          // 指定图表的配置项和数据
          var option = {
            title: {
              text: '数据统计'
            },
            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设置类目数据
           
        }
      }
    }
    </script>

### 4、修改options中的数据 ###

>     xAxis: {
>               type: 'category',
>               data: this.xData
>             },
>             // y轴是数据轴（连续数据）
>             yAxis: {
>               type: 'value'
>             },
>             // 系列列表。每个系列通过 type 决定自己的图表类型
>             series: [{
>               // 系列中的数据内容数组
>               data: this.yData,
>               // 折线图
>               type: 'line'
>             }]
>           }
>     
>           this.chart.setOption(option)

## 五、样式调整 ##

参考配置手册：[https://echarts.baidu.com/option.html\#title][https_echarts.baidu.com_option.html_title]

### ![3434f1df0ca848e7a99a867db5d474f1.png][] ###

[Link 1]: https://echarts.baidu.com/option.html#series-line
[Link 2]: https://echarts.baidu.com/option.html#series-scatter
[Link 3]: https://echarts.baidu.com/option.html#series-pie
[K]: https://echarts.baidu.com/option.html#series-candlestick
[Link 4]: https://echarts.baidu.com/option.html#series-boxplot
[Link 5]: https://echarts.baidu.com/option.html#series-map
[Link 6]: https://echarts.baidu.com/option.html#series-heatmap
[Link 7]: https://echarts.baidu.com/option.html#series-lines
[Link 8]: https://echarts.baidu.com/option.html#series-graph
[treemap]: https://echarts.baidu.com/option.html#series-treemap
[Link 9]: https://echarts.baidu.com/option.html#series-sunburst
[Link 10]: https://echarts.baidu.com/option.html#series-parallel
[Link 11]: https://echarts.baidu.com/option.html#series-funnel
[Link 12]: https://echarts.baidu.com/option.html#series-gauge
[https_echarts.baidu.com]: https://echarts.baidu.com/
[https_echarts.baidu.com_examples]: https://echarts.baidu.com/examples/
[https_echarts.baidu.com_option.html_title]: https://echarts.baidu.com/option.html#title
[3434f1df0ca848e7a99a867db5d474f1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/8a175351b3a7455fa477d6cb763bb496.png