Springboot 는 vue+echarts 전후 단 상호작용 을 이용 하여 동적 원 환 도 를 실현 합 니 다.
17683 단어 Springbootvue원 환 도
우리 가 프로젝트 를 할 때 통계 도 를 통 해 우리 의 데 이 터 를 보 여 줘 야 한다.웹 개발 자로 서 통계 도 를 실현 하 는 것 은 우리 가 반드시 해 야 할 기능 이다.제 가 여러분 을 데 리 고 동적 떡 그림 의 실현 을 실현 하 겠 습 니 다.
환경 설정
1.1 acharts 설치
//npm
cnpm install echarts --savemain.js 설정
// echarts
import echarts from 'echarts'
//
Vue.prototype.$echarts = echarts
2.원 환 도 전단 실현
2.1 vue 페이지 에 렌 더 링 박스 추가
<template>
<div class="test2" style="width:600px;height:400px;">
<div id="myChart" style="width:100%;height:278px;float:left;"></div>
</div>
</template>
echart 도입
import * as echarts from 'echarts'
<script>
import * as echarts from 'echarts'
export default {
name: 'test2',
data () {
return {
queryInfo: {
query: "",
pageNum: 1,
pageSize: 4,// 4 ， ，
},
queryInfof: {
query: "",
pageNum: 1,
pageSize: 100,
},
myChart: '',
opinionData2: [
{"itemStyle":"#3F8FFF","name":" ","value":200},
{"itemStyle":"#6DC8EC","name":" url ","value":388},
{"itemStyle":"#1FC48D","name":" ","value":5287},
{"itemStyle":"red","name":" ","value":320}
]
}
},
mounted: function () {
this.drawLine();
},
methods: {
async drawLine () {
// post
/* const { data: res } = await this.$http.get("alldate", {
params: this.queryInfo
});
if (res.flag != "success") {
return this.$message.error(" ！！！");
}
console.log(res.flag)
this.opinionData2 = res.opinionData2; // */
this.myChart = echarts.init(document.getElementById('myChart'))
this.myChart.setOption({
title: {
text: ' ', //
subtext: '', //
x: 'left' // x
},
grid: { containLabel: true },
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {d}%'
},
// color: ['#1FC48D', '#F5A60A', '#6DC8EC', '#3F8FFF'],
color: ['#1FC48D', 'red', '#6DC8EC', '#3F8FFF'],
// backgroundColor: '#ffffff',
legend: {
orient: 'vertical',
icon: 'circle',
align: 'left',
x: 'right',
y: 'bottom',
data: [' url ', ' ', ' ', ' ']
},
series: [
{
name: ' ',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
center: ['40%', '50%'],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
color: function (params) {
//
var colorList = ['#1FC48D', 'red', '#6DC8EC', '#3F8FFF']
return colorList[params.dataIndex]
}
},
data: this.opinionData2
}
]
})
},
}
}
</script>
3.전후 단 데이터 상호작용 실현
3.1 데이터베이스 만 들 기
표 구조:(당신 의 업무 수요 에 따라 생 성)
표 데이터
3.2 배경 코드 의 작성
3.2.1 bean 패키지 에서 Query Info 클래스 만 들 기
이 종 류 는 전단 에서 요청 한 데이터 바 수 를 실현 합 니 다.페이지 기능 에 해당 합 니 다.
public class QueryInfo {
private String query;
private int pageNum=1;
private int pageSize=1;
public QueryInfo() {
}
public QueryInfo(String query, int pageNum, int pageSize) {
this.query = query;
this.pageNum = pageNum;
this.pageSize = pageSize;
}
public String getQuery() {
return query;
}
public int getPageNum() {
return pageNum;
}
public int getPageSize() {
return pageSize;
}
public void setQuery(String query) {
this.query = query;
}
public void setPageNum(int pageNum) {
this.pageNum = pageNum;
}
public void setPageSize(int pageSize) {
this.pageSize = pageSize;
}
@Override
public String toString() {
return "QueryInfo{" +
"query='" + query + '\'' +
", pageNum=" + pageNum +
", pageSize=" + pageSize +
'}';
}
}
public class Showdate {
private String name;
private String itemStyle;
private int value;
public Showdate() {
}
public Showdate(String name, String itemStyle, int value) {
this.name = name;
this.itemStyle = itemStyle;
this.value = value;
}
public String getName() {
return name;
}
public void setName1(String name) {
this.name= name;
}
public String getItemStyle() {
return itemStyle;
}
public void setItemStyle(String itemStyle) {
this.itemStyle = itemStyle;
}
public int getValue() {
return value;
}
public void setValue(int value) {
this.value = value;
}
@Override
public String toString() {
return "Showdate{" +
"name='" + name + '\'' +
", itemStyle='" + itemStyle + '\'' +
", value=" + value +
'}';
}
}
1.Mapper 에 ShowdataMapper.xml 만 들 기
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.naughty.userlogin02.dao.ShowdateDao">
<select id="getAlldate" resultType="com.naughty.userlogin02.bean.Showdate">
SELECT * FROM date1
<if test="name!=null ">
WHERE name like #{name}
</if>
LIMIT #{pageStart},#{pageSize}
</select>
<update id="updatenew">
UPDATE date1 SET value = #{count} WHERE name = #{name}
</update>
</mapper>
# mysql
spring:
datasource:
#MySQL
driverClassName: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://localhost:3306/weblog?useUnicode=true&characterEncoding=UTF-8&useSSL=false&serverTimezone=UTC
username: root
password: root
mybatis:
mapper-locations: classpath:mapper/*.xml
type-aliases-package: com.example.demo.model
server:
port: 9000
두 개의 인터페이스 가 있 습 니 다.데이터 베 이 스 를 조작 하려 면 ShowdateDao 에서 인터페이스 방법 을 작성 해 야 합 니 다.
ShowdataMapper.xml 에서 sql 문 구 를 작성 합 니 다.
나 는 수정 과 찾기 를 실현 했다.
import com.naughty.userlogin02.bean.Showdate;
import org.apache.ibatis.annotations.Param;
import org.springframework.stereotype.Repository;
import java.util.List;
@Repository
public interface ShowdateDao {
public List<Showdate> getAlldate(@Param("name") String name, @Param("pageStart") int pageStart, @Param("pageSize") int pageSize);
public int updatenew(String name, int count);
}
ShowdateController 에서 사용 공간 을 설명 합 니 다.
@Autowired
ShowdateDao showdateDao;//
@Autowired
FlowDao flowDao;//
package com.naughty.userlogin02.controller;
import com.alibaba.fastjson.JSON;
import com.naughty.userlogin02.bean.*;
import com.naughty.userlogin02.dao.CheckDao;
import com.naughty.userlogin02.dao.FlowDao;
import com.naughty.userlogin02.dao.SafeDao;
import com.naughty.userlogin02.dao.ShowdateDao;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import java.util.HashMap;
import java.util.List;
import java.util.Stack;
@RestController
public class ShowdateController {
@Autowired
ShowdateDao showdateDao;
@Autowired
FlowDao flowDao;
//
@CrossOrigin
@RequestMapping("/alldate")//
public String getAlldateList(QueryInfo queryInfo){
System.out.println(queryInfo);
int pageStart = (queryInfo.getPageNum()-1)*queryInfo.getPageSize();
List<Showdate> dates = showdateDao.getAlldate("%"+queryInfo.getQuery()+"%",pageStart,queryInfo.getPageSize());
for(int i =0;i<dates.size();i++){
System.out.println(dates.get(i).toString());
}
//
//
HashMap<String, Object> res = new HashMap<>();
res.put("flag","success");
res.put("opinionData2",dates );
String date_json= JSON.toJSONString(res);
System.out.println(date_json.toString());
return date_json;
}
// ， Date1
@RequestMapping("/getupdata")
public String updateDate(QueryInfo queryInfo){
String s = " ";
String s1 =" url ";
String s2 =" ";
String s3 =" ";
/*int count = getUserList(queryInfo);
int count1 =getChickList(queryInfo); //
int count2 =getSafeDate(queryInfo);
int count3 =allBlognum(queryInfo)-(count+count1+count2);*/
showdateDao.updatenew(s,count);
showdateDao.updatenew(s1,count1);
showdateDao.updatenew(s2,count2);
int i= showdateDao.updatenew(s3,count3);
System.out.println(" :"+s);
System.out.println(" :"+count);
String str = i >0?"success":"error";
return str;
}
}
JS 모든 코드:
<script>
import * as echarts from 'echarts'
export default {
name: 'test2',
data () {
return {
queryInfo: {
query: "",
pageNum: 1,
pageSize: 4,
},
queryInfof: {
query: "",
pageNum: 1,
pageSize: 100,
},
myChart: '',
opinionData2: [
//
]
}
},
mounted: function () {
this.drawLine();
},
created() {
this.getdateList(); //
},
methods: {
async drawLine () {
// post ，
const { data: res } = await this.$http.get("alldate", {
params: this.queryInfo
});
if (res.flag != "success") {
return this.$message.error(" ！！！");
}
console.log(res.flag)
this.opinionData2 = res.opinionData2; //
this.myChart = echarts.init(document.getElementById('myChart'))
this.myChart.setOption({
title: {
text: ' ', //
subtext: '', //
x: 'left' // x
},
grid: { containLabel: true },
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {d}%'
},
// color: ['#1FC48D', '#F5A60A', '#6DC8EC', '#3F8FFF'],
color: ['#1FC48D', 'red', '#6DC8EC', '#3F8FFF'],
// backgroundColor: '#ffffff',
legend: {
orient: 'vertical',
icon: 'circle',
align: 'left',
x: 'right',
y: 'bottom',
data: [' url ', ' ', ' ', ' ']
},
series: [
{
name: ' ',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
center: ['40%', '50%'],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
color: function (params) {
//
var colorList = ['#1FC48D', 'red', '#6DC8EC', '#3F8FFF']
return colorList[params.dataIndex]
}
},
data: this.opinionData2
}
]
})
},
async getdateList() {
// post
const { data: res } = await this.$http.get("getupdata", {
params: this.queryInfof
});
if (res != "success") {
return this.$message.error(" ！！！");
}
console.log(res)
},
}
}
</script>
배경 에서 데 이 터 를 되 돌려 줍 니 다:
여기 서 Springboot 가 vue+echarts 전후 단 상호작용 을 이용 하여 동적 라운드 그림 을 실현 하 는 것 에 관 한 글 은 여기까지 소개 되 었 습 니 다.더 많은 Springboot vue 동적 라운드 그림 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[MeU] Hashtag 기능 개발➡️ 기존 Tag 테이블에 존재하지 않는 해시태그라면 Tag , tagPostMapping 테이블에 모두 추가 ➡️ 기존에 존재하는 해시태그라면, tagPostMapping 테이블에만 추가 이후에 개발할 태그 기반 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
