1、我的配置文件代码:
var chart = Highcharts.chart('warningCharts', {chart: {type: 'line',},style: {fontSize: '12px',color: '#006cee',padding: '10rpx',},title: {text: null,},subtitle: {text: null,},series: data,xAxis: {type: 'datetime',dateTimeLabelFormats: {day: '%m-%d',},},yAxis: {allowDecimals: false,title: {text: null,},},credits: { enabled: false },legend: {enabled: false,layout: 'vertical', // 垂直布局align: 'right', // 靠右verticalAlign: 'top', // 顶部},plotOptions: {series: {label: {connectorAllowed: false,},allowPointSelect: true,point: {events: {select: function (e) {self.getOrders(e.target.name)},},},},},tooltip: {borderRadius: 10, // 边框圆角shadow: true, // 是否显示阴影animation: true, // 是否启用动画效果style: {// 文字内容相关样式color: '#498bf8',fontSize: '12px',fontFamily: 'Courir new',},pointFormatter: function () {return '<b>' + this.y + '次' + '</b><br/>'},formatter: function () {return Highcharts.dateFormat('%Y-%m-%d', this.x) + '<br/>工单数:' + this.y},},responsive: {rules: [{condition: {maxWidth: 500,},chartOptions: {legend: {layout: 'horizontal',align: 'center',verticalAlign: 'bottom',},},},],},})chart.reflow()
其中数据为:
[{"name":"事件1","data":[{"x":1592582400000,"y":4},{"x":1592668800000,"y":4},{"x":1592928000000,"y":4},{"x":1593187200000,"y":5}]},{"name":"事件2","data":[{"x":1592582400000,"y":6},{"x":1592755200000,"y":4},{"x":1592841600000,"y":12},{"x":1593187200000,"y":4}]}]
效果截图: