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>

效果就完成了