Line chart using apexcharts component (area curve of smooth)

Import components
import VueApexCharts from 'vue-apexcharts'

The page uses components

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

    components: {
        VueApexCharts
    }

data format

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

Initialization data

    mounted () {
      
        this.drawCrudGraph(data) 
        /* data:  It's a line chart handed down series data  data The data format of is ： [ { name: 'series1', data: [31, 40, 28, 51, 42, 109, 100] }, { name: 'series2', data: [11, 32, 45, 32, 34, 52, 41] }, ] */ 
    }

Assign values to the page line chart and set its option. You can refer to the official website ：https://apexcharts.com/docs/installation/#

methods: {
      
    drawCrudGraph (crudData) {
      
        this.getCrudOption()
        this.crudProfile.series = crudData
    },
    getCrudOption () {
      
        this.crudProfile.option = {
      
            title: {
       //  Displays the of the discount chart title
                text: ' Overall performance （ Average response speed ）',
                fontSize: '12px'
            },
            dataLabels: {
      
                enabled: false //  Enable data labels , That is, whether to display data directly on the icon 
            },
            chart: {
      
                height: 250,
                toolbar: {
       show: false }, // //  Whether to display the default icon in the upper right corner 
                /*  See the official website for properties ： https://apexcharts.com/docs/options/chart/toolbar/  If you want to customize the chart, that is, the corresponding method , It's in customIcons: []  Set up .  such as ： customIcons: [{ icon: '<img src="" width="20">', index: 4, title: ' Button 1', class: 'custom-icon', click: function(chart, options, e) { console.log("clicked custom-icon") } }, { icon: '<img src="" width="20">', index: 4, title: ' Button 2', class: 'custom-icon', click: function(chart, options, e) { console.log("clicked custom-icon") } }] */
                type: 'area' //  Chart type ：line、area、bar、radar、pie etc. 
            },
            <!-- plotOptions: {
      
                bar: {
      
                    horizontal: true, //  Displayed as a horizontal line chart 
                    // columnWidth: '60%',
                },
            }, -->
            grid: {
      
                borderColor: '#cdcdcd', //  Grid border / The color of the line 
                width: 1,
                strokeDashArray: 2 //  Create dashed lines in the path 
            },

            stroke: {
      
                curve: 'smooth', //  In the line chart / In area map , Whether to draw a smooth line or a straight line... Options are available 
                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 The value displayed on the axis 
                axisBorder: {
      
                    show: true
                }
            },

            yAxis: {
      
                tickAmount: 5
            },

            tooltip: {
      
                x: {
       show: true }
            }
        }
    }
}