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官网