参考
多坐标轴混合图 | JShare
使用 js资源
https://cdn.highcharts.com.cn/10.2.1/highcharts.js
https://cdn.highcharts.com.cn/10.2.1/modules/exporting.js
https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js
效果
js 引用
<script src="https://cdn.highcharts.com.cn/10.1.0/modules/exporting.js"></script> <script src="../static/js/echarts.min.js" th:src="@{/js/highcharjs/highcharts-10.1.0.js}"></script> <script src="../static/js/echarts.min.js" th:src="@{/js/highcharjs/highcharts-zh_CN.js}"></script><script src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
html
<div class="col-sm-12 select-table table-striped"> <div id="container" style="width: 100%;height:400px;"></div> </div>
js
x是x轴数据[2022-01-01 07:00:00,X,X,X)]
series 是y轴数组[
[10,9,91,7.8],
[10,9,91,7.8]
]
function char(x,series) { var chart = Highcharts.chart('container', { chart: { zoomType: 'xyy' }, title: { text: '铁水分包重量曲线' }, subtitle: { text: '' }, xAxis: [{ categories: x, // '1:00','2:00','3:00','4:00','5:00','6:00','7:00', '8:00', '9:00', '10:00', '11:00', '12:00','13:00', '14:00', '15:00', '16:00', crosshair: true }], plotOptions: { series: { stacking: 'normal' } }, yAxis: [ { // Secondary yAxis gridLineWidth: 0, title: { text: '实际出铁吨位', style: { color: Highcharts.getOptions().colors[0] } }, labels: { format: '{value} 吨', style: { color: Highcharts.getOptions().colors[0] } } }], tooltip: { shared: true }, legend: { layout: 'horizontal', align: 'left', x: 76, verticalAlign: 'top', y: 16, floating: true, backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF' }, series: series }); }