ApexCharts使用示例 - 颜色渐变的条形图

最新推荐文章于 2024-03-26 09:44:31 发布

是阿洋啊

最新推荐文章于 2024-03-26 09:44:31 发布

阅读量1.7k

点赞数

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

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

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

ApexCharts使用示例 – 颜色渐变的条形图

一、引入apexcharts.js

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

二、HTML代码

<html>
	<head>
	    <title>ApexCharts测试样例-Scatter</title>
	    <style>
	        #chart {
	            max-width: 1000px; 
	            margin: 50 auto;
	        }
	    </style>
	</head>
	<body >
	    <div id="chart">
	    </div>
	</body>
</html>

三、JavaScript代码

<script>
    var options = {
        series: [{
            name: '666',
            data: [71, 70, 82, 93, 139, 88, 76, 80,93,73]
        }
        ],
        chart: {
            type: 'bar', //图表类型，bar为柱状图
            height: 350
        },
        plotOptions: {
            bar: {
                horizontal: true,
                //columnWidth: '60%',
            },
        },
        dataLabels: {
            enabled: false //启用数据标签，即是否直接在图标上显示数据
        },
        xaxis: {
            title: {
                text: '天数',
                align:"right"
            },
            labels: {
                style: {
                    colors: ['#abcdef']
                },               
            },
        },
        yaxis: {
            type:'category',
            axisTicks: {
              show: true,
              width: 1,
            }
        },
        //设置Y轴的内容
        labels: ["a","s","d","f","g","h","j","k","l","z"],
        // 设置填充颜色
        fill: {
            colors:["#0079FB"],
            type: 'gradient', // 梯度
            gradient: {
                type: 'horizontal', // 水平方向的梯度
                gradientToColors: ['#00C3DF'], // 渐变结束的颜色
                opacityFrom: 1, // 透明度
                opacityTo: 1,
                stops:[0,120]
            }
        },        
        tooltip: {
            x:{
                format:"yyyy年MM月"
            },
            y: {
                formatter: function (val) {
                    return val + " 人"
                }
            }
        }
    };

    var chart = new ApexCharts(document.querySelector("#chart"), options);
    chart.render();
</script>

四、效果

在这里插入图片描述
参考：ApexCharts官网

是阿洋啊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ApexCharts使用示例 - 颜色渐变的条形图

ApexCharts使用示例 – 颜色渐变的条形图一、引入apexcharts.js<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>二、HTML代码<html> <head> <title>ApexCharts测试样例-Scatter&lt...
复制链接

扫一扫