ApexCharts使用示例 -- 折线图&柱状图混合

最新推荐文章于 2024-05-30 11:27:58 发布

是阿洋啊

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量2.6k

点赞数

分类专栏：前端文章标签： javascript 数据可视化

本文链接：https://blog.csdn.net/semian7633/article/details/104613476

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

ApexCharts使用示例 – 折线图&柱状图混合

一、引入apexcharts.js

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

二、HTML代码

<html>
    <head>
        <title>ApexCharts测试样例</title>
        <style>
            #chart {
            margin: 50 auto;
          }
        </style>
    </head>
    <body bgcolor="#000000">
        <div id="chart">
        </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
</html>

三、JavaScript代码

 var options = {
    chart: {
        height: 600,
        type: "line",
        stacked: true,
        toolbar: {
            show: true,
            tools: { // 自定义是否启用图表右上角工具
                reset: true,
                download: false,
                selection: false,
                zoom: true,
                zoomin: false,
                zoomout: false,
                pan: false,
            }
        },
        animations: { // 设置图表数据加载动画
            enabled: true,
            easing: 'linear',
            speed: 1000, // 动画加载速度
            animateGradually: {
                enabled: true,
                delay: 300
            },
            dynamicAnimation: {
                enabled: true,
                speed: 500
            }
        },
        background: '#FFFFFF',
    },
    subtitle:{
        text:"人数",
        offsetX:10,
    },
    title:{
        text:"井下实时人员变化趋势",
        align:"center",
        style:{
            fontSize:24, // 设置图表标题文字的大小
        }
    },
    stroke: { 
        show: true,
        width: [5, 5,5],
        curve: ['smooth','smooth','smooth'],
    },
    plotOptions: {
        bar: { // 设置bar的样式
            columnWidth: "80%",
            horizontal:false,
            endingShape:"flat",
            distributed:false,
        }
    },
    colors: ["#EEAD0E", "#63B8FF", "#000000"], // 设置柱状图和折线的颜色，这里是按照series里的顺序设置
    series: [
        {
            name: "入井",
            type: "column",
            data: [100, 41, 22, 37, 93, 22, 37, 21, 44, 122, 20,100, 41, 22, 37, 93, 22, 37, 21, 44, 122, 20]
        },
        {
            name: "升井",
            type: "column",
            data: [-44, -95, -41, -87, -22, -43, -50, -91, -56, -27, -43,-44, -95, -41, -87, -22, -43, -50, -91, -56, -27, -43]
        },
        {
            name: "井下总人数",
            type: "line",
            data: [190, 241, 122, 237, 293, 122, 137, 291, 244, 222, 220,190, 241, 122, 237, 293, 122, 137, 291, 244, 222, 220]
        },
    ],
    // X轴的数据
    labels: [ 
    		  "01-01-2003", "02-01-2003","2003-03-01 16:22:30","2003-04-01 16:22:30",
    		  "05-01-2003","06-01-2003","07-01-2003","08-01-2003","09-01-2003","10-01-2003",
        	  "11-01-2003","12-01-2003","01-01-2004","2004-02-01 16:22:30","2004-03-01 16:22:30",
        	  "04-01-2004","05-01-2004","06-01-2004","07-01-2004","08-01-2004","9-01-2004","10-01-2004"
        	],
    markers: {
        size: 5, // 折线图每个点的大小
    },
    xaxis: {
        type: "datetime", // X轴的类型
        dateTimeFomatter: {},
        labels: { // X轴的格式
            format: "yyyy-MM-dd",
        }
    },
    yaxis: [
        {
            labels: {
                rotate: -60,
                formatter: function (y) {
                    if (y.toFixed(0) < 0) {
                        return -y.toFixed(0) + "人";
                    } else {
                        return y.toFixed(0) + "人";
                    }

                }
            },
            tooltip: {
                enabled: true
            }
        },
    ],
    tooltip: {
        //enabled:false,
        shared: true,
        intersect: false,
        x: {
            format: "yyyy-MM-dd"
        },
        y: [
            {
                formatter: function (y) {
                    if (typeof y !== "undefined") {
                        if (y.toFixed(0) < 0) {
                            return -y.toFixed(0) + "人";
                        } else {
                            return y.toFixed(0) + "人";
                        }
                    }
                    return y;
                }
            },
            {
                formatter: function (y) {
                    if (typeof y !== "undefined") {
                        if (y.toFixed(0) < 0) {
                            return -y.toFixed(0) + "人";
                        } else {
                            return y.toFixed(0) + "人";
                        }
                    }
                    return y;
                }
            }
        ]
    }
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

四、效果

在这里插入图片描述
数据标签的效果：

是阿洋啊

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
5
评论
ApexCharts使用示例 -- 折线图&柱状图混合

ApexCharts使用示例 – 折线图&柱状图混合一、引入apexcharts.js <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script> 或 <script src="../apexcharts.js"></script>二、HTML代码<htm...
复制链接

扫一扫