实战14 整合Echarts

目录

1、vue 安装echarts

2、柱状图、折线图和饼图

---

1、vue 安装echarts

官网：快速上手 - 使用手册 - Apache ECharts

2、柱状图、折线图和饼图

<template>
  <div>
    <el-row :gutter="10" style="margin-bottom: 60px;">
      <el-col :span="6">
        <el-card style="color: #409EFF;">
          <div><i class="el-icon-user-solid" />用户总数</div>
          <div style="padding: 10px 0;text-align: center;font-weight: bold;">
            100

          </div>

        </el-card>

      </el-col>
      <el-col :span="6">
        <el-card style="color: #F56C6C;">
          <div><i class="el-icon-money" />销售总量</div>
          <div style="padding: 10px 0;text-align: center;font-weight: bold;">
            1000000
          </div>

        </el-card>

      </el-col>
      <el-col :span="6">
        <el-card style="color: #67C23A;">
          <div><i class="el-icon-bank-card" />收益总额</div>
          <div style="padding: 10px 0;text-align: center;font-weight: bold;">
            300000
          </div>

        </el-card>

      </el-col>
      <el-col :span="6">
        <el-card style="color: #E6A23C;">
          <div><i class="el-icon-shop" />门店总数</div>
          <div style="padding: 10px 0;text-align: center;font-weight: bold;">
            20
          </div>

        </el-card>

      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <div id="main" style="width: 500px;height: 400px;"></div>
      </el-col>
      <el-col :span="12">
        <div id="pie" style="width: 500px;height: 400px;"></div>
      </el-col>
    </el-row>


  </div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  name: "Home",

  data() {
    return {
    }
  },
  mounted() {

    var option = {
      title: {
        text: '各季度会员数量统计',
        subtext: '趋势图',
        left: 'center'

      },
      xAxis: {
        type: 'category',
        data: ["Q1", "Q2", "Q3", "Q4"]
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [],
          type: 'line'
        },
        {
          data: [],
          type: 'bar'
        }
      ]
    };
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);


    var pieOption = {
      title: {
        text: '各季度会员数量统计',
        subtext: '比率图',
        left: 'center'

      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: '50%',
          label: {
            normal: {
              show: true,
              position: 'inner',
              textStyle: {
                fontWeight: 300,
                fontSize: 16,
                color: '#fff'
              }

            }

          },
          data: [], //填空数据
          label: {
            normal: {
              formatter: '{b}:{d}%'
            }
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };

    var pieDom = document.getElementById('pie');
    var pieChart = echarts.init(pieDom);


    this.request.get("/echarts/members").then(res => {
      option.xAxis.data = res.data.x
      option.series[0].data = res.data
      option.series[1].data = res.data
      console.log(option)
      myChart.setOption(option);


      pieOption.series[0].data = [
        { name: "q1", value: res.data[0] },
        { name: "q2", value: res.data[1] },
        { name: "q3", value: res.data[2] },
        { name: "q4", value: res.data[3] }
      ]
      pieChart.setOption(pieOption)

      console.log(pieOption)
    })
  }
}
</script>

package com.example.demo.controller;

import cn.hutool.core.collection.CollUtil;
import cn.hutool.core.date.DateUtil;
import cn.hutool.core.date.Quarter;
import com.example.demo.common.Result;
import com.example.demo.entity.User;
import com.example.demo.service.IUserService;
import io.swagger.annotations.Authorization;
import javafx.util.converter.LocalDateStringConverter;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.time.LocalDateTime;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

@RestController@RequestMapping("/echarts")
public class EchartsController {
    @Autowired    private IUserService userService;

    @GetMapping("/example")
    public Result get() {
        Map<String, Object> map = new HashMap<>();
        map.put("x", CollUtil.newArrayList("Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"));
        map.put("y", CollUtil.newArrayList(150, 230, 224, 218, 135, 147, 260));
        return Result.success(map);
    }

    @GetMapping("/members")
    public Result members() {
        List<User> list = userService.list();
        int q1 = 0;
        int q2 = 0;
        int q3 = 0;
        int q4 = 0;
        for (User user : list) {
            Date createTime = user.getCreateTime();
            Quarter quarter = DateUtil.quarterEnum(createTime);
            switch (quarter) {
                case Q1:
                    q1 += 1;
                    break;
                case Q2:
                    q2 += 1;
                    break;
                case Q3:
                    q3 += 1;
                    break;
                case Q4:
                    q4 += 1;
                    break;
                default:
                    break;
            }
        }
        return Result.success(CollUtil.newArrayList(q1,q2,q3,q4));
    }
}