使用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: '',
                               index: 4,
                               title: '按钮1',
                               class: 'custom-icon',
                               click: function(chart, options, e) {
                                   console.log("clicked custom-icon")
                               }
                           },
                           {
                               icon: '',
                               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 }
               }
           }
       }
   }