// 初始化设置
var lens = 0;
var series_data = [];
var x_data = [];
var help_data = []; //复制数组，用于显示第二个series系列
var minData = 0;
var legendName = '平均运行速度';
series_data = [30,20,40,30,50,20];
x_data = ['0','1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23'];
minData = getMinData(series_data); //得到最小值
help_data = fillData(series_data,minData,help_data); //得到辅助数组的值
option = {
backgroundColor: "rgba(23,60,110,.5)",
grid: {
left: '20%',
right: '20%',
bottom: '20%',
},
tooltip: {
trigger: 'axis',
formatter: function(params) {
return "时间：" + params[0].name + ":00
" +
params[0].seriesName + "：" + params[0].value + "Km/h
";
},
axisPointer: {
type: 'line',
linestyle: {
color: "rgba(50,243,255,1)",
width: 2,
type: 'dashed'
}
},
backgroundColor: 'rgba(16,75,136,.5)',
borderColor: "rgba(50,
borderWidth: 1,
legend: {
data: legendName
},
calculable: true,
xAxis: [{
name: "h",
nameLocation: 'end',
type: 'category',
data: x_data,
nameTextStyle: {
color: '#fff',
fontSize: 12,
boundaryGap: false,
axisLine: { //坐标轴轴线相关设置
show: true,
linestyle: {
color: "rgba(48,194,
},
axisTick: {
show: false
},
splitLine: { //分割线
show: true,
width: 1,
type: "solid"
}
},
axisLabel: {
show: true,
margin: 10,
textStyle: {
color: "rgba(48,
fontSize: 16,
}
},
}],
yAxis: [{
name: 'km/h',
type: 'value',
nameTextStyle: {
axisLine: { //坐标轴轴线相关设置
show: true,//标记长度
axisLabel: {
show: true,
splitLine: {
show: false,//分割线
splitArea: {
show: true,
areaStyle: {
color: ["rgba(48,.2)","rgba(48,.0)"],
}],
series: [{
zlevel: 1,
name: legendName,
type: 'line',
data: series_data,
smooth:true,
symbol: 'circle',
symbolSize: 4,
itemStyle: {
normal: {
color: 'yellow',
borderColor: '#fff',
borderWidth: 1,
borderType: 'solid',
shadowColor: '#fff',
shadowBlur: 4,
},
linestyle: {
normal: {
width: 4,
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,//从左到右
y2: 0,
colorStops: [{
offset: 0,
color: 'rgb(255,224,4,1)' // 0% 处的颜色
},{
offset: 1,
color: 'rgba(255,142,31,1)' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
}
},
areaStyle: { //折线颜色不取渐变色，取color设置值
normal: {
color: {
type: 'linear',//从左到右，但不能从上到下，需要借助辅助系列
y2: 0,.2)' // 0% 处的颜色
},
{
name: legendName,
data: help_data,
hoverAnimation: false,//禁止触发
zlevel: 2,
symbolSize: 0,//不显示拐点
linestyle: {
normal: {
color: "rgba(48,0)"
}
},
areaStyle: { //折线颜色不取渐变色，取color设置值
normal: {
color: "rgba(48,.5)"
}
},
}
]
};
function getMinData(series_data) { //求最小值
var min = series_data[0];
for (var i = 1; i < series_data.length; i++) {
var cur = series_data[i];
cur < min ? min = cur : null;
}
return min;
}
function fillData(series_data,minData) { //获取辅助数组的值
for (var i = 0; i < series_data.length; i++) {
help_data.push(minData / 2);
}
return help_data;
}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
