Foto nga Isaac Smith në Unsplash
Mbështetje
Nëse kjo ju ka ndihmuar në ndonjë mënyrë, ju mund të kontribuoni në këtë projekt për mbijetesë afatgjatë duke më mbështetur mua:
"Mbështeni punën time me burim të hapur në GitHub"
Sigurohuni që të shikoni faqen time të sponsorit.
(GitHub aktualisht dyfishon mbështetjen tuaj! Pra, nëse më mbështetni me 10 dollarë/muaj, unë do të marr 20 dollarë në vend të kësaj! Ata janë alkimistë.)
Shume faleminderit!!!
Pra, ne kemi parë tashmë se si të shtojmë grafikët në aplikacionin ueb quasar në "artikullin tim të mëparshëm". Është shumë e lehtë të shtoni vetëm npm installechartsdhe vue-echarts-v3 dhe jeni gati të krijoni grafikë.
Në këtë artikull, unë do t'ju jap informacione për t'ju ndihmuar të shtoni grafikët në SPA (Aplikacioni me një faqe të vetme)/Uebsajti juaj duke përdorur Quasar UMD (Përkufizimi i Unifikuar i Modulit).
Fillimi
Përpara se të filloni udhëtimin tuaj të vizualizimit, duhet të njiheni me Quasar, Vue js.
Gjëja e parë që duhet të bëni është të zgjidhni vetëm bibliotekat e kërkuara ("Instalimi").
Gjëja tjetër që duhet të bëni është të importoni të gjitha CDN j-të e vue-echarts-v3 dhe echarts
Tani jeni gati për të krijuar grafikët. Shembulli i mëposhtëm shpjegon se si mund të përdorni grafikët në komponentë. Ka dy mënyra për të krijuar grafikë.
1. Duke përdorur echarts CDN
Një mënyrë është që ju mund të përdorni drejtpërdrejt CDN eCharts dhe të krijoni grafikë.
Gjëja e parë që duhet të bëni është të shtoni një etiketë divnë HTML me ID-në që dëshironi dhe të shtoni CDN e Charts.
Gjëja tjetër që duhet të bëni është të merrni elementin dom dhe të inicializoni shembullin eCharts duke përdorur metodën echarts.init() dhe më pas të përdorni metodën setOption() për të vendosur opsionet. Shembulli i mëposhtëm shpjegon se si mund të përdorni eCharts CDN për krijimin e grafikëve.
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet"
type="text/css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/ionicons@^4.0.0/dist/css/ionicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@^3.0.0/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/animate.css@^3.5.2/animate.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.min.css" rel="stylesheet" type="text/css">
<style>
.top-header-padding {
padding-top: 1rem;
padding-right: 4rem;
padding-bottom: 3rem;
padding-left: 4rem;
}
.echarts {
height: 400px;
}
[v-cloak] {
display: none;http://numeraljs.com/
}
</style>
</head>
<body>
<div id="q-app">
<q-layout view="hHh Lpr lFf" v-cloak>
<q-header>
<q-toolbar>
<q-toolbar-title>
Quasar App
</q-toolbar-title>
<div>Quasar v{{ $q.version }}</div>
</q-toolbar>
</q-header>
<q-page-container>
<q-page>
<q-card class="bg-grey-2 no-border no-shadow" square>
<q-card-section>
<div class="row">
<div class="col-12">
<q-card class="bg-white no-shadow">
<q-card-section>
<div class="text-h6 text-grey-8 text-weight-bolder">
Bar Chart
</div>
</q-card-section>
<q-card-section class="q-pa-none q-pb-md">
<div id="barChartId" class="echarts"/>
</q-card-section>
</q-card>
</div>
</div>
</q-card-section>
</q-card>
</q-page>
</q-page-container>
</q-layout>
</div>
<script src="https://cdn.jsdelivr.net/npm/quasar@^1.0.3/dist/quasar.ie.polyfills.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@latest/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@^1.0.3/dist/quasar.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@^1.0.3/dist/lang/pt-br.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/echarts.min.js"></script>
</body>
<script>
new Vue({
el: '#q-app',
data: function () {
return {
barChartOption: {
grid: {
bottom: '25%'
},
legend: {},
tooltip: {},
dataset: {
dimensions: ['product', '2015', '2016', '2017'],
source: [
{product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},
{product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},
{product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},
{product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}
]
},
xAxis: {
type: 'category',
axisLabel: {
rotate: 45
}
},
yAxis: {},
// Declare several bar series, each will be mapped
// to a column of dataset.source by default.
series: [
{type: 'bar'},
{type: 'bar'},
{type: 'bar'}
]
},
}
},
methods: {
CreateBarChart() {
let bar_dom = document.getElementById('barChartId');
let bar_chart = echarts.init(bar_dom);
bar_chart.setOption(this.barChartOption)
}
},
mounted() {
this.CreateBarChart()
}
})
</script>
</html>
2. Duke përdorur vue-echarts-v3 CDN (komponent)
Pra, mënyra e dytë është përdorimi i vue-echarts-v3 CDN.
Në përpjekjet e mia të shumta për të integruar eCharts, hasa në shumë pengesa. Edhe pasi shtova burimin CDN të vue-echarts-v3, nuk isha në gjendje të importoja komponentin eCharts në aplikacionin tim me një faqe. Përdorimi i fjalës kyçe "të nevojshme" për të importuar eCharts e ndjekur nga fjala kyçe "përdor" për të regjistruar komponentët e saj nuk dukej se funksiononte gjithashtu.
Më në fund, gjeta zgjidhjen. Ndërsa përdor CDN, nuk kam nevojë të importoj asgjë. Unë e marr komponentin në variablin VueECharts pas së cilës do të më duhej ta regjistroja duke përdorur components:{iecharts: VueECharts}. Tani jeni gati të krijoni grafikët duke përdorur komponentë.
Ju ose mund të përdorni të llogaritur ose thjesht të deklaroni opsionet në seksionin e të dhënave dhe t'i përdorni ato drejtpërdrejt.
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet"
type="text/css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/ionicons@^4.0.0/dist/css/ionicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@^3.0.0/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/animate.css@^3.5.2/animate.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/quasar@^1.0.3/dist/quasar.min.css" rel="stylesheet" type="text/css">
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC110C5hHuQVXreqe7Iqd7czxy6yyhD9x4" async
defer></script>
<style>
.top-header-padding {
padding-top: 1rem;
padding-right: 4rem;
padding-bottom: 3rem;
padding-left: 4rem;
}
.echartswh {
height: 390px !important;
}
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="q-app">
<q-layout view="hHh Lpr lFf" v-cloak>
<q-header>
<q-toolbar>
<q-toolbar-title>
Quasar App
</q-toolbar-title>
<div>Quasar v{{ $q.version }}</div>
</q-toolbar>
</q-header>
<q-page-container>
<q-page>
<q-card class="bg-grey-2 no-border no-shadow" square>
<q-card-section>
<div class="row">
<div class="col-6">
<q-card class="bg-white no-shadow">
<q-card-section>
<div class="text-h6 text-grey-8 text-weight-bolder">
Pie Chart
</div>
</q-card-section>
<q-card-section class="q-pa-none q-pb-md">
<iecharts :option="pieChartOption" class="echartswh"
:resizable="true"></iecharts>
</q-card-section>
</q-card>
</div>
<div class="col-6">
<q-card class="bg-white q-ml-sm no-shadow">
<q-card-section>
<div class="text-h6 text-grey-8 text-weight-bolder">
Line Chart
</div>
</q-card-section>
<q-card-section class="q-pa-none q-pb-md">
<IEcharts :option="GetLineChartOption" :resizable="true" class="echartswh"/>
</q-card-section>
</q-card>
</div>
</div>
</q-card-section>
</q-card>
</q-page>
</q-page-container>
</q-layout>
</div>
<script src="https://cdn.jsdelivr.net/npm/quasar@^1.0.3/dist/quasar.ie.polyfills.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@latest/dist/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@^1.0.3/dist/quasar.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@^1.0.3/dist/lang/pt-br.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@^1.0.3/dist/icon-set/fontawesome-v5.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-echarts-v3/dist/VueECharts.min.js"></script>
<script src="https://requirejs.org/docs/release/2.3.5/minified/require.js"></script>
</body>
<script>
new Vue({
el: '#q-app',
components: {iecharts: VueECharts},
computed: {
pieChartOption() {
return {
title: {
text: 'Product Pie Chart',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'right',
data: ['Prod1', 'Prod 2', 'Prod 3', 'Prod 4', 'Prod 5']
},
series: [
{
name: 'Products',
type: 'pie',
radius: '55%',
center: ['50%', '50%'],
data: [
{value: 335, name: 'Prod 1'},
{value: 310, name: 'Prod 2'},
{value: 234, name: 'Prod 3'},
{value: 135, name: 'Prod 4'},
{value: 1548, name: 'Prod 5'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
},
GetLineChartOption() {
return {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
}
}
}
})
</script>
<style>
</style>
</html>
Qasja në dokumentacionin e grafikut
ECcharts ofron shumë lloje të tjera grafikësh përveç grafikut me shirita dhe vija. eCharts ofron opsione të ndryshme që mund t'i shtoni në grafikun tuaj. Nëse dëshironi të mësoni për llojet dhe opsionet e tjera të grafikut që janë në dispozicion, mund të lexoni dokumentacionin e tyre.
konkluzioni
Është shumë e lehtë të shtoni grafikët dhe grafikët e personalizuar në Quasar SPA (Aplikacioni/Uebfaqja me një faqe) duke përdorur eCharts CDN.
Nëse keni ndonjë koment, ju lutemi lini një koment më poshtë. Ju lutem duartrokitni per kete artikull.
Më shumë informacion: https://quasar.dev
Për më shumë këshilla dhe këshilla Ju mund të vizitoni artikullin tim të mëparshëm.
Faleminderit per leximin.
