Differences

This shows you the differences between two versions of the page.

--- development:javascript:vue:charts [2021/07/07 14:39]
kalenpw removed
+++ — (current)
@@ Line 1: / Line 1: @@
-====== Charts ======
-----
-===== Apex Charts =====
-** Installation ** \\
-<code bash>
-npm install --save apexcharts
-npm install --save vue3-apexcharts
-</code>
-In ''main.js''
-<code javascript>
-import VueApexCharts from "vue3-apexcharts";
-createApp(App).use(VueApexCharts).mount('#app')
-</code>
-----
-** Example **
-<code javascript>
-<template>
-  <div>
-    <apexchart
-      width="500"
-      type="bar"
-      :options="options"
-      :series="series"
-    ></apexchart>
-  </div>
-</template>
-<script>
-export default {
-  name: "HelloWorld",
-  data: function () {
-    return {
-      options: {
-        chart: {
-          id: "vuechart-example",
-        },
-        xaxis: {
-          type: "datetime",
-        },
-        title: {
-          text: "Title",
-          align: "left",
-        },
-      },
-      series: [
-        {
-          name: "series-1",
-          data: [
-            [1327532400000, 31.18],
-            [1327618800000, 31.05],
-            [1327964400000, 30.95],
-            [1328223600000, 31.85],
-            [1328569200000, 32.28],
-            [1328742000000, 32.65],
-            [1330383600000, 33.27],
-          ],
-        },
-      ],
-    };
-  },
-};
-</script>
-</code>