ApexCharts在vue下範例——線條

透過整合其針對Vue的包裝套件vue-apexcharts來輕鬆地將ApexCharts與我們的Vue應用程式一起使用。

如何在vue.js中新增配置apexcharts請參考在VUE中使用ApexCharts

程式碼內容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<template>
  <div id="chart">
    <apexchart
      type="line" height="350" :options="chartOptions" :series="series"
    ></apexchart>
  </div>
</template>

<script>
export default {<!-- -->
  name: "lineTest",
  computed: {<!-- -->},
  methods: {<!-- -->},
  data() {<!-- -->
    return {<!-- -->
      //資料集(資料名稱，資料點)
      series: [
        {<!-- -->
          name: "Desktops",
          data: [10, 41, 35, 51, 49, 62, 69, 91, 148],
        },
      ],
      //圖表格式
       chartOptions: {<!-- -->
            chart: {<!-- -->        //資料表的高度、型別（線條）、是否支援縮放
              height: 350,
              type: 'line',
              zoom: {<!-- -->
                enabled: false
              }
            },
            dataLabels: {<!-- -->
              enabled: false //線上條上顯示資料值
            },
            stroke: {<!-- -->    //線條型別
              curve: 'straight'
            },
            title: {<!-- -->    //標題內容以及對齊方式
              text: 'Product Trends by Month',
              align: 'left'
            },
            grid: {<!-- -->    //圖表背景樣式及顏色
              row: {<!-- -->
                colors: ['#f3f3f3', 'transparent'],
                opacity: 0.5
              },
            },
            xaxis: {<!-- -->    //x軸坐標顯示
              categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
            }
          },
    };
  },
};
</script>

<style scoped>
/*圖表的寬度設定，如果沒有設定則圖表將鋪滿整個螢幕*/
     #chart {<!-- -->
      max-width: 650px;
      margin: 35px auto;
    }
</style>
使用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<template>
  <div>
     <LineTest />
  </div>
</template>

<script>
import LineTest from "@/components/my_comp/apexchart_test/line";

export default {<!-- -->
  name: "alarm",
  components: {<!-- --> LineTest },
  data() {<!-- -->
    return {<!-- -->};
  },
  computed: {<!-- -->},
  methods: {<!-- -->},
  data() {<!-- -->
    return {<!-- -->};
  },
};
</script>

<style scoped>
</style>
影象效果

其它引數效果
1
2
3
4
5
6
7
8
9
 //圖表格式
       chartOptions: {<!-- -->
            chart: {<!-- -->        //
              height: 350,
              type: 'line',
              zoom: {<!-- -->
                enabled: true  //新增了右上角的縮放及移動
              }
            },

1
2
3
4
5
6
7
8
9
10
11
 chartOptions: {<!-- -->
            chart: {<!-- -->        //資料表的高度、型別（線條）、是否支援縮放
              height: 350,
              type: 'line',
              zoom: {<!-- -->
                enabled: false
              }
            },
            dataLabels: {<!-- -->
              enabled: true//線上條上顯示資料值
            },