想实现这个样子
柱状图剩余的背景是透明度白色怎么弄 暂时没找到配置 先想想
<html>
<head>
<meta charset="utf-8">
<link rel="icon" href="https://jscdn.com.cn/highcharts/images/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://code.highcharts.com.cn/highcharts/highcharts.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/modules/exporting.js"></script>
<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
</head>
<style>
/* 隐藏掉标题和放大图标 */
.highcharts-exporting-group,.highcharts-legend-item,.highcharts-title{
display: none;
}
#container{
margin-top: 50px;
}
#highcharts-h2m4xjq-0{
padding-top: 50px;
}
</style>
<body>
<!--
*************************************************************************
Generated by JShare at 2020-06-24 17:55:02
From: https://jshare.com.cn/demos/hhhhD8
*************************************************************************
-->
<div id="container" style="width:400px;height:400px"></div>
<script>
// 修改背景颜色为渐变色
var colors = ['rgba(94, 235, 240, 1)', 'rgba(78, 178, 255, 1)'];
Highcharts.getOptions().colors = Highcharts.map(colors, function (color) {
return {
linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
stops: [
[0, 'rgba(94, 235, 240, 1)'],
[1, 'rgba(78, 178, 255, 1)']
]
};
});
var chart = Highcharts.chart('container',{
chart: {
backgroundColor: '#2696467',//设计背景颜色
type: 'column'
},
title: {
text: '月平均降雨量'
},
subtitle: {
text: ''
},
credits: {
enabled: false//隐藏掉水印
},
xAxis: {
categories: [
'南山','罗湖','莲塘','盐田'
],
crosshair: true
},
yAxis: {
min: 0,
// title: {
// text: '降雨量 (mm)'
title: {
align: 'high',
offset: 0,
text: '(KM)',
rotation: 0,
y: -5
},
// },
gridLineDashStyle: 'ShortDash',//修改标示线为虚线
},
tooltip: {
// head + 每个 point + footer 拼接成完整的 table
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
borderWidth: 0,
pointWidth:25, //柱子宽度
}
},
// plotOptions: {
// series: {
// pointPadding: 0, //数据点之间的距离值
// groupPadding: 0, //分组之间的距离值
// borderWidth: 0,
// shadow: false,
// pointWidth:5 //柱子之间的距离值
// }
// }
series: [{
name: '柏林',
data: [42.4, 33.2, 34.5, 39.7]
}]
});
</script>
</body>
</html>`、
