├── .editorconfig ├── .gitignore ├── .postcssrc.js ├── README.md ├── babel.config.js ├── package.json ├── quasar.conf.js └── src ├── App.vue ├── assets ├── quasar-logo-full.svg ├── sad.svg └── screenshot.png ├── boot ├── .gitkeep ├── axios.js └── i18n.js ├── components ├── .gitkeep ├── SectionHeader.vue ├── animations │ ├── robust-animation-1.vue │ └── robust-animation-2.vue └── headings │ └── heading2.vue ├── css └── app.css ├── i18n ├── en-us │ └── index.js └── index.js ├── index.template.html ├── layouts └── MyLayout.vue ├── pages ├── Error404.vue └── Index.vue ├── router ├── index.js └── routes.js ├── statics ├── app-logo-128x128.png └── icons │ ├── apple-icon-120x120.png │ ├── apple-icon-152x152.png │ ├── apple-icon-167x167.png │ ├── apple-icon-180x180.png │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── favicon-96x96.png │ ├── favicon.ico │ ├── icon-128x128.png │ ├── icon-192x192.png │ ├── icon-256x256.png │ ├── icon-384x384.png │ ├── icon-512x512.png │ ├── ms-icon-144x144.png │ └── safari-pinned-tab.svg └── store ├── index.js └── module-example ├── actions.js ├── getters.js ├── index.js ├── mutations.js └── state.js /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .quasar 2 | .DS_Store 3 | .thumbs.db 4 | node_modules 5 | /dist 6 | /src-cordova/node_modules 7 | /src-cordova/platforms 8 | /src-cordova/plugins 9 | /src-cordova/www 10 | /src-bex/www 11 | /src-bex/js/core 12 | npm-debug.log* 13 | yarn-debug.log* 14 | yarn-error.log* 15 | package-lock.json 16 | 17 | # Editor directories and files 18 | .idea 19 | .vscode 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | plugins: [ 5 | // to edit target browsers: use "browserslist" field in package.json 6 | require('autoprefixer') 7 | ] 8 | } 9 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Quasar echarts Demo 2 | 3 | This repo is created for an article I wrote about how to add charts in the Quasar app. This code shows how you can add a bar chart, pie chart, line chart and scatter plot. 4 | 5 | [You can read my article here.](https://medium.com/@pratikpatel_60309/adding-charts-in-quasar-4ffecaf33933) 6 | 7 | 8 | 9 | ![Alt text](src/assets/screenshot.png?raw=true "Screenshot") 10 | 11 | ## Project setup 12 | ```bash 13 | npm install 14 | ``` 15 | 16 | ### Start the app in development mode (hot-code reloading, error reporting, etc.) 17 | ```bash 18 | quasar dev 19 | ``` 20 | 21 | 22 | ### Build the app for production 23 | ```bash 24 | quasar build 25 | ``` 26 | 27 | ### Customize the configuration 28 | See [Configuring quasar.conf.js](https://quasar.dev/quasar-cli/quasar-conf-js). 29 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@quasar/babel-preset-app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "quasar_app", 3 | "version": "0.0.1", 4 | "description": "A Quasar Framework app", 5 | "productName": "Quasar App", 6 | "cordovaId": "org.cordova.quasar.app", 7 | "capacitorId": "", 8 | "author": "pratik.patel ", 9 | "private": true, 10 | "scripts": { 11 | "test": "echo \"No test specified\" && exit 0" 12 | }, 13 | "dependencies": { 14 | "@quasar/extras": "^1.0.0", 15 | "axios": "1.6.0", 16 | "echarts": "4.4.0", 17 | "numeral": "2.0.6", 18 | "quasar": "1.22.10", 19 | "vue-echarts-v3": "2.0.1", 20 | "vue-i18n": "8.0.0" 21 | }, 22 | "devDependencies": { 23 | "@quasar/app": "^1.0.0" 24 | }, 25 | "engines": { 26 | "node": ">= 8.9.0", 27 | "npm": ">= 5.6.0", 28 | "yarn": ">= 1.6.0" 29 | }, 30 | "browserslist": [ 31 | "last 1 version, not dead, ie >= 11" 32 | ] 33 | } 34 | -------------------------------------------------------------------------------- /quasar.conf.js: -------------------------------------------------------------------------------- 1 | // Configuration for your app 2 | // https://quasar.dev/quasar-cli/quasar-conf-js 3 | 4 | module.exports = function (ctx) { 5 | return { 6 | // app boot file (/src/boot) 7 | // --> boot files are part of "main.js" 8 | // https://quasar.dev/quasar-cli/cli-documentation/boot-files 9 | boot: [ 10 | 'i18n', 11 | 'axios' 12 | ], 13 | 14 | // https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-css 15 | css: [ 16 | 'app.css' 17 | ], 18 | 19 | // https://github.com/quasarframework/quasar/tree/dev/extras 20 | extras: [ 21 | // 'ionicons-v4', 22 | // 'mdi-v4', 23 | // 'fontawesome-v5', 24 | // 'eva-icons', 25 | // 'themify', 26 | // 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both! 27 | 28 | 'roboto-font', // optional, you are not bound to it 29 | 'material-icons' // optional, you are not bound to it 30 | ], 31 | 32 | // https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-framework 33 | framework: { 34 | // iconSet: 'ionicons-v4', // Quasar icon set 35 | // lang: 'de', // Quasar language pack 36 | 37 | // Possible values for "all": 38 | // * 'auto' - Auto-import needed Quasar components & directives 39 | // (slightly higher compile time; next to minimum bundle size; most convenient) 40 | // * false - Manually specify what to import 41 | // (fastest compile time; minimum bundle size; most tedious) 42 | // * true - Import everything from Quasar 43 | // (not treeshaking Quasar; biggest bundle size; convenient) 44 | all: 'auto', 45 | 46 | components: [ 47 | 'QTree', 48 | 'QBtnDropdown' 49 | ], 50 | directives: [], 51 | 52 | // Quasar plugins 53 | plugins: [] 54 | }, 55 | 56 | // https://quasar.dev/quasar-cli/cli-documentation/supporting-ie 57 | supportIE: true, 58 | 59 | // https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-build 60 | build: { 61 | scopeHoisting: true, 62 | vueRouterMode: 'history', 63 | // showProgress: false, 64 | // gzip: true, 65 | // analyze: true, 66 | // preloadChunks: false, 67 | // extractCSS: false, 68 | 69 | // https://quasar.dev/quasar-cli/cli-documentation/handling-webpack 70 | extendWebpack (cfg) { 71 | } 72 | }, 73 | 74 | // https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-devServer 75 | devServer: { 76 | // https: true, 77 | // port: 8080, 78 | open: true // opens browser window automatically 79 | }, 80 | 81 | // animations: 'all', // --- includes all animations 82 | // https://quasar.dev/options/animations 83 | animations: [], 84 | 85 | // https://quasar.dev/quasar-cli/developing-ssr/configuring-ssr 86 | ssr: { 87 | pwa: false 88 | }, 89 | 90 | // https://quasar.dev/quasar-cli/developing-pwa/configuring-pwa 91 | pwa: { 92 | // workboxPluginMode: 'InjectManifest', 93 | // workboxOptions: {}, // only for NON InjectManifest 94 | manifest: { 95 | // name: 'Quasar App', 96 | // short_name: 'Quasar App', 97 | // description: 'A Quasar Framework app', 98 | display: 'standalone', 99 | orientation: 'portrait', 100 | background_color: '#ffffff', 101 | theme_color: '#027be3', 102 | icons: [ 103 | { 104 | 'src': 'statics/icons/icon-128x128.png', 105 | 'sizes': '128x128', 106 | 'type': 'image/png' 107 | }, 108 | { 109 | 'src': 'statics/icons/icon-192x192.png', 110 | 'sizes': '192x192', 111 | 'type': 'image/png' 112 | }, 113 | { 114 | 'src': 'statics/icons/icon-256x256.png', 115 | 'sizes': '256x256', 116 | 'type': 'image/png' 117 | }, 118 | { 119 | 'src': 'statics/icons/icon-384x384.png', 120 | 'sizes': '384x384', 121 | 'type': 'image/png' 122 | }, 123 | { 124 | 'src': 'statics/icons/icon-512x512.png', 125 | 'sizes': '512x512', 126 | 'type': 'image/png' 127 | } 128 | ] 129 | } 130 | }, 131 | 132 | // https://quasar.dev/quasar-cli/developing-cordova-apps/configuring-cordova 133 | cordova: { 134 | // id: 'org.cordova.quasar.app', 135 | // noIosLegacyBuildFlag: true, // uncomment only if you know what you are doing 136 | }, 137 | 138 | // https://quasar.dev/quasar-cli/developing-electron-apps/configuring-electron 139 | electron: { 140 | // bundler: 'builder', // or 'packager' 141 | 142 | extendWebpack (cfg) { 143 | // do something with Electron main process Webpack cfg 144 | // chainWebpack also available besides this extendWebpack 145 | }, 146 | 147 | packager: { 148 | // https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#options 149 | 150 | // OS X / Mac App Store 151 | // appBundleId: '', 152 | // appCategoryType: '', 153 | // osxSign: '', 154 | // protocol: 'myapp://path', 155 | 156 | // Windows only 157 | // win32metadata: { ... } 158 | }, 159 | 160 | builder: { 161 | // https://www.electron.build/configuration/configuration 162 | 163 | // appId: 'quasar_app' 164 | } 165 | } 166 | } 167 | } 168 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | -------------------------------------------------------------------------------- /src/assets/quasar-logo-full.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 19 | 21 | 43 | 45 | 46 | 48 | image/svg+xml 49 | 51 | 52 | 53 | 54 | 55 | 60 | 63 | 66 | 69 | 75 | 79 | 83 | 87 | 91 | 95 | 99 | 103 | 104 | 105 | 106 | 107 | 113 | 118 | 126 | 133 | 142 | 151 | 160 | 169 | 178 | 187 | 188 | 189 | 190 | 191 | 192 | -------------------------------------------------------------------------------- /src/assets/sad.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/assets/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pratik227/echarts-quasar/5cc23a653fb7382ebb117426f592f2e420df3dfa/src/assets/screenshot.png -------------------------------------------------------------------------------- /src/boot/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pratik227/echarts-quasar/5cc23a653fb7382ebb117426f592f2e420df3dfa/src/boot/.gitkeep -------------------------------------------------------------------------------- /src/boot/axios.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import axios from 'axios' 3 | 4 | Vue.prototype.$axios = axios 5 | -------------------------------------------------------------------------------- /src/boot/i18n.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import VueI18n from 'vue-i18n' 3 | import messages from 'src/i18n' 4 | 5 | Vue.use(VueI18n) 6 | 7 | const i18n = new VueI18n({ 8 | locale: 'en-us', 9 | fallbackLocale: 'en-us', 10 | messages 11 | }) 12 | 13 | export default ({ app }) => { 14 | // Set i18n instance on app 15 | app.i18n = i18n 16 | } 17 | 18 | export { i18n } 19 | 20 | -------------------------------------------------------------------------------- /src/components/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pratik227/echarts-quasar/5cc23a653fb7382ebb117426f592f2e420df3dfa/src/components/.gitkeep -------------------------------------------------------------------------------- /src/components/SectionHeader.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 32 | -------------------------------------------------------------------------------- /src/components/animations/robust-animation-1.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | -------------------------------------------------------------------------------- /src/components/animations/robust-animation-2.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | -------------------------------------------------------------------------------- /src/components/headings/heading2.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 13 | 14 | 17 | -------------------------------------------------------------------------------- /src/css/app.css: -------------------------------------------------------------------------------- 1 | /* app global css */ 2 | -------------------------------------------------------------------------------- /src/i18n/en-us/index.js: -------------------------------------------------------------------------------- 1 | // This is just an example, 2 | // so you can safely delete all default props below 3 | 4 | export default { 5 | failed: 'Action failed', 6 | success: 'Action was successful' 7 | } 8 | -------------------------------------------------------------------------------- /src/i18n/index.js: -------------------------------------------------------------------------------- 1 | import enUS from './en-us' 2 | 3 | export default { 4 | 'en-us': enUS 5 | } 6 | -------------------------------------------------------------------------------- /src/index.template.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | <%= htmlWebpackPlugin.options.productName %> 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | -------------------------------------------------------------------------------- /src/layouts/MyLayout.vue: -------------------------------------------------------------------------------- 1 | 67 | 68 | 82 | -------------------------------------------------------------------------------- /src/pages/Error404.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 24 | -------------------------------------------------------------------------------- /src/pages/Index.vue: -------------------------------------------------------------------------------- 1 | 118 | 641 | 648 | -------------------------------------------------------------------------------- /src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import VueRouter from 'vue-router' 3 | 4 | import routes from './routes' 5 | 6 | Vue.use(VueRouter) 7 | 8 | /* 9 | * If not building with SSR mode, you can 10 | * directly export the Router instantiation 11 | */ 12 | 13 | export default function (/* { store, ssrContext } */) { 14 | const Router = new VueRouter({ 15 | scrollBehavior: () => ({ x: 0, y: 0 }), 16 | routes, 17 | 18 | // Leave these as is and change from quasar.conf.js instead! 19 | // quasar.conf.js -> build -> vueRouterMode 20 | // quasar.conf.js -> build -> publicPath 21 | mode: process.env.VUE_ROUTER_MODE, 22 | base: process.env.VUE_ROUTER_BASE 23 | }) 24 | 25 | return Router 26 | } 27 | -------------------------------------------------------------------------------- /src/router/routes.js: -------------------------------------------------------------------------------- 1 | 2 | const routes = [ 3 | { 4 | path: '/', 5 | component: () => import('layouts/MyLayout.vue'), 6 | children: [ 7 | { path: '', component: () => import('pages/Index.vue') } 8 | ] 9 | } 10 | ] 11 | 12 | // Always leave this as last one 13 | if (process.env.MODE !== 'ssr') { 14 | routes.push({ 15 | path: '*', 16 | component: () => import('pages/Error404.vue') 17 | }) 18 | } 19 | 20 | export default routes 21 | -------------------------------------------------------------------------------- /src/statics/app-logo-128x128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pratik227/echarts-quasar/5cc23a653fb7382ebb117426f592f2e420df3dfa/src/statics/app-logo-128x128.png -------------------------------------------------------------------------------- /src/statics/icons/apple-icon-120x120.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pratik227/echarts-quasar/5cc23a653fb7382ebb117426f592f2e420df3dfa/src/statics/icons/apple-icon-120x120.png -------------------------------------------------------------------------------- /src/statics/icons/apple-icon-152x152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pratik227/echarts-quasar/5cc23a653fb7382ebb117426f592f2e420df3dfa/src/statics/icons/apple-icon-152x152.png -------------------------------------------------------------------------------- /src/statics/icons/apple-icon-167x167.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pratik227/echarts-quasar/5cc23a653fb7382ebb117426f592f2e420df3dfa/src/statics/icons/apple-icon-167x167.png -------------------------------------------------------------------------------- /src/statics/icons/apple-icon-180x180.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pratik227/echarts-quasar/5cc23a653fb7382ebb117426f592f2e420df3dfa/src/statics/icons/apple-icon-180x180.png -------------------------------------------------------------------------------- /src/statics/icons/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pratik227/echarts-quasar/5cc23a653fb7382ebb117426f592f2e420df3dfa/src/statics/icons/favicon-16x16.png -------------------------------------------------------------------------------- /src/statics/icons/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pratik227/echarts-quasar/5cc23a653fb7382ebb117426f592f2e420df3dfa/src/statics/icons/favicon-32x32.png -------------------------------------------------------------------------------- /src/statics/icons/favicon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pratik227/echarts-quasar/5cc23a653fb7382ebb117426f592f2e420df3dfa/src/statics/icons/favicon-96x96.png -------------------------------------------------------------------------------- /src/statics/icons/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pratik227/echarts-quasar/5cc23a653fb7382ebb117426f592f2e420df3dfa/src/statics/icons/favicon.ico -------------------------------------------------------------------------------- /src/statics/icons/icon-128x128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pratik227/echarts-quasar/5cc23a653fb7382ebb117426f592f2e420df3dfa/src/statics/icons/icon-128x128.png -------------------------------------------------------------------------------- /src/statics/icons/icon-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pratik227/echarts-quasar/5cc23a653fb7382ebb117426f592f2e420df3dfa/src/statics/icons/icon-192x192.png -------------------------------------------------------------------------------- /src/statics/icons/icon-256x256.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pratik227/echarts-quasar/5cc23a653fb7382ebb117426f592f2e420df3dfa/src/statics/icons/icon-256x256.png -------------------------------------------------------------------------------- /src/statics/icons/icon-384x384.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pratik227/echarts-quasar/5cc23a653fb7382ebb117426f592f2e420df3dfa/src/statics/icons/icon-384x384.png -------------------------------------------------------------------------------- /src/statics/icons/icon-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pratik227/echarts-quasar/5cc23a653fb7382ebb117426f592f2e420df3dfa/src/statics/icons/icon-512x512.png -------------------------------------------------------------------------------- /src/statics/icons/ms-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pratik227/echarts-quasar/5cc23a653fb7382ebb117426f592f2e420df3dfa/src/statics/icons/ms-icon-144x144.png -------------------------------------------------------------------------------- /src/statics/icons/safari-pinned-tab.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/store/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuex from 'vuex' 3 | 4 | // import example from './module-example' 5 | 6 | Vue.use(Vuex) 7 | 8 | /* 9 | * If not building with SSR mode, you can 10 | * directly export the Store instantiation 11 | */ 12 | 13 | export default function (/* { ssrContext } */) { 14 | const Store = new Vuex.Store({ 15 | modules: { 16 | // example 17 | }, 18 | 19 | // enable strict mode (adds overhead!) 20 | // for dev mode only 21 | strict: process.env.DEV 22 | }) 23 | 24 | return Store 25 | } 26 | -------------------------------------------------------------------------------- /src/store/module-example/actions.js: -------------------------------------------------------------------------------- 1 | export function someAction (/* context */) { 2 | } 3 | -------------------------------------------------------------------------------- /src/store/module-example/getters.js: -------------------------------------------------------------------------------- 1 | export function someGetter (/* state */) { 2 | } 3 | -------------------------------------------------------------------------------- /src/store/module-example/index.js: -------------------------------------------------------------------------------- 1 | import state from './state' 2 | import * as getters from './getters' 3 | import * as mutations from './mutations' 4 | import * as actions from './actions' 5 | 6 | export default { 7 | namespaced: true, 8 | getters, 9 | mutations, 10 | actions, 11 | state 12 | } 13 | -------------------------------------------------------------------------------- /src/store/module-example/mutations.js: -------------------------------------------------------------------------------- 1 | export function someMutation (/* state */) { 2 | } 3 | -------------------------------------------------------------------------------- /src/store/module-example/state.js: -------------------------------------------------------------------------------- 1 | export default { 2 | // 3 | } 4 | --------------------------------------------------------------------------------