SpringBoot+Vue使用Echarts的方式

npm install echarts

// 引入echarts
import * as echarts from 'echarts';

<div id="main" class="data-class"></div>

// 根据容器初始化echarts
const myChart = echarts.init(document.getElementById('main'));

  // 绘制图表
    myChart.setOption({
      title: {
        text: 'ECharts 入门示例'
      },
      tooltip: {},
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }
      ]
    });

<template>
  <div id="main" class="data-class"></div>
</template>

<script>
// 引入echarts
import * as echarts from 'echarts';
// 基于准备好的dom，初始化echarts实例
export default {
  name: "Data",
  data() {
    return {

    };
  },
  methods:{
  },
  mounted(){
    // 根据容器初始化echarts
    const myChart = echarts.init(document.getElementById('main'));
    // 绘制图表
    myChart.setOption({
      title: {
        text: 'ECharts 入门示例'
      },
      tooltip: {},
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }
      ]
    });
  }
}



</script>

<style scoped>
.data-class{
  height: 300px;
  width: 100%;
}
</style>

@GetMapping("/testStatistics")
    public Result testStatistics(){
        ArrayList<Map<String,Object>> resultList = new ArrayList<>();
        for (int i = 2018; i < 2025; i++) {
            Map<String, Object> resultMap = new HashMap<>();
            resultMap.put("year",i);
            resultMap.put("num", RandomUtil.randomInt(1000,10000));
            resultList.add(resultMap);
        }
        return Result.ok(resultList);
    }

<template>
  <div id="main" class="data-class"></div>
</template>

<script>
// 引入echarts
import * as echarts from 'echarts';
// 引入axios
import axios from "axios";
// 基于准备好的dom，初始化echarts实例
export default {
  name: "Data",
  data() {
    return {

    };
  },
  mounted(){
    // 请求接口返回视图数据
    async function getData() {
      try {
        // 使用 await 等待异步请求完成
        const res = await axios.get('http://localhost:9090/statistics/testStatistics');
        // 返回所需数据
        return res.data.data;
      } catch (error) {
        // 处理请求错误
        console.error('请求出错:', error);
        throw error;
      }
    }
    // 异步获取数据
    (async () => {
      const data = await getData();
      // 根据容器初始化echarts
      const myChart = echarts.init(document.getElementById('main'));
      // 绘制图表
      myChart.setOption({
        title: {
          text: '年收入统计'
        },
        tooltip: {

        },
        xAxis: {
          data:data.map(item => item.year)
        },
        yAxis: {},
        series: [
          {
            name: '收入',
            type: 'bar',
            data: data.map(item => item.num)
          }
        ]
      });
    })();

  }
}



</script>

<style scoped>
.data-class{
  height: 300px;
  width: 100%;
}
</style>