PHP နှင့် vue.js သည်အချက်အလက်များကိုမြင်ယောင်ခြင်း - စာရင်းအင်းဇယားခွဲခြမ်းစိတ်ဖြာသင်ခန်းစာ

နိဒါန်း

1 ။ PHP နှင့် vue.js ကိုအဘယ်ကြောင့်ရွေးချယ်ရသနည်း။

2 ။ ပြင်ဆင်မှုအလုပ်

NPM သည် vue ကိုတပ်ဆင်ပါ
NPM ECHARTS ကို Install လုပ်ပါ
NPM က axisos ကိုထည့်ပါ

iii ။ စီမံကိန်းလမ်းညွှန်ဖွဲ့စည်းပုံ

CSS /
    - Style.CSS
js /
    - Main.js
php /
    - ဒေတာ .php
index.html

• CSS directory တွင် style.css ဖိုင်တစ်ခုကို style.css ဖိုင်တစ်ခုကိုဖန်တီးပါ။

• JS လမ်းညွှန်တွင် Vue.js ၏ယုတ္တိဗေဒကိုရေးရန် Main.js ဖိုင်ကိုဖန်တီးပါ။

• PHP directory တွင် data.php ကို backend အချက်အလက်များကိုတုပရန်ဖန်တီးပါ။

• Index.html ကိုစီမံကိန်းအတွက် entry file အဖြစ်အသုံးပြုသည်။

4 ။ ဒေတာပြင်ဆင်မှု

<?php
$data = [
    ['name' => &#39;A&#39;, &#39;Value&#39; = >> 100]
    [အမည် &#39;=>>&#39; b &#39;,&#39; value &#39;=> 200]
    [အမည် &#39;=>>&#39; C &#39;,&#39; Value &#39;= >>> 300]
    [အမည် &#39;=>>&#39; D &#39;&#39;, &#39;value&#39; => 400]
    [အမည် &#39;=>>&#39; e &#39;,&#39; Value &#39;= >> 500]
];
echo json_entode ($ ဒေတာ);
>

အထက်ဖော်ပြပါကုဒ်သည် json_encode method မှတဆင့်အမည်များနှင့်တန်ဖိုးများပါ 0 င်သောအမည်များနှင့်တန်ဖိုးများကို JSON format များအဖြစ်ပြောင်းလဲပြီးရှေ့တန်းမှပြန်လာသောအချက်အလက်များကိုတုပသည်။

vue.js ကုဒ်

'vue' မှတင်သွင်းမှု vue;
'axios' မှ Axios တင်သွင်း;
ECHARTS မှ ECTARTS ကို ECTARTS ကိုတင်သွင်းပါ။

အသစ် vue ({
   el: '#app',
   ဒေတာ: {
       chartdata: []
   },
   ဖန်တီး () {)
       that.fetchdata ();
   },
   နည်းလမ်းများ: {
       Fetchdata () {)
           Axios.GEget ('./ PHP / data.php')
               .then (တုံ့ပြန်မှု => {
                   this.Chartdata = Respons.Data;
                   this.drawchart ();
               })
               .Catch (အမှား => {
                   console.log (အမှား);
               });
       },
       Drawchart () {)
           var chart = etarts.init (document.getentebyid ('chart-container'));
           var option = {
               ခေါင်းစဉ်: {
                   စာသား: 'စာရင်းဇယားဇယား'
               },
               xaxis: {
                   အမျိုးအစား: 'အမျိုးအစား'
                   ဒေတာ: This.Chartdata.map (item => item.name)
               },
               Yaxis: {
                   အမျိုးအစား: 'Value'
               },
               စီးရီး - [{{
                   ဒေတာ: This.Chartdata.map (item => item.value),
                   အမျိုးအစား: 'ဘား'
               }]
           };
           chart.settion (option);
       }
   }
});

ဤကုဒ်သည် Axios မှတစ်ဆင့် backend data ကိုရရှိပြီးဘားဇယားများထုတ်လုပ်ရန် ECHARTS ကို အသုံးပြုသည်။

6 ။ HTML စာမျက်နှာကုဒ်နံပါတ်

<meta charset="utf-8">
<title>PHP နှင့် vue.js လက်တွေ့ကျကျသင်ခန်းစာများ</title>
<link rel="stylesheet" type="text/css" href="./css/style.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="./js/main.js"></script>
<div id="app">
    <div id="chart-container"></div>
</div>

HTML တွင်ကျွန်ုပ်တို့ဖန်တီးသည်

NPM Run ကိုအမှုဆောင်