كيفية إضافة المخططات والرسوم البيانية إلى تطبيق Vue.js

دليل سريع لاستخدام echarts و echarts vue

الصورة من قبل كاي Oberhäuser على Unsplash

قلب كل تطبيق هو عرض البيانات للمستخدمين. في بعض الأحيان يكون من الصعب للغاية عرض تلك البيانات باستخدام النص. تعد المخططات والرسوم البيانية طريقة رائعة لتوفير تمثيل مرئي لتلك البيانات. في هذه المقالة ، سأريك مدى سهولة إنشاء مخططات جذابة بصريًا في تطبيق Vue.js الخاص بك.

ابدء

سوف أستخدم Vue CLI لسقوط طلب بدء التشغيل بسرعة. سأستخدم كل من echarts و echarts vue لإضافة مخططات إلى تطبيق البداية. اذا هيا بنا نبدأ.

قم بتثبيت Vue CLI باستخدام هذا الأمر:

تثبيت npm @ vue / cli

بعد ذلك ، سوف نستخدم Vue CLI لسحب تطبيق Vue الذي سنستخدمه. سننشئ التطبيق باستخدام هذا الأمر:

vue إنشاء vue-echarts-demo

سيسألك Vue CLI عما إذا كنت تريد استخدام الإعداد المسبق الافتراضي أو تحديد الميزات يدويًا. اختر الافتراضي.

سيؤدي هذا إلى إنشاء تطبيقنا في مجلد يسمى vue-echarts-demo. التغيير في هذا الدليل باستخدام هذا الأمر:

مؤتمر نزع السلاح vue-echarts التجريبي

تثبيت حزم المخطط

يعد eCharts أحد أكبر برامج المخططات وأكثرها استخدامًا. سوف نستخدم هذا في تطبيقنا vue. للسماح باستخدامه في Vue ، سنستخدم أيضًا منتجًا يسمى vue-echarts. Vue-echarts عبارة عن غلاف لبرنامج eCharts للسماح له بالعمل في بيئة Vue.

يمكنك تثبيتهما مع هذا الأمر:

npm تثبيت echarts vue-echarts

تكوين حزم المخطط

الآن وبعد أن تم تثبيت حزم المخططات ، نحتاج إلى تثبيتها في تطبيقنا. افتح دليل src وقم بإنشاء دليل جديد يسمى الإضافات. داخل دليل الإضافات الجديد ، قم بإنشاء ملف يسمى echarts.js.

سننشئ مكون Vue للرموز الإلكترونية في هذا الملف. سيكون المكون متاحًا عالميًا في تطبيقنا. الخطوات التي نحتاج إلى اتخاذها هي استيراد كل من vue و vue-echarts. بعد ذلك ، سنقوم باستيراد أجزاء المخططات الإلكترونية التي سنستخدمها. سيكون مخططنا الأول مخططًا شريطيًا لذلك سنحتاج إلى استيراده أيضًا. أخيرًا ، نخلق مكونًا عالميًا يسمى المخطط. إليك ما يجب أن يبدو عليه ملف echarts.js:

استيراد Vue من 'vue' ؛
استيراد Echarts من 'vue-echarts' ؛

استيراد "echarts / lib / chart / bar" ؛

Vue.component ('المخطط' ، Echarts) ؛

استيراد ملف البرنامج المساعد لدينا

علينا أن نجعل برنامج Vue يدرك الملف الذي أنشأناه للتو. نقوم بذلك عن طريق استيراده في ملف main.js. افتح ملف main.js وأضف السطر التالي بعد آخر عبارة استيراد:

استيراد "@ / plugins / echarts" ؛

الآن نحن على استعداد لإنشاء الرسم البياني الأول لدينا.

إنشاء مخطط شريطي

سننشئ كل مخططاتنا في مكون HelloWorld. تم إنشاء هذا المكون تلقائيًا عندما استخدمنا Vue CLI لإنشاء تطبيقنا.

افتح الملف HelloWorld.vue وقم بما يلي:

  • حذف جميع أتش تي أم أل داخل علامات القالب
  • حذف الدعائم في علامات البرنامج النصي
  • حذف كل CSS في علامات النمط

يجب أن يبدو الملف الخاص بك كما يلي:

<القالب>