ApexCharts使用示例 -- 柱状图

最新推荐文章于 2025-05-30 09:00:03 发布

是阿洋啊

最新推荐文章于 2025-05-30 09:00:03 发布

阅读量1w

点赞数 3

CC 4.0 BY-SA版权

分类专栏：前端文章标签： javascript

本文链接：https://blog.youkuaiyun.com/semian7633/article/details/104571569

前端专栏收录该内容

8 篇文章

订阅专栏

ApexCharts使用示例 – 柱状图

一、引入apexcharts.js

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

二、HTML代码

<html>
    <head>
        <title>ApexCharts测试样例-Scatter</title>
        <style>
            #chart1 {
            max-width: 500px; 
            margin: 50 auto;
          }
        </style>
    </head>
    <body >
        <div id="chart1">
        </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
</html>

三、JavaScript代码

 var options = {
        /*
          series数据格式；
          series:[{name,data:[]}],
        */
          series: [{
          name: '出勤天数',
          data: [21, 20, 12, 23, 19, 28, 26, 20]
        }],
          chart: {
          type: 'bar', //图表类型，bar为柱状图
          height: 350,
          events: { // 添加柱状图数据的点击事件
            dataPointSelection: function (event, chartContext, config) {
	            	console.log(event);
	            	console.log(chartContext);
	                console.log(config);
					alert(config.w.config.labels[config.seriesIndex] + " " +
					 config.w.config.series[config.seriesIndex].name + " " +
					 config.w.config.series[config.seriesIndex].data[config.dataPointIndex]);
	            }
        	}
        },
        plotOptions: {
          bar: {
            horizontal: false, // 是否启用水平方式显示
            columnWidth: '55%', // 设置柱状图单个的宽度
          },
        },
        dataLabels: {
          enabled: true //启用数据标签，即是否直接在图标上显示数据
        },
        xaxis: {
          type:'datetime', //设置X轴的类型 三种可选：category、datetime、numeric
          labels:{
            format:"yyyy-MM" //设置X轴时间格式
          }
        },
        yaxis: {
          title: {
            text: '出勤天数'
          }
        },
        //设置X轴的时间
        labels:[
          '2018-12','2019-01','2019-02',
          '2019-03', '2019-04', '2019-05', '2019-06', '2019-07'
        ],

        fill: {
          opacity: 1 //设置图形的透明度，数值越小透明度越高，数值范围0-1
        },
        tooltip: {
          x:{
            format:"yyyy年MM月"
          },
          y: {
            formatter: function (val) {
              return val + " 天"
            }
          }
        }
        };
        var chart = new ApexCharts(document.querySelector("#chart"), options);
        chart.render();