Echarts - 实现图表显示

Echatrs官网

我们首先需要通过npm 或者 cnpm 将echatrs包下载到我们的项目文件中,通过引入echatrs后根据官方文档拿到快速生成的实例,经过后端接口传来的查询到的数据替换掉实例中展示的数据就好了。

我们总共会写两个方法,一个是准备生成图表所需要的数据,第二个是设置图表的参数。

    // 准备图表数据
    initChartData() {
      staApi.getDataSta(this.searchObj).then(response => {
        this.xData = response.data.dateCalculated
        this.yData = response.data.numDataNum
        // 调用设置图表参数方法
        this.setChart()
      })
    },
    // 设置图表参数
    setChart() {
      var chartDom = document.getElementById('chart')
      var myChart = echarts.init(chartDom)
      var option

      option = {
        title: {
          text: this.getType(this.searchObj.type)
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: this.xData
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.yData,
            type: 'line'
          }
        ]
      }

      option && myChart.setOption(option)
    }

其中设置图标参数这部分代码就是在官方文档实例中找到一个想使用的图表形式复制来用就好了。

修改了方法,将图表中的数据通过接口来进行传递,前端页面显示需要查询的条件与时间区间。

    /**
     * 获取图表 X轴的时间日期与 Y轴的数据量
     * @param type
     * @param begin
     * @param end
     * @return
     */
    @Override
    public Map<String, Object> getShowData(String type, String begin, String end) {
        // 创建查询封装器query 封装查询条件
        QueryWrapper query = new QueryWrapper();
        query.between("date_calculated", begin, end);
        //query.orderByDesc("date_calculated");
        query.select("date_calculated", type);
        List<StatisticsDaily> staList = baseMapper.selectList(query);

        // 创建两个集合 分别存放时间和类型数量
        List<String> dateCalculated = new ArrayList<>();
        List<Integer> numDataNum = new ArrayList<>();

        for (int i = 0; i < staList.size(); i++) {
            StatisticsDaily dailyData = staList.get(i);
            // 将需要的日期数据遍历存入 日期集合中
            dateCalculated.add(dailyData.getDateCalculated());
            switch (type) {
                case "login_num":
                    numDataNum.add(dailyData.getLoginNum());
                    break;
                case "register_num":
                    numDataNum.add(dailyData.getRegisterNum());
                    break;
                case "video_view_num":
                    numDataNum.add(dailyData.getVideoViewNum());
                    break;
                case "course_num":
                    numDataNum.add(dailyData.getCourseNum());
                    break;
                default :
                    break;
            }
        }

        // 使用map封装对象进行返回
        HashMap<String, Object> map = new HashMap<>();
        map.put("dateCalculated", dateCalculated);
        map.put("numDataNum", numDataNum);
        return map;
    }

这三个参数在前端是通过表单进行决定传递的

    <!--表单-->
    <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="showChart()">查询</el-button>
    </el-form>

效果就完成了

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

OtnIOs

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

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

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

打赏作者

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

抵扣说明:

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

余额充值