📋 محتويات الصفحة
📖 الوصف
ECharts هي مكتبة رسوم بيانية مفتوحة المصدر من Baidu (الآن تحت Apache foundation). توفر أداء عالي، تفاعلات سلسة، ورسومات غنية مثل 3D charts, Maps, GL, و Candlestick charts. تستخدم WebGL للأداء العالي مع البيانات الضخمة. تدعم جميع أطر العمل (React, Vue, Angular, Svelte) وتعتبر الخيار الأفضل للبيانات ...
🎯 يستخدم في
مجالات استخدام هذه الأداة
Dashboards المؤسساتية
Big data visualizations
Financial charts & stock trading
Geographic data maps
Real-time monitoring
Complex multi-dimensional data
✨ المميزات
أبرز مميزات هذه الأداة
أداء عالي جداً (WebGL rendering)
20+ نوع رسم بياني
3D charts (ECharts GL)
Maps geographi (world
China
إلخ)
Data streaming و real-time
Tree & Graph visualizations
Declarative configuration بسيطة
Rich interactions (zoom
brush
tooltip)
Print-friendly
RTL support
Active community (أكبر 100k على GitHub)
Apache License
⚠️ العيوب
نقاط يجب مراعاتها
Configuration complex لبعض الأنواع
Documentation أحياناً غامضة (صيني)
Bundle size كبير (~400KB gzipped)
Customization محدود مقارنة بـ D3
Learning curve متوسط
Some advanced features تحتاج plugins
🔄 البدائل
أدوات بديلة يمكنك استخدامها
💻 مثال على الاستخدام
كيفية استخدام هذه الأداة
import * as echarts from 'echarts';
// Line chart
const myChart = echarts.init(document.getElementById('main'));
const option = {
title: { text: 'مبيعات الشهر', left: 'center' },
tooltip: {
trigger: 'axis',
formatter: function(params) {
return params.map(p => `${p.seriesName}: ${p.value} ر.س`).join('<br/>');
}
},
legend: { data: ['المبيعات', 'الإيرادات'], top: 30 },
xAxis: {
data: ['يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو']
},
yAxis: {},
series: [
{
name: 'المبيعات',
type: 'line',
smooth: true,
data: [150, 230, 224, 218, 135, 147],
areaStyle: { opacity: 0.3 }
},
{
name: 'الإيرادات',
type: 'line',
smooth: true,
data: [80, 120, 100, 130, 90, 95]
}
]
};
myChart.setOption(option);
// 3D Globe
const globe = echarts.init(document.getElementById('globe'));
globe.setOption({
globe: {
baseTexture: '/map-texture.jpg',
shading: 'lambert',
light: { ambient: { intensity: 0.5 }, main: { intensity: 1 } }
},
series: [{
type: 'scatter3D',
coordinateSystem: 'globe',
data: [
[30.0444, 31.2357, 100], // القاهرة
[24.7136, 46.6753, 80] // الرياض
]
}]
});
// Candlestick Chart (Stock)
const stockChart = echarts.init(document.getElementById('stock'));
stockChart.setOption({
xAxis: { data: ['2023-01', '2023-02', '2023-03'] },
yAxis: {},
series: [{
type: 'candlestick',
data: [
[20, 34, 10, 38],
[40, 35, 30, 50],
[31, 38, 33, 44]
]
}]
});📚 أدوات أخرى في Charts
قد يعجبك أيضاً
ApexCharts
⭐مكتبة رسوم بيانية JavaScript تفاعلية حديثة (Modern Interactive Charts)
Chart.js
⭐مكتبة رسوم بيانية JavaScript بسيطة وخفيفة (Simple yet Flexible JS Charts)
D3
⭐مكتبة معالجة البيانات وتصويرها منخفضة المستوى (Low-Level Data Visualization Library)
Highcharts
⭐مكتبة رسوم بيانية JavaScript احترافية (Professional JavaScript Charts)
Nivo
⭐مكتبة رسوم بيانية React غنية بمكونات declarative (Rich Declarative Data Visualization)
Plotly
⭐مكتبة رسوم بيانية علمية متقدمة (Scientific & Advanced Charts)