Vue 간단한 데이터 시각화 --- 히스토그램을 실현하기 위해 echarts와 결합
안녕하세요 여러분, 저는 소프트웨어 칼리지의 네트워크 공학 학생 인 코드 허스키입니다. 저는 "개"이고 수천 마일을 고기를 먹을 수 있기 때문입니다. 나는 대학에서 배운 것을 공유하고 모두와 함께 발전하고 싶습니다. 단, 한정된 레벨로 인해 블로그에 실수가있을 수 있으니, 빠진 부분이 있으면 알려주세요! 당분간은 csdn 플랫폼, 블로그 홈페이지 https://blog.csdn.net/qq_42027681 에서만 업데이트 하십시오 .
未经本人允许，禁止转载
먼저 Vue 프로젝트
를 빌드하고 잊지 않을 친구 가 Vue 프로젝트 를 빌드 하기 위해 여기로 이동합니다 .
本次主要讲将数据展示成柱状图，不封装axios不封装echarts，直接引用，大佬勿喷
axios 및 echarts 패키지 다운로드
npm install axios --save
npm install echarts --save
다운로드 완료
새 페이지
프로젝트 생성을 위해 정보 및 홈 파일이 제공되며
라우팅 을 구성 할 필요가 없습니다.
import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";
import Echartest from "../views/Echartest.vue"
Vue.use(VueRouter);
const routes = [
{
path: "/",
name: "Home",
component: Home
},
{
path: "/about",
name: "About",
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () =>
import(/* webpackChunkName: "about" */ "../views/About.vue")
},
{
path: "/echart",
name: "Echarts",
component: Echartest
}
];
const router = new VueRouter({
routes
});
export default router;
구성 페이지
공식 핸드북에 의해 반환 된 페이지 파일을 생성하여 수동 입력
을 먼저 볼 수 있습니다. div 생성은 물론 여기에서 말할 수 있습니다. canvas div show
<template>
<div>
<div ref="echartestOne" style="width: 500px;height: 400px;"></div>
</div>
</template>
히스토그램을
사용하여 히스토그램 을 찾았습니다 (환경 설정에 따라) echarts 공식 인스턴스를 현재 기준으로 사용하여 히스토그램 예제 입구 에서 js myChart를
복사하여
출력 대상 echarts
인스턴스에 선언 된 코드 예제를 출력 할 인쇄 myCharts.setOption
옵션은 다음과 같습니다. 예
<script>
import echarts from 'echarts'
export default{
mounted() {
this.setTest();
},
methods:{
setTest(){
let myChart = echarts.init(this.$refs.echartestOne);
let 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',
showBackground: true,
backgroundStyle: {
color: 'rgba(220, 220, 220, 0.8)'
}
}]
};
myChart.setOption(option);
}
}
}
</script>
그런
다음 정적 그림을 소개하고 다음으로 변환합니다.
<script>
import echarts from 'echarts'
export default{
mounted() {
this.setTest();
},
methods:{
setTest(){
let xAx:['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
let yAy:[120, 200, 150, 80, 70, 110, 130];
let myChart = echarts.init(this.$refs.echartestOne);
let option = {
xAxis: {
type: 'category',
data: this.xAx
},
yAxis: {
type: 'value'
},
series: [{
data: this.yAy,
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(220, 220, 220, 0.8)'
}
}]
};
myChart.setOption(option);
}
}
}
</script>
두 개의 변수 xAx, yAy는 이전 데이터에 해당하며
효과는 동일하며
다시 변환합니다.
네트워크 요청
axios에 가입하여 요청을 보냅니다.
저는 스프링 부트로 데이터를 읽을 수있는 작은 배경을 작성했습니다.
로컬 API 인터페이스는 http : // localhost : 8084 / test / getDatas입니다.
전화합시다.
물론 배경이 없으면 대신 json 파일을 사용할 수 있습니다.
방법은 다음과 같습니다.
새 json 파일을 만들고 파일에 씁니다.
{
"status": 200,
"msg": "哈喽帅哥",
"data": [{
"dataId": 0,
"dataX": "one",
"dataY": 100
}, {
"dataId": 1,
"dataX": "two",
"dataY": 200
}, {
"dataId": 2,
"dataX": "three",
"dataY": 150
}, {
"dataId": 3,
"dataX": "four",
"dataY": 300
}]
}
브라우저에서 다음과 같이
axios.get () axios
소스 코드 파일
에서 이러한 매개 변수를 요청에 채울 수 있습니다 . 모든 매개 변수를 채울 필요는 없습니다 .
로컬 파일을 요청할 수 있습니다 .
axios.get('testJson/test.json');
브라우저는 요소 네트워크를 확인 하고 setTest 함수
의
변환을 볼 수 있습니다.
setTest(xAx,yAy){
let myChart = echarts.init(this.$refs.echartestOne);
let option = {
xAxis: {
type: 'category',
data: xAx
},
yAxis: {
type: 'value'
},
series: [{
data: yAy,
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(220, 220, 220, 0.8)'
}
}]
};
myChart.setOption(option);
}
xAx, yAy는 매개 변수를 전달하는 형태로 전달됩니다.
다음으로 필요한 데이터를 추출합니다 .
getDataAndsetTest(){
let xAx=[];
let yAy=[];
axios.get('testJson/test.json').then(res=>{
let resp = res.data.data;
resp.forEach((item)=>{
xAx.push(item.dataX)
yAy.push(item.dataY);
})
});
}
콘솔에서 이미 요청이 있음을 확인할 수 있습니다. 물론 xAx, yAy를 인쇄 할 수 있으며 데이터가 있음을 확인할 수도 있습니다.
다시 변환
getDataAndsetTest(){
let xAx=[];
let yAy=[];
axios.get('testJson/test.json').then(res=>{
let resp = res.data.data;
resp.forEach((item)=>{
xAx.push(item.dataX)
yAy.push(item.dataY);
})
this.setTest(xAx,yAy)
});
},
데이터가로드 된 후 히스토그램
완성 코드를 생성합니다.
<template>
<div>
<div ref="echartestOne" style="width: 500px;height: 400px;"></div>
</div>
</template>
<script>
import echarts from 'echarts'
import axios from 'axios'
export default{
mounted() {
this.getDataAndsetTest();
},
methods:{
getDataAndsetTest(){
let xAx=[];
let yAy=[];
axios.get('testJson/test.json').then(res=>{
let resp = res.data.data;
resp.forEach((item)=>{
xAx.push(item.dataX)
yAy.push(item.dataY);
})
this.setTest(xAx,yAy)
});
},
setTest(xAx,yAy){
let myChart = echarts.init(this.$refs.echartestOne);
let option = {
xAxis: {
type: 'category',
data: xAx
},
yAxis: {
type: 'value'
},
series: [{
data: yAy,
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(220, 220, 220, 0.8)'
}
}]
};
myChart.setOption(option);
}
}
}
</script>
<style>
</style>
따라서 데이터베이스에서 데이터를 읽고 막대 그래프를 만드는 페이지가
있습니다. 데이터를 새로 고치는 버튼을 추가 할 수 있습니다.
여기 에서는 데이터 를 가져 오기 위해 내 백엔드 인터페이스를 요청합니다.
<button @click="getDataAndsetTest">刷新</button>
정기 새로 고침
타이머를 추가 할 수도 있습니다.
매초 정기적으로 실행합니다.
mounted() {
this.timer = setInterval(this.getDataAndsetTest, 1000);
},
beforeDestroy() {
clearInterval(this.timer);
},
물론 타이머를 파괴하는 것을 잊지 마십시오
. 효과는 다음과 같습니다.
이 기사에서는 관심있는 친구들이 시도해 볼 수 있습니다. 다른 그래픽 사용에 대해서는 나중에 이야기 할 것입니다.
나중에 출시됩니다
프런트 엔드 : js 엔트리 vue 엔트리 vue 개발 애플릿 등.
백 엔드 : 자바 엔트리 스프링 부트 엔트리 등
서버 : mysql 엔트리 서버 프로젝트를 실행하기위한 간단한 지침 클라우드 서버
파이썬 : 화재를 예열하지 않는 것이 좋습니다.
일부 플러그인의 사용을 확인하십시오 .
대학의 길은 또한
혼자서 열심히 공부 하고 열정을 가진 청년 입니다. 프로그래밍에 관심이 있다면 QQ 그룹에 가입하여 함께 소통 할 수 있습니다 : 974178910
궁금한 점이 있으시면 아래에 메시지를 남겨 주시면 답장을 드리겠습니다.