马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有账号？立即注册
x
前端
柱形图
<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; }}
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。 |
