（自用）Vue通过axios访问服务器并返回数据绘制echarts图形

前端

柱形图

<template>

  <button @click="chi">吃</button>

  <div ref="chartRef" style="width: 600px; height: 400px;"></div>

</template>

<script setup>

import axios from 'axios';

import { onMounted, ref } from 'vue';

import * as echarts from 'echarts';

// 使用 ref 创建一个响应式引用，用于获取 DOM 元素

const chartRef = ref(null);

// 将 option 提升到顶层作用域

const option = {

  xAxis: {

    type: 'category',

    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']

  },

  yAxis: {

    type: 'value'

  },

  series: [

    {

      data: [120, 200, 150, 80, 70, 110, 130],

      type: 'bar'

    }

  ]

};

let myChart;

function chi() {

  axios.post('http://localhost:8080/data')

    .then(response => {

      console.log(response.data);

      // 更新图表数据

      option.series[0].data=response.data

      // option.series[0].data[0] = 250;

      if (myChart) {

        myChart.setOption(option);

      }

    })

    .catch(error => {

      console.error("There was an error!", error);

    });

}

onMounted(() => {

  if (chartRef.value) {

    // 基于准备好的 DOM，初始化 echarts 实例

    myChart = echarts.init(chartRef.value);

    // 使用刚指定的配置项和数据显示图表。

    myChart.setOption(option);

  }

});

</script>

后端

依赖

<parent>         <groupId>org.springframework.boot</groupId>         <artifactId>spring-boot-starter-parent</artifactId>         <version>3.3.7</version>     </parent>     <dependencies>         <dependency>             <groupId>org.springframework.boot</groupId>             <artifactId>spring-boot-starter-web</artifactId>         </dependency>     </dependencies>     <build>         <plugins>             <plugin>                     <groupId>org.springframework.boot</groupId>                     <artifactId>spring-boot-maven-plugin</artifactId>                     <version>3.3.7</version>             </plugin>         </plugins>     </build>

跨域

package org.example.config;

import org.springframework.context.annotation.Bean;

import org.springframework.context.annotation.Configuration;

import org.springframework.web.cors.CorsConfiguration;

import org.springframework.web.cors.UrlBasedCorsConfigurationSource;

import org.springframework.web.filter.CorsFilter;

@Configuration

public class Cqqq {

    @Bean

    public CorsFilter corsFilter() {

        CorsConfiguration config = new CorsConfiguration();

        // 允许所有域名进行跨域调用

        config.addAllowedOriginPattern("http://localhost:5173");

        // 允许任何请求头

        config.addAllowedHeader("*");

        // 允许任何方法（POST、GET等）

        config.addAllowedMethod("*");

        // 允许携带凭证

        config.setAllowCredentials(true);

        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();

        source.registerCorsConfiguration("/**", config);

        return new CorsFilter(source);

    }

}

控制类

package org.example.conl;

import org.springframework.web.bind.annotation.RequestBody;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RestController;

import java.util.ArrayList;

import java.util.List;

@RestController

public class Ckkk {

    @RequestMapping("/data")

    public List<Integer> hou(){

        List<Integer> list = new ArrayList<Integer>();

        list.add(100);

        list.add(150);

        list.add(200);

        list.add(50);

        list.add(300);

        list.add(200);

        list.add(250);

        return list;

    }

}

仪表盘  定时器等：

<template>  <button @click="chi">吃</button>  <button @click="he">喝</button>  <button @click="da">随机</button>  <div ref="chartRef" style="width: 600px; height: 400px;"></div></template><script setup>import axios from 'axios';import { onMounted, ref } from 'vue';import * as echarts from 'echarts';// 使用 ref 创建一个响应式引用，用于获取 DOM 元素const chartRef = ref(null);// 将 option 提升到顶层作用域const option = {  series: [    {      type: 'gauge',      center: ['50%', '60%'],      startAngle: 200,      endAngle: -20,      min: 0,      max: 60,      splitNumber: 12,      itemStyle: {        color: '#FFAB91'      },      progress: {        show: true,        width: 30      },      pointer: {        show: false      },      axisLine: {        lineStyle: {          width: 30        }      },      axisTick: {        distance: -45,        splitNumber: 5,        lineStyle: {          width: 2,          color: '#999'        }      },      splitLine: {        distance: -52,        length: 14,        lineStyle: {          width: 3,          color: '#999'        }      },      axisLabel: {        distance: -20,        color: '#999',        fontSize: 20      },      anchor: {        show: false      },      title: {        show: false      },      detail: {        valueAnimation: true,        width: '60%',        lineHeight: 40,        borderRadius: 8,        offsetCenter: [0, '-15%'],        fontSize: 60,        fontWeight: 'bolder',        formatter: '{value} °C',        color: 'inherit'      },      data: [        {          value: 20        }      ]    },    {      type: 'gauge',      center: ['50%', '60%'],      startAngle: 200,      endAngle: -20,      min: 0,      max: 60,      itemStyle: {        color: '#FD7347'      },      progress: {        show: true,        width: 8      },      pointer: {        show: false      },      axisLine: {        show: false      },      axisTick: {        show: false      },      splitLine: {        show: false      },      axisLabel: {        show: false      },      detail: {        show: false      },      data: [        {          value: 20        }      ]    }  ]};let myChart;function chi() {  axios.post('http://localhost:8080/data')    .then(response => {      console.log(response.data);      // 假设 response.data 是一个合适的数值      option.series[0].data[0].value = response.data;      option.series[1].data[0].value = response.data;      if (myChart) {        myChart.setOption(option);      }    })    .catch(error => {      console.error("There was an error!", error);    });}function he() {  axios.post('http://localhost:8080/data1')    .then(response => {      console.log(response.data);      // 假设 response.data 是一个合适的数值，更新两个 gauge 的数据      option.series[0].data[0].value = response.data;      option.series[1].data[0].value = response.data;      if (myChart) {        // 更新图表        myChart.setOption(option);      }    })    .catch(error => {      console.error("There was an error!", error);    });}function da(){    setInterval(function () {    axios.post('http://localhost:8080/data1')    .then(response => {      console.log(response.data);      // 假设 response.data 是一个合适的数值，更新两个 gauge 的数据      option.series[0].data[0].value = response.data;      option.series[1].data[0].value = response.data;      if (myChart) {        // 更新图表        myChart.setOption(option);      }    })    .catch(error => {      console.error("There was an error!", error);    });}, 2000);}onMounted(() => {  if (chartRef.value) {    // 基于准备好的 DOM，初始化 echarts 实例    myChart = echarts.init(chartRef.value);    // 使用刚指定的配置项和数据显示图表    myChart.setOption(option);  }});</script>

package org.example.conl;import org.springframework.web.bind.annotation.RequestBody;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RestController;import java.util.ArrayList;import java.util.List;import java.util.Random;@RestControllerpublic class Ckkk {    @RequestMapping("/data")    public List<Integer> hou(){        List<Integer> list = new ArrayList<Integer>();        list.add(100);        list.add(150);        list.add(200);        list.add(50);        list.add(300);        list.add(200);        list.add(250);        return list;    }    @RequestMapping("/data1")    public int houou(){        Random random = new Random();        // 生成 1 到 100 之间的随机整数        int randomNumber = random.nextInt(60) + 1;        return randomNumber;    }}