一、认识highCharts
一张图认识highCharts
二、highCharts的常用配置
知识点：
1.chart图表属性的常用配置
type:'area',//指定图表的类型,这里是面积图
// typeDescription:'这是一个百分比面积图',//不显示供开发者使用
borderWidth:2,//边框线宽度
borderColor: 'red',//图表边框的颜色。 默认是：#335cad.
borderRadius:5,//边框圆角
backgroundColor:'#F8F8F8',//图表外部的背景颜色或者是一个渐变颜色的配置
spacing: [20,20,20,20],//图表的内边距 spacing: Array<Number> 默认是：[10, 10, 15, 10]
shadow:{//整个图表的阴影。设置阴影效果需要设置背景颜色，从 2.3 之后，可以设置成包含 color，offsetX，offsetY，opacity 和 width 属性的对象形式。 默认是：false.
color: 'red',
offsetX:2,
offsetY:2,
width:5,
},
showAxes:true,//是否在初始化的时候显示坐标轴， 仅适用于初始化时数据列为空的（动态添加数据列）图表，因为在笛卡尔数据列中，坐标轴会自动添加到图表中（无论有没有数据）。 默认是：false.
plotBackgroundColor:'#fff',//图表绘图区
plotBorderWidth: 1,
plotBorderColor :'#dfdfdf',
plotShadow:{//是否给绘图区增加阴影效果，如果开启阴影效果，需要设置 plotBackgroundColor。 从2.3开始，投影可以配置成包含 color, offsetX, offsetY, opacity 和 width 属性的对象。 默认是：false.
color: 'red',
offsetX:-2,
offsetY:-2,
width:5,
},
style:{//图标样式,用于设置整个图表
"fontFamily":"\"Lucida Grande\", \"Lucida Sans Unicode\", Verdana, Arial, Helvetica, sans-serif",
"fontSize":"20px",
},
inverted:false,//设置是否反转坐标轴，使X轴垂直，Y轴水平;即xy轴进行反转。默认是：false.
// 后面三个不常用，使用的话建议一起使用
zoomType: 'x',//决定用户可以用鼠标缩放的维度
panning: true,//允许在图表中平移。 最好使用 panKey 来组合使用缩放和平移。默认是：false.
panKey: 'shift',//设定平移按键。按住设定的按键时鼠标滑动是对图表进行平移操作。（默认是缩放操作，通过此按键可以实现在缩放和平移之间的切换）
},2.title图表标题属性的常用配置
text:'<a href="https://www.hcharts.cn/docs/basic-title">我是标题</a>',//当不需要标题时text:null;
widthAdjust:-200,//调整标题宽度
useHTML:false,//虽然这里设置了false，但点击标题还是可以跳转;若是true的话会出现一个默认的a标签样式
align:'left',//图表标题水平对齐方式。 可选的值有 “left”，”center” 和 “right”。 默认是：center.
floating:true,//如果设置为浮动，标题将不占用图表区的位置 默认是：false.设置浮动之后同x/y使用可以设置浮动到哪个位置上
x: 150,//标题相对于水平对齐的偏移量，取值范围为：图表左边距到图表右边距，可以是负值，单位px。 默认是：0.
y: 100,//标题相对于垂直对齐的偏移量
style: {//style属性只能用来设置标题的文字样式，可以设置文字颜色、字体、字号
color: 'hotpink',
fontSize: '18px',
fontFamily: ''
},3.subtitle图表副标题属性的常用配置（同title）
text:'我是副标题href="https://www.hcharts.cn/docs/basic-titlehref="https://www.hcharts.cn/docs/basic-titlehref="',
widthAdjust:-800,//调整标题宽度,对于text内容多的比较明显
align:'left',
verticalAlign: 'middle' ,//标题垂直对齐方式。可选值有"top"、"middle"和 "bottom"。可选“top”，”middle“和“bottom”。当给定一个值后，该标题将表现为浮动，效果等同于floating设置为 true。
x:100,
y:20,//这个时候你会发现没有浮动的垂直偏移并没有什么效果4.credits版权信息属性的常用配置
// enabled:false,//是否显示版权信息
text: 'www.hcharts.cn', // 显示的文字
href: 'http://www.hcharts.cn', // 链接地址
position: { // 位置设置
align: 'left',
x: 400,
verticalAlign: 'bottom',
y: -100
},
style: { // 样式设置
cursor: 'pointer',
color: 'red',
fontSize: '30px'
}5.colors数据构成的颜色图属性的常用配置
（就是一个数组会自动的对应series中的每个数据对象）
colors: ['rgba(86,199,99,1)','rgba(226,188,37,1)','rgba(255,133,133,1)'],6.xAxis x坐标轴属性的常用配置
title:{//横坐标标题
text:''
},
//x坐标轴的刻度值 若没有此属性x轴的刻度将从0开始
categories: [0,5,10,15,20,25,30,35,40,45,50], //指定x轴坐标点的值
reversed: true,//是否反转图表，反转后从原点开始值越小（即坐标轴刻度是从大到小）。
showEmpty: true,//当坐标轴没有数据时，是否显示坐标轴（包括轴线及坐标轴标题）。 默认是：true.
lineColor: 'red',//坐标轴的颜色
lineWidth: 1,//坐标轴线的宽度
// lineTo:1,//关联
opposite: false,//是否对面显示 默认false
// tickAmount: 5,//规定坐标轴上的刻度总数， 一般是用于在多轴或多表盘（仪表图）中对齐刻度，另外该配置会覆盖 tickPixelInterval 参数
tickWidth:1,//坐标轴上刻度线的长度(值为0的话就不会显示刻度线)
tickLength: 20,//坐标轴上刻度线的长度(值为0的话就不会显示刻度线)
tickColor: 'pink',//坐标轴上的刻度线的颜色
tickmarkPlacement: 'on',//刻度线对齐方式，有between和on可选，默认是between
tickPosition: 'outside',//刻度线相对于轴线的位置，可用的值有 inside 和 outside，分别表示在轴线的内部和外部。 默认是：outside.
tickPixInterval: 5,//刻度间隔
offset:10,//坐标轴距离绘图区的像素值（以轴线为基准）。该参数将会将整个坐标轴进行偏移 默认0
gridLineWidth:1,//网格线宽度。x轴默认为0，y轴默认为1px。
// gridLineDashStyle: 'Dash',//网格线线条样式。和Css border-style类似，常用的有：Solid、Dot、Dash
gridZIndex: 4,//网格线的层叠值（zIndex） 默认是：1.
gridLineColor:'#f2f2f2',//网格线颜色。默认为：#C0C0C0。
alternateGridColor: '#FDFFD5',//间隔网格背景,相当于是隔行换色
labels: {//坐标轴上的刻度值（显示间隔、样式、单位）
// enabled:true,//是否启用Labels。x，y轴默认值都是true
format:'{value} km',//格式化字符串，实质可以对坐标轴的每个刻度添加单位
step: 1,//坐标刻度之间间隔几个刻度显示一个数据（默认1）
style: {
color: 'red',
fontSize:12,
},
align: 'center',//刻度值对应刻度值的位置
},
crosshair:{//鼠标放上后显示纵轴的数据(十字准星)x轴的十字准星垂直于x轴
color:'#999',
width: 3,
zIndex: 4,//准星线的层叠值，增大层叠值可以让准星线显示在数据里或网格线的上方。 默认是：2.
// snop:false,//是否与最近的点对齐，为 true 时十字准星线会自动的对齐到最近的点，为 false 则是当前鼠标的位置。 默认是：true.
},
plotLines:[{//标示线是用来标记坐标轴上特殊值的一条直线，在绘图区内绘制一条自定义的线。标示线总是垂直于它属于的轴。
value:2, //定义在哪个值上显示标示线，这里是在x轴上刻度为2的值处垂直化一条线
width:2, //标示线的宽度，2px
color:'red', //线的颜色，定义为红色
dashStyle:'longdashdot',//标示线的样式，默认是solid（实线），这里定义为长虚线
label: {//标示线上的标签
text:'我是一天x轴的vlaue=2的标示线',
align: 'top',
rotation: 60,
y:10,
style: {
color:'blue'
}
}
}],
plotBands:[{//标示带同标示线，只不过标示的内容为一段范围。
from: 3, // 标示带开始值
to: 5, // 标示带结束值
label: { // 标示带文字标签配置，详见API
text: '我是一块表示带',
align: 'center',
y:50,
style: {
color: '#fff',
fontSize: 25,
}
},
color: '#d9d9', // 标示带背景颜色
borderWidth: 2, // 标示带边框宽度
borderColor: "red", // 标示带边框颜色
// id: , // 标示带 id，用于删除等操作
// zIndex:, // 标示带层叠，用于调整显示层次
events: { // 事件，支持 click、mouseover、mouseout、mousemove等事件
click: function(e) {
console.log('click')
},
mouseover: function(e) {
console.log('mouseover')
},
mouseout: function(e) {
console.log('mouseout')
},
mousemove: function(e) {
console.log('mousemove')
}
}
}]7.yAxis y轴坐标轴的常用配置
tickPositions: [0.00, 25.02, 50, 75, 100],//指定y轴坐标点的值
min: 0,
startOnTick: false,
// gridLineWidth: 1,
gridLineColor:'#f2f2f2',
tickLength:0,
tickInterval: 0,
tickmarkPlacement: 'on',
lineWidth: 0,
tickWidth:0,
title: {//纵坐标标题
text: ' Usage（%）',
margin:0,
style: {
color: '#999999',
fontSize:12
}
},
labels:{//坐标轴上刻度的样式及单位
style: {
color: '#999999',
fontSize:12
},
},
// offset:-10,//距离坐标轴的距离
},{//{轴二}
tickPositions: [0.00, 25.02, 50, 75, 100],//指定y轴坐标点的值
min: 0,
startOnTick: false,
// gridLineWidth: 1,
gridLineColor:'#f2f2f2',
tickLength:0,
tickInterval: 0,
tickmarkPlacement: 'on',
lineWidth: 0,
tickWidth:0,
title: {//纵坐标标题
text: ' Usage（℃）',
margin:0,
style: {
color: '#999999',
fontSize:12
}
},
labels:{//坐标轴上刻度的样式及单位
style: {
color: '#999999',
fontSize:12
},
},
opposite:true,//y轴是多轴的时候一定要设置这个
}],8.tooltip数据提示框常用配置
enabled:true,//是否启用数据点提示框。 默认是：true
shared: true,//当提示框被共享时，整个绘图区都将捕捉鼠标指针的移动。提示框文本显示有序数据（不包括饼图，散点图和标志图等）的系列类型将被显示在同一个提示框中。
formatter : function() {//提示框内容格式化回调函数，返回 false 可以针对某个点或数据列关闭提示框，该函数里可以执行复杂的逻辑来返回需要的内容。
var content = '';
for (var i = 0; i < this.points.length; i++) {
if(i == this.points.length-1){
content += '<span style="font-size: 10px; color: ' + this.points[i].series.color + '">' + this.points[i].series.name + '</span>: ' + this.points[i].y +'℃'+'<br/>';
}else{
content += '<span style="font-size: 10px; color: ' + this.points[i].series.color + '">' + this.points[i].series.name + '</span>: ' + this.points[i].y +'%'+'<br/>';
}
};
var date = new Date();
var nowYear=date.getFullYear().toString();
var nowMonth=(date.getMonth() + 1).toString();
var nowDay=date.getDate().toString();
var nowHours=date.getHours().toString();
var nowMin=date.getMinutes().toString();
var nowSeconds=date.getSeconds().toString();
function timeAdd0(str) {
if(str.length<=1){
str='0'+str;
}
return str
}
nowYear=timeAdd0(nowYear) ;
nowMonth=timeAdd0(nowMonth) ;
nowDay=timeAdd0(nowDay) ;
nowHours=timeAdd0(nowHours) ;
nowMin=timeAdd0(nowMin);
nowSeconds=timeAdd0(nowSeconds)
content = '<span>' + nowYear + '/' + nowMonth + '/' + nowDay + ' ' + nowHours + ':' + nowMin + ':' + nowSeconds + ' year' + '</span><br/>' +content;
return content;
},
// headerFormat: '<small>{point.key}</small><br/>',//标题格式
// pointFormat: '<span style="color:{series.color};">{series.name}</span>：{point.y}<br/>',
followPointer:true,//跟随鼠标
followPointerMove:true,//是否跟随手指移动
// backgroundColor:'red',//提示宽度背景色
borderColor: 'red',//提示框的边框色
style:{
fontSize:12,
fontFamily:'微软雅黑',
fontWeight:'normal',
color:'#666'
}9.plotOptions数据列配置是针对所有数据列及某种数据列有效的通用配置
area: {
pointStart: 0,//数据起点
allowPointSelect: true,//是否允许选中点
fillOpacity:0.2,
lineWidth:1,
marker: {
enabled: true,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
},
}10.legend图例常用配置
align: 'center',//整个图例居中显示在图表下方
symbolRadius:5,//图标圆角
symbolWidth:10,//图标宽度
symbolHeight:10,//图标高度
itemStyle: {
color: '#999999',
fontWeight:'normal',
fontSize:12,
},
itemMarginBottom: -14,//图例项底部外边距11.series数据列是一组数据集合
[{
name: 'CPU',//name 代表区分xAxis数据的，并且会显示在数据提示框（Tooltip）及图例（Legend）中
data: [
5, 6, 10, 20, 50, 45, 30,12
],
tooltip: {
valueSuffix:'%'
}
}, {
name: 'Memory',
data:[
16, 17, 18, 18, 30, 26, 25,67
],
tooltip: {
valueSuffix:'%'
}
},{
name: '温度',
data:[
16, 17, 18, 18, 30, 26, 25,67
],
tooltip: {
valueSuffix:'℃'
},
yAxis:1,//对应的那个轴
}]三、highCharts基本学习（代码）
<div id="stats_echarts" style="min-width:400px;height:400px"></div>var test_chart = Highcharts.chart('stats_echarts', {
chart: {//图表
type:'area',//指定图表的类型,这里是面积图
// typeDescription:'这是一个百分比面积图',//不显示供开发者使用
borderWidth:2,//边框线宽度
borderColor: 'red',//图表边框的颜色。 默认是：#335cad.
borderRadius:5,//边框圆角
backgroundColor:'#F8F8F8',//图表外部的背景颜色或者是一个渐变颜色的配置
spacing: [20,20,20,20],//图表的内边距 spacing: Array<Number> 默认是：[10, 10, 15, 10]
shadow:{//整个图表的阴影。设置阴影效果需要设置背景颜色，从 2.3 之后，可以设置成包含 color，offsetX，offsetY，opacity 和 width 属性的对象形式。 默认是：false.
color: 'red',
offsetX:2,
offsetY:2,
width:5,
},
showAxes:true,//是否在初始化的时候显示坐标轴， 仅适用于初始化时数据列为空的（动态添加数据列）图表，因为在笛卡尔数据列中，坐标轴会自动添加到图表中（无论有没有数据）。 默认是：false.
plotBackgroundColor:'#fff',//图表绘图区
plotBorderWidth: 1,
plotBorderColor :'#dfdfdf',
plotShadow:{//是否给绘图区增加阴影效果，如果开启阴影效果，需要设置 plotBackgroundColor。 从2.3开始，投影可以配置成包含 color, offsetX, offsetY, opacity 和 width 属性的对象。 默认是：false.
color: 'red',
offsetX:-2,
offsetY:-2,
width:5,
},
style:{//图标样式,用于设置整个图表
"fontFamily":"\"Lucida Grande\", \"Lucida Sans Unicode\", Verdana, Arial, Helvetica, sans-serif",
"fontSize":"20px",
},
inverted:false,//设置是否反转坐标轴，使X轴垂直，Y轴水平;即xy轴进行反转。默认是：false.
// 后面三个不常用，使用的话建议一起使用
zoomType: 'x',//决定用户可以用鼠标缩放的维度
panning: true,//允许在图表中平移。 最好使用 panKey 来组合使用缩放和平移。默认是：false.
panKey: 'shift',//设定平移按键。按住设定的按键时鼠标滑动是对图表进行平移操作。（默认是缩放操作，通过此按键可以实现在缩放和平移之间的切换）
},
title :{//图表标题
text:'<a href="https://www.hcharts.cn/docs/basic-title">我是标题</a>',//当不需要标题时text:null;
widthAdjust:-200,//调整标题宽度
useHTML:false,//虽然这里设置了false，但点击标题还是可以跳转;若是true的话会出现一个默认的a标签样式
align:'left',//图表标题水平对齐方式。 可选的值有 “left”，”center” 和 “right”。 默认是：center.
floating:true,//如果设置为浮动，标题将不占用图表区的位置 默认是：false.设置浮动之后同x/y使用可以设置浮动到哪个位置上
x: 150,//标题相对于水平对齐的偏移量，取值范围为：图表左边距到图表右边距，可以是负值，单位px。 默认是：0.
y: 100,//标题相对于垂直对齐的偏移量
style: {//style属性只能用来设置标题的文字样式，可以设置文字颜色、字体、字号
color: 'hotpink',
fontSize: '18px',
fontFamily: ''
},
},
subtitle:{//图表副标题
text:'我是副标题href="https://www.hcharts.cn/docs/basic-titlehref="https://www.hcharts.cn/docs/basic-titlehref="',
widthAdjust:-800,//调整标题宽度,对于text内容多的比较明显
align:'left',
verticalAlign: 'middle' ,//标题垂直对齐方式。可选值有"top"、"middle"和 "bottom"。可选“top”，”middle“和“bottom”。当给定一个值后，该标题将表现为浮动，效果等同于floating设置为 true。
x:100,
y:20,//这个时候你会发现没有浮动的垂直偏移并没有什么效果
},
credits: {// 版权信息
// enabled:false,//是否显示版权信息
text: 'www.hcharts.cn', // 显示的文字
href: 'http://www.hcharts.cn', // 链接地址
position: { // 位置设置
align: 'left',
x: 400,
verticalAlign: 'bottom',
y: -100
},
style: { // 样式设置
cursor: 'pointer',
color: 'red',
fontSize: '30px'
}
},
//数据列的颜色是通过 colors 来指定的,定义series数组中每个元素所对应的颜色.不需要知道为什么，自己对应的
colors: ['rgba(86,199,99,1)','rgba(226,188,37,1)','rgba(255,133,133,1)'],
xAxis: {//图表的横坐标,一个轴为{ }
title:{//横坐标标题
text:''
},
//x坐标轴的刻度值 若没有此属性x轴的刻度将从0开始
categories: [0,5,10,15,20,25,30,35,40,45,50], //指定x轴坐标点的值
reversed: true,//是否反转图表，反转后从原点开始值越小（即坐标轴刻度是从大到小）。
showEmpty: true,//当坐标轴没有数据时，是否显示坐标轴（包括轴线及坐标轴标题）。 默认是：true.
lineColor: 'red',//坐标轴的颜色
lineWidth: 1,//坐标轴线的宽度
// lineTo:1,//关联
opposite: false,//是否对面显示 默认false
// tickAmount: 5,//规定坐标轴上的刻度总数， 一般是用于在多轴或多表盘（仪表图）中对齐刻度，另外该配置会覆盖 tickPixelInterval 参数
tickWidth:1,//坐标轴上刻度线的长度(值为0的话就不会显示刻度线)
tickLength: 20,//坐标轴上刻度线的长度(值为0的话就不会显示刻度线)
tickColor: 'pink',//坐标轴上的刻度线的颜色
tickmarkPlacement: 'on',//刻度线对齐方式，有between和on可选，默认是between
tickPosition: 'outside',//刻度线相对于轴线的位置，可用的值有 inside 和 outside，分别表示在轴线的内部和外部。 默认是：outside.
tickPixInterval: 5,//刻度间隔
offset:10,//坐标轴距离绘图区的像素值（以轴线为基准）。该参数将会将整个坐标轴进行偏移 默认0
gridLineWidth:1,//网格线宽度。x轴默认为0，y轴默认为1px。
// gridLineDashStyle: 'Dash',//网格线线条样式。和Css border-style类似，常用的有：Solid、Dot、Dash
gridZIndex: 4,//网格线的层叠值（zIndex） 默认是：1.
gridLineColor:'#f2f2f2',//网格线颜色。默认为：#C0C0C0。
alternateGridColor: '#FDFFD5',//间隔网格背景,相当于是隔行换色
labels: {//坐标轴上的刻度值（显示间隔、样式、单位）
// enabled:true,//是否启用Labels。x，y轴默认值都是true
format:'{value} km',//格式化字符串，实质可以对坐标轴的每个刻度添加单位
step: 1,//坐标刻度之间间隔几个刻度显示一个数据（默认1）
style: {
color: 'red',
fontSize:12,
},
align: 'center',//刻度值对应刻度值的位置
},
crosshair:{//鼠标放上后显示纵轴的数据(十字准星)x轴的十字准星垂直于x轴
color:'#999',
width: 3,
zIndex: 4,//准星线的层叠值，增大层叠值可以让准星线显示在数据里或网格线的上方。 默认是：2.
// snop:false,//是否与最近的点对齐，为 true 时十字准星线会自动的对齐到最近的点，为 false 则是当前鼠标的位置。 默认是：true.
},
plotLines:[{//标示线是用来标记坐标轴上特殊值的一条直线，在绘图区内绘制一条自定义的线。标示线总是垂直于它属于的轴。
value:2, //定义在哪个值上显示标示线，这里是在x轴上刻度为2的值处垂直化一条线
width:2, //标示线的宽度，2px
color:'red', //线的颜色，定义为红色
dashStyle:'longdashdot',//标示线的样式，默认是solid（实线），这里定义为长虚线
label: {//标示线上的标签
text:'我是一天x轴的vlaue=2的标示线',
align: 'top',
rotation: 60,
y:10,
style: {
color:'blue'
}
}
}],
plotBands:[{//标示带同标示线，只不过标示的内容为一段范围。
from: 3, // 标示带开始值
to: 5, // 标示带结束值
label: { // 标示带文字标签配置，详见API
text: '我是一块表示带',
align: 'center',
y:50,
style: {
color: '#fff',
fontSize: 25,
}
},
color: '#d9d9', // 标示带背景颜色
borderWidth: 2, // 标示带边框宽度
borderColor: "red", // 标示带边框颜色
// id: , // 标示带 id，用于删除等操作
// zIndex:, // 标示带层叠，用于调整显示层次
events: { // 事件，支持 click、mouseover、mouseout、mousemove等事件
click: function(e) {
console.log('click')
},
mouseover: function(e) {
console.log('mouseover')
},
mouseout: function(e) {
console.log('mouseout')
},
mousemove: function(e) {
console.log('mousemove')
}
}
}]
},
yAxis: [{//图表的纵坐标，多个轴[{轴一},{轴二}]
tickPositions: [0.00, 25.02, 50, 75, 100],//指定y轴坐标点的值
min: 0,
startOnTick: false,
// gridLineWidth: 1,
gridLineColor:'#f2f2f2',
tickLength:0,
tickInterval: 0,
tickmarkPlacement: 'on',
lineWidth: 0,
tickWidth:0,
title: {//纵坐标标题
text: ' Usage（%）',
margin:0,
style: {
color: '#999999',
fontSize:12
}
},
labels:{//坐标轴上刻度的样式及单位
style: {
color: '#999999',
fontSize:12
},
},
// offset:-10,//距离坐标轴的距离
},{//{轴二}
tickPositions: [0.00, 25.02, 50, 75, 100],//指定y轴坐标点的值
min: 0,
startOnTick: false,
// gridLineWidth: 1,
gridLineColor:'#f2f2f2',
tickLength:0,
tickInterval: 0,
tickmarkPlacement: 'on',
lineWidth: 0,
tickWidth:0,
title: {//纵坐标标题
text: ' Usage（℃）',
margin:0,
style: {
color: '#999999',
fontSize:12
}
},
labels:{//坐标轴上刻度的样式及单位
style: {
color: '#999999',
fontSize:12
},
},
opposite:true,//y轴是多轴的时候一定要设置这个
}],
tooltip: {//数据提示框
enabled:true,//是否启用数据点提示框。 默认是：true
shared: true,//当提示框被共享时，整个绘图区都将捕捉鼠标指针的移动。提示框文本显示有序数据（不包括饼图，散点图和标志图等）的系列类型将被显示在同一个提示框中。
formatter : function() {//提示框内容格式化回调函数，返回 false 可以针对某个点或数据列关闭提示框，该函数里可以执行复杂的逻辑来返回需要的内容。
var content = '';
for (var i = 0; i < this.points.length; i++) {
if(i == this.points.length-1){
content += '<span style="font-size: 10px; color: ' + this.points[i].series.color + '">' + this.points[i].series.name + '</span>: ' + this.points[i].y +'℃'+'<br/>';
}else{
content += '<span style="font-size: 10px; color: ' + this.points[i].series.color + '">' + this.points[i].series.name + '</span>: ' + this.points[i].y +'%'+'<br/>';
}
};
var date = new Date();
var nowYear=date.getFullYear().toString();
var nowMonth=(date.getMonth() + 1).toString();
var nowDay=date.getDate().toString();
var nowHours=date.getHours().toString();
var nowMin=date.getMinutes().toString();
var nowSeconds=date.getSeconds().toString();
function timeAdd0(str) {
if(str.length<=1){
str='0'+str;
}
return str
}
nowYear=timeAdd0(nowYear) ;
nowMonth=timeAdd0(nowMonth) ;
nowDay=timeAdd0(nowDay) ;
nowHours=timeAdd0(nowHours) ;
nowMin=timeAdd0(nowMin);
nowSeconds=timeAdd0(nowSeconds)
content = '<span>' + nowYear + '/' + nowMonth + '/' + nowDay + ' ' + nowHours + ':' + nowMin + ':' + nowSeconds + ' year' + '</span><br/>' +content;
return content;
},
// headerFormat: '<small>{point.key}</small><br/>',//标题格式
// pointFormat: '<span style="color:{series.color};">{series.name}</span>：{point.y}<br/>',
followPointer:true,//跟随鼠标
followPointerMove:true,//是否跟随手指移动
// backgroundColor:'red',//提示宽度背景色
borderColor: 'red',//提示框的边框色
style:{
fontSize:12,
fontFamily:'微软雅黑',
fontWeight:'normal',
color:'#666'
}
},
plotOptions: {//数据列配置是针对所有数据列及某种数据列有效的通用配置。
area: {
pointStart: 0,//数据起点
allowPointSelect: true,//是否允许选中点
fillOpacity:0.2,
lineWidth:1,
marker: {
enabled: true,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
},
}
},
legend: {//图例
align: 'center',//整个图例居中显示在图表下方
symbolRadius:5,//图标圆角
symbolWidth:10,//图标宽度
symbolHeight:10,//图标高度
itemStyle: {
color: '#999999',
fontWeight:'normal',
fontSize:12,
},
itemMarginBottom: -14,//图例项底部外边距
},
//数据列是一组数据集合，例如一条线，一组柱形等。图表中所有点的数据都来自数据列对象
series: [{
name: 'CPU',//name 代表区分xAxis数据的，并且会显示在数据提示框（Tooltip）及图例（Legend）中
data: [
5, 6, 10, 20, 50, 45, 30,12
],
tooltip: {
valueSuffix:'%'
}
}, {
name: 'Memory',
data:[
16, 17, 18, 18, 30, 26, 25,67
],
tooltip: {
valueSuffix:'%'
}
},{
name: '温度',
data:[
16, 17, 18, 18, 30, 26, 25,67
],
tooltip: {
valueSuffix:'℃'
},
yAxis:1,//对应的那个轴
}]
})四、效果
若有不足请多多指教！希望给您帮助！
116
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
