Vueの単純なデータの視覚化--- echartsと組み合わせてヒストグラムを実現
みなさん、こんにちは。私は「犬」であり、何千マイルも肉を食べることができるので、ソフトウェアカレッジのネットワークエンジニアリングの学生であるコードハスキーです。大学時代に学んだことをみんなと共有し、進歩していきたいです。ただし、レベルに限りがあるため、必然的にブログに間違いがありますので、抜けがありましたらお知らせください！当面は、csdnプラットフォームのブログホームページ（https://blog.csdn.net/qq_42027681）でのみ更新してください。
未经本人允许，禁止转载
最初にVueプロジェクト
を構築します。Vueプロジェクトを構築するためにここに移動することを忘れない、または忘れない友人。
本次主要讲将数据展示成柱状图，不封装axios不封装echarts，直接引用，大佬勿喷
axiosおよびechartsパッケージをダウンロードする
npm install
axios --save npm install echarts--save
ダウンロードが完了しました
新しいページ
AboutファイルとHomeファイルはプロジェクトを作成するために提供されており、
ルーティングを構成する必要はありません。
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を作成することももちろんここで話すことができますcanvasdiv show
<template>
<div>
<div ref="echartestOne" style="width: 500px;height: 400px;"></div>
</div>
</template>
ヒストグラム
を使用して、現在のベースでecharts公式インスタンスが見つかりました（設定による）例インレットは、出力ターゲットechartsインスタンスで宣言されたjsmyChartが出力される
コード例をコピーします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>
2つの変数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開発アップルなど。
バックエンド：javaエントリspringbootエントリなど。
サーバー：mysqlエントリサーバープロジェクトを実行するための簡単な指示クラウドサーバー
python：火を暖めないことをお勧めし
ます。いくつかのプラグインなどの使用を確認してください。
大学のやり方も自分自身で、一生懸命勉強し、
情熱を持って若くなります。プログラミングに興味がある場合は、qqグループに参加して一緒にコミュニケーションをとることができます：974178910
ご不明な点がございましたら、下にメッセージを残していただければ、よろしければ返信いたします。