引入组件 import VueApexCharts from 'vue-apexcharts'
页面使用组件
<template> <vue-apex-charts class="vx-col w-1/3" height=250 type="area" :options="crudProfile.option" :series="crudProfile.series"/> </template> components: { VueApexCharts }数据格式
crudProfile: { series: [], option: {} }初始化数据
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] }, ] */ }给页面折线图赋值以及设置其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 } } } } }