{"version":3,"sources":["webpack:///./src/views/databases/chartTest.vue?e0f4","webpack:///src/views/databases/chartTest.vue","webpack:///./src/views/databases/chartTest.vue?2b0a","webpack:///./src/views/databases/chartTest.vue"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticStyle","attrs","options","model","value","callback","$$v","type","expression","dataLabels","_v","ref","chartOptions","series","chartOptions1","series1","staticRenderFns","component"],"mappings":"uHAAA,IAAIA,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,MAAM,CAACE,YAAY,CAAC,MAAQ,UAAU,CAACF,EAAG,gBAAgB,CAACG,MAAM,CAAC,QAAUP,EAAIQ,SAASC,MAAM,CAACC,MAAOV,EAAQ,KAAEW,SAAS,SAAUC,GAAMZ,EAAIa,KAAKD,GAAKE,WAAW,UAAUV,EAAG,kBAAkB,CAACG,MAAM,CAAC,GAAK,aAAa,OAAQ,EAAK,mBAAkB,GAAOE,MAAM,CAACC,MAAOV,EAAc,WAAEW,SAAS,SAAUC,GAAMZ,EAAIe,WAAWH,GAAKE,WAAW,eAAe,CAACd,EAAIgB,GAAG,YAAYZ,EAAG,YAAY,CAACa,IAAI,YAAYV,MAAM,CAAC,MAAQ,MAAM,KAAOP,EAAIa,KAAK,QAAUb,EAAIkB,aAAa,OAASlB,EAAImB,UAAUf,EAAG,MAAM,CAACA,EAAG,YAAY,CAACG,MAAM,CAAC,KAAO,MAAM,MAAQ,MAAM,QAAUP,EAAIoB,cAAc,OAASpB,EAAIqB,YAAY,IAAI,IACtsBC,EAAkB,GCwBtB,GACE,KAAF,WACI,MAAO,CACL,KAAN,OACM,QAAN,iBACM,YAAN,EACM,cAAN,CACQ,MAAR,CACU,MAAV,IACU,KAAV,OAEQ,MAAR,CACU,KAAV,OACU,MAAV,UAEQ,OAAR,6CACQ,WAAR,EACU,WAAV,IACU,QAAV,CACY,MAAZ,CACc,MAAd,KAEY,OAAZ,CACc,SAAd,cAKM,aAAN,CACQ,MAAR,CACU,GAAV,oBAGQ,MAAR,CACU,KAAV,OACU,MAAV,UAEQ,WAAR,CACU,SAAV,GAEQ,OAAR,CACU,MAAV,MACU,MAAV,SACU,UAAV,QAEQ,MAAR,CACU,WAAV,qCACU,MAAV,CACY,KAAZ,SAGQ,KAAR,CAEU,QAAV,CACY,MAAZ,EACY,KAAZ,KAIQ,OAAR,CAEU,QAAV,CAEY,YAAZ,EACY,WAAZ,WACc,MAAd,wEAGU,YAAV,CACY,kBAAZ,KAIM,OAAN,CACA,CACQ,KAAR,WACQ,KAAR,wBAEA,CACQ,KAAR,WACQ,KAAR,wBAEA,CACQ,KAAR,WACQ,KAAR,yBAGM,QAAN,CACA,CAAQ,MAAR,OAAQ,KAAR,QACA,CAAQ,MAAR,MAAQ,KAAR,OACA,CAAQ,MAAR,OAAQ,KAAR,SAEM,UAAN,IAGE,MAAF,CACI,KADJ,SACA,GACM,QAAN,yBACM,KAAN,wCAEI,SALJ,SAKA,GAEA,EACQ,KAAR,uCAGQ,KAAR,wCAII,WAfJ,SAeA,GACA,EACQ,KAAR,+BACU,WAAV,CACY,SAAZ,KAKQ,KAAR,+BACU,WAAV,CACY,SAAZ,QClJkW,I,YCO9VC,EAAY,eACd,EACAxB,EACAuB,GACA,EACA,KACA,KACA,MAIa,aAAAC,E","file":"static/js/chunk-2d237702.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticStyle:{\"width\":\"500px\"}},[_c('b-form-select',{attrs:{\"options\":_vm.options},model:{value:(_vm.type),callback:function ($$v) {_vm.type=$$v},expression:\"type\"}}),_c('b-form-checkbox',{attrs:{\"id\":\"checkbox-2\",\"value\":true,\"unchecked-value\":false},model:{value:(_vm.dataLabels),callback:function ($$v) {_vm.dataLabels=$$v},expression:\"dataLabels\"}},[_vm._v(\"顯示數值標籤\")]),_c('apexchart',{ref:\"chart1ref\",attrs:{\"width\":\"500\",\"type\":_vm.type,\"options\":_vm.chartOptions,\"series\":_vm.series}}),_c('div',[_c('apexchart',{attrs:{\"type\":\"pie\",\"width\":\"380\",\"options\":_vm.chartOptions1,\"series\":_vm.series1}})],1)],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n    <div style=\"width: 500px;\">\r\n    <b-form-select v-model=\"type\" :options=\"options\"></b-form-select>\r\n    <!-- <b-form-checkbox\r\n        id=\"checkbox-1\"\r\n        v-model=\"selected\"\r\n        :value=\"true\"\r\n        :unchecked-value=\"false\"\r\n        >series-3</b-form-checkbox\r\n    > -->\r\n    <b-form-checkbox\r\n        id=\"checkbox-2\"\r\n        v-model=\"dataLabels\"\r\n        :value=\"true\"\r\n        :unchecked-value=\"false\"\r\n        >顯示數值標籤</b-form-checkbox\r\n    >\r\n    <apexchart ref=\"chart1ref\" width=\"500\" :type=\"type\" :options=\"chartOptions\" :series=\"series\"></apexchart>\r\n    <div>\r\n        <apexchart type=\"pie\" width=\"380\" :options=\"chartOptions1\" :series=\"series1\"></apexchart>\r\n    </div>\r\n    </div>\r\n    \r\n</template>\r\n<script>\r\nexport default {\r\n    data: function() {\r\n    return {\r\n        type:'line',\r\n        series1: [12, 22, 43, 25, 22],\r\n        dataLabels:false,\r\n        chartOptions1: {\r\n            chart: {\r\n            width: 380,\r\n            type: 'pie',\r\n            },\r\n            title: { //設定圖表標題，可不設定(即無標題)\r\n                text: '年齡分佈',\r\n                align: 'center' //設定標題位置，預設為left\r\n            },\r\n            labels: ['0-15歲', '16-25歲', '26-40歲', '40-55歲', '55歲以上'],\r\n            responsive: [{\r\n                breakpoint: 480,\r\n                options: {\r\n                chart: {\r\n                    width: 200\r\n                },\r\n                legend: {\r\n                    position: 'bottom'\r\n                }\r\n                }\r\n            }]\r\n        },\r\n        chartOptions: {\r\n            chart: {\r\n                id: 'vuechart-example',\r\n                //stacked: false\r\n            },\r\n            title: { //設定圖表標題，可不設定(即無標題)\r\n                text: '人數統計',\r\n                align: 'center' //設定標題位置，預設為left\r\n            },\r\n            dataLabels: { //是否在圖表中顯示數值標籤\r\n                enabled: false,\r\n            },\r\n            stroke: { //設定線條格式[只限line & Area模式]\r\n                width: [1, 3], //路徑寬度\r\n                curve: 'smooth', //路徑平滑\r\n                dashArray: [0, 15] //線變為破折號，數值越大破折號越大 [預設為0(即直線)]\r\n            },\r\n            xaxis: {\r\n                categories: [2015, 2016, 2017, 2018, 2019, 2020, 2021,],\r\n                title: {\r\n                    text: 'year'\r\n                },\r\n            },\r\n            grid: { //設定背景網格樣式\r\n                //show : false, //是否顯示背景網格[預設為true]\r\n                padding: { //設定網格位置\r\n                    right: 0,\r\n                    left: 10,\r\n                },\r\n            },\r\n            //labels: ['Apples', 'Oranges', 'Berries', 'Grapes','Apples', 'Oranges', 'Berries', 'Grapes'], //設定x軸的標名，只接受list型態，跟xaxis擇一使用\r\n            legend: { //設定圖例\r\n                //show: false //是否顯示圖例，預設為顯示\r\n                markers: {\r\n                    //radius:0, //圖例圖片圓弧角度 (預設為2)\r\n                    strokeWidth:0,\r\n                    customHTML: function() {\r\n                    return '<span class=\"custom-marker\"><i class=\"fas fa-chart-pie\"></i></span>'\r\n                    }\r\n                },\r\n                onItemClick:{\r\n                    toggleDataSeries: true //轉換成滑鼠鼠標移動到該圖例後，focused該圖例資料 [預設為false，需用滑鼠點擊才可有該效果]\r\n                }\r\n            }\r\n        },\r\n        series: [\r\n            {\r\n                name: 'series-1',\r\n                data: [30, 40, 35, 50, 49, 60, 70],\r\n            },\r\n            {\r\n                name: 'series-2',\r\n                data: [20, 50, 45, 25, 13, 26, 80]\r\n            },\r\n            {\r\n                name:'series-3',\r\n                data: [66, 25, 70, 25, 10, 13, 65]\r\n            },\r\n        ],\r\n        options: [\r\n            { value: 'line', text: 'line' },\r\n            { value: 'bar', text: 'bar' },\r\n            { value: 'area', text: 'area' },\r\n        ],\r\n        selected : true\r\n        }\r\n    },\r\n    watch: {\r\n        \"type\"(val){\r\n            console.log(\"type is changed\",val);\r\n            this.$refs.chart1ref.hideSeries('series-3');\r\n        },\r\n        \"selected\"(val){\r\n            //console.log(\"selected is changed\",val);\r\n            if(val){\r\n                this.$refs.chart1ref.showSeries('series-3');\r\n            }\r\n            else{\r\n                this.$refs.chart1ref.hideSeries('series-3');\r\n            }\r\n            //this.$refs.chart1ref.toggleSeries('series-3');\r\n        },\r\n        \"dataLabels\"(val){\r\n            if(val){\r\n                this.$refs.chart1ref.updateOptions({\r\n                    dataLabels:{\r\n                        enabled:true\r\n                    }\r\n                })\r\n            }\r\n            else{\r\n                this.$refs.chart1ref.updateOptions({\r\n                    dataLabels:{\r\n                        enabled:false\r\n                    }\r\n                })\r\n            }\r\n            //console.log(this.chartOptions.dataLabels)\r\n        }\r\n    }\r\n};\r\n</script>","import mod from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./chartTest.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./chartTest.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./chartTest.vue?vue&type=template&id=a25d7916&\"\nimport script from \"./chartTest.vue?vue&type=script&lang=js&\"\nexport * from \"./chartTest.vue?vue&type=script&lang=js&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}