Layui中使用ApexCharts

ApexCharts简介

github地址

https://github.com/apexcharts/apexcharts.js

Download and Installation

Installing via npm

npm install apexcharts --save

Direct < script > include

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

Usage

import ApexCharts from 'apexcharts'

To create a basic bar chart with minimal configurations, write as follows:

var options = {
  chart: {
    type: 'bar'
  },
  series: [
    {
      name: 'sales',
      data: [30, 40, 35, 50, 49, 60, 70, 91, 125]
    }
  ],
  xaxis: {
    categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999]
  }
}

var chart = new ApexCharts(document.querySelector('#chart'), options)
chart.render()

This will render the following chart

Layui中使用ApexCharts

下载apexcharts.min.js文件，位置

在代码中使用

<script data-th-inline="javascript" type="text/javascript">
	layui.use(['apexcharts', 'febs', 'jquery', 'util'], function () {
		
		 var options = {
                chart: {
                    height: 350,
                    type: 'area',
                    toolbar: {
                        show: false
                    }
                },
                colors: ['#1890ff', '#0acf97'],
                plotOptions: {
                    bar: {
                        horizontal: false,
                        columnWidth: '32rem'
                    }
                },
                dataLabels: {
                    enabled: false
                },
                stroke: {
                    width: [3, 3],
                    curve: 'smooth'
                },
                series: [{
                    name: '总数',
                    data: totalVisitCount
                }, {
                    name: '您',
                    data: yourVisitCount
                }],
                xaxis: {
                    categories: lastTenDays,
                    axisTicks: {
                        show: true
                    },
                    axisBorder: {
                        show: true,
                        color: '#f1f1f1'
                    }
                },
                fill: {
                    type: 'gradient',
                    gradient: {
                        shadeIntensity: 1,
                        inverseColors: false,
                        opacityFrom: 0.5,
                        opacityTo: 0,
                        stops: [0, 90, 100]
                    }
                },
                title: {
                    text: '近10天系统访问记录',
                    align: 'left',
                    style: {
                        color: 'rgba(0, 0, 0, .65)'
                    }
                },
                tooltip: {
                    y: {
                        formatter: function (val) {
                            return "访问次数 " + val + " 次"
                        }
                    }
                },
                grid: {
                    row: {
                        colors: ['transparent', 'transparent'],
                        opacity: 0.2
                    },
                    borderColor: '#f1f1f1'
                }
            };

            new ApexCharts(
                document.querySelector("#chart"),
                options
            ).render();


	})
</script>