使用apexcharts组件的折线图(smooth的面积曲线)

1. 引入组件
   import VueApexCharts from 'vue-apexcharts'

2. 页面使用组件

       <template>
           <vue-apex-charts class="vx-col w-1/3"
                                   height=250
                                   type="area"
                                   :options="crudProfile.option"
                                   :series="crudProfile.series"/>
       </template>
   
       components: {
           VueApexCharts
       }
   

3. 数据格式

   crudProfile: {
       series: [],
       option: {}
   }
   

4. 初始化数据

       mounted () {
           this.drawCrudGraph(data) 
           /*
               data: 是传下来的折线图的series数据
               data的数据格式为：
               [
                   {
                       name: 'series1',
                       data: [31, 40, 28, 51, 42, 109, 100]
                   }, 
                   {
                       name: 'series2',
                       data: [11, 32, 45, 32, 34, 52, 41]
                   },
   			]
           */ 
       }
   

5. 给页面折线图赋值以及设置其option。可以参照官网：https://apexcharts.com/docs/installation/#

   methods: {
       drawCrudGraph (crudData) {
           this.getCrudOption()
           this.crudProfile.series = crudData
       },
       getCrudOption () {
           this.crudProfile.option = {
               title: { // 显示折现图的title
                   text: '总体性能（平均响应速度）',
                   fontSize: '12px'
               },
               dataLabels: {
                   enabled: false // 启用数据标签，即是否直接在图标上显示数据
               },
               chart: {
                   height: 250,
                   toolbar: { show: false }, // // 是否显示右上角默认图标
                   /*
                       属性见官网： https://apexcharts.com/docs/options/chart/toolbar/
                       如果想要自定义图表即对应的方法，则在customIcons: [] 设置。
                       比如：
                           customIcons: [{
                               icon: '<img src="" width="20">',
                               index: 4,
                               title: '按钮1',
                               class: 'custom-icon',
                               click: function(chart, options, e) {
                                   console.log("clicked custom-icon")
                               }
                           },
                           {
                               icon: '<img src="" width="20">',
                               index: 4,
                               title: '按钮2',
                               class: 'custom-icon',
                               click: function(chart, options, e) {
                                   console.log("clicked custom-icon")
                               }
                           }]
                   */
                   type: 'area' // 图表类型：line、area、bar、radar、pie等
               },
               <!-- plotOptions: {
                   bar: {
                       horizontal: true, // 展示为水平折线图
                       // columnWidth: '60%',
                   },
               }, -->
               grid: {
                   borderColor: '#cdcdcd', // 网格边框/线条的颜色
                   width: 1,
                   strokeDashArray: 2 // 在路径中创建虚线
               },
   
               stroke: {
                   curve: 'smooth', // 在折线图/面积图中，是绘制平滑线还是直线可用选项
                   width: [2, 2, 2]
               },
   
               legend: {
                   show: true,
                   position: 'top',
                   width: 'auto'
               },
   
               fill: {
               type: 'gradient',
               gradient: {
                   shadeIntensity: 0.9,
                   opacityFrom: 0.7,
                   opacityTo: 0.5,
                   stops: [0, 80, 100]
               }
               },
   
               xAxis: {
                   labels: {
                       style: {
                       cssClass: 'text-grey fill-current'
                       }
                   },
                   axisTicks: {
                       show: true
                   },
                   categories: [], // x轴显示的值
                   axisBorder: {
                       show: true
                   }
               },
   
               yAxis: {
                   tickAmount: 5
               },
   
               tooltip: {
                   x: { show: true }
               }
           }
       }
   }