جاوا اسکریپت
<script src="vendors/echarts/echarts.min.js"></script>شروع شدن
برای گردش کار مبتنی بر gulp:
برای افزودن نمودار جدید با استفاده از Echarts، مراحل زیر را دنبال کنید:
- یک عنصر HTML با نام کلاس منحصر به فرد اضافه کنید. مثلا:
<div class="echart-bar-top-products" data-echart-responsive="true"></div> - ارتفاع عنصر نمودار را در CSS مشخص کنید
- یک فایل جاوا اسکریپت را به
src/jsدایرکگرید اضافه کنید و یک تابع بنویسید تا Echart را با گزینه های مورد نیاز مقداردهی اولیه کند.
نکات: هر نموداری از Falcon را که می‌خواهید کپی کنید، انتخاب کنید، فایل را کپی کنید و نام کلاس و گزینه‌ها را جایگزین کنید. - وارد کردن و فراخوانی تابع در
src/js/themeفایل.
اگر از gulp استفاده نمی کنید:
اگر از گردش کار مبتنی بر gulp استفاده نمی کنید و می خواهید Echart را اضافه کنید، مراحل زیر را دنبال کنید:
- یک عنصر HTML با نام کلاس منحصر به فرد اضافه کنید. مثلا:
<div class="echart-bar-top-products" data-echart-responsive="true"></div> - ارتفاع عنصر نمودار را در CSS مشخص کنید
- یک تابع در
public/assets/js/theme.jsفایل بنویسید تا echart با نام کلاس در مرحله اول مقداردهی اولیه شود و گزینه های مورد نیاز را پاس کنید.
نکات: نموداری را که می‌خواهید کپی کنید انتخاب کنید و کد نمودار را از آن کپی کنیدpublic/assets/js/theme.jsیاpublic/assets/js/echart-example.js. سپس کد پایینpublic/assets/js/theme.jsفایل را قرار دهید و نام کلاس و گزینه ها را جایگزین کنید. - تابعی را که در مرحله قبل ساخته اید فراخوانی کنید.
پاسخگو
به Echarts پاسخگو فقط data-echart-responsive="true" عنصر dom خود را اضافه کنید. فالکون true مقدار را می گیرد و با تغییر اندازه کانتینر، اندازه نمودارها را تغییر می دهد.
Echart در داخل یک Tab
برای تنظیم هر echart در داخل مؤلفه تب Bootstrap در فالکون، مراحل زیر را دنبال کنید:
data-tab-has-echartویژگی را به.nav-tabعنصر اضافه کنید.- سپس
data-echart-tabویژگی را به عنصر Echart اضافه کنید.
با دنبال کردن این مراحل می توان چندین echart را در یک تب اضافه کرد یا چندین تب با Echart را نیز قرار داد.
<ul class="nav nav-tabs mb-3" id="echart-tab-example" role="tablist" data-tab-has-echarts="data-tab-has-echarts">
<li class="nav-item" role="presentation"><button class="nav-link active" id="bar-chart-tab" data-bs-toggle="pill" data-bs-target="#bar-chart" type="button" role="tab" aria-controls="bar-chart" aria-selected="true">Bar Chart</button></li>
<li class="nav-item" role="presentation"><button class="nav-link" id="line-charts-tab" data-bs-toggle="pill" data-bs-target="#line-charts" type="button" role="tab" aria-controls="line-charts" aria-selected="false">Line Chart</button></li>
</ul>
<div class="tab-content" id="echart-tab-example-content">
<div class="tab-pane fade show active" id="bar-chart" role="tabpanel" aria-labelledby="bar-chart-tab">
<div class="echart-bar-top-products" data-echart-responsive="true" data-echart-tab="data-echart-tab"></div>
</div>
<div class="tab-pane fade" id="line-charts" role="tabpanel" aria-labelledby="line-charts-tab">
<div class="echart-line-total-sales" data-echart-responsive="true" data-echart-tab="data-echart-tab"></div>
</div>
</div>
