前端整合ECharts

最新推荐文章于 2024-05-01 18:39:22 发布

林寻星辰

最新推荐文章于 2024-05-01 18:39:22 发布

阅读量2k

点赞数 1

分类专栏：项目技术整合文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/weixin_60257072/article/details/128274266

版权

项目技术整合专栏收录该内容

35 篇文章 4 订阅

订阅专栏

1、简介

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

官方网站：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>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="echarts.js"></script>
  </head>
  <body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <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/

折线图.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

林寻星辰

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
2
评论
前端整合ECharts

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

扫一扫