极客观点
项目管理
HarmonyOS
折线图在ios上不显示x轴，在安卓上显示，图都能绘出来，为什么x轴没有呢？用的是echarts
var optionFH = {
axisLine: {
show: false
},
// 控制网格线是否显示
splitLine: {
show: true,
},
// 去除y轴上的刻度线
axisTick: {
show: false
},
tooltip: {
trigger: 'axis',
// formatter:function(params){
// console.log(params)
// }
},
color: ["#02aac2", "#f19f00"], //设置图例的颜色必须用数组格式
legend: {
orient: 'horizontal',
right: 25,
top: 20,//
data: ['数据加载中...'],
itemWidth: 22, //图例宽度圆点
itemHeight: 15,
background: "#149f79",
textStyle:{
color:["#02aac2","#f19f00"],//图例开启时的颜色。
fontSize:13,//图标上方点击按钮的文字大小
}
},
calculable: true,
xAxis: {
type: 'category',
boundaryGap: false,
splitLine: { //给x轴添加分割线
show: true,
lineStyle: {
color: '#35363B',
width: 1
}
},
axisLabel: {
show: true,
interval: 'auto',
textStyle: {
color: 'white'//字体颜色
}
//interval: Int //纵坐标的数据全部显示
},
axisLine:{
show: true,
lineStyle: {
color: 'white'//x轴的颜色
}
},
axisTick: {
show: false //是否显示坐标轴的刻度
},
data: [0]
//data: arrOne_FH
},
grid: { // 控制图的大小，调整下面这些值就可以，
x: 50,
top:45,
// x2: 100,
y2: 80,// y2可以控制 X轴跟Zoom控件之间的间隔，避免以为倾斜后造成 label重叠到zoom上
},
yAxis: {
type: 'value',
splitLine: { //给x轴添加分割线
show: true,
lineStyle: {
color: '#35363B',//里面线的颜色
width: 1
}
},
// name: "标单(元/吨)",
nameTextStyle: {
fontSize: 15,
color: '#a9a9a9'
},
axisLabel: {
show: true,
interval: 'auto',
inside: false,
// rotate: 90,
// margin: 8,
formatter: null,
},
nameLocation: "end", //坐标轴名字的位置
// nameRotate:90,
axisLabel: { //坐标轴字体的颜色
show: true,
textStyle: {
color: 'white'//字体颜色
}
},
axisLine: { //是否显示y轴
show: true,
lineStyle: {
color: 'white'//y轴的颜色
}
},
axisTick: {
show: false //是否显示坐标轴的刻度
},
},
series: [{
name: '数据加载中...', //1号负荷
type: 'line',
symbol: 'none', //去除折线点
yAxisIndex: 0,
data: 0,
connectNulls: true,//值为null的时候连线
itemStyle: {
normal: { //折线点的颜色，
color: function(params) {
var colorList = ["yellow"];
return colorList[params.dataIndex];
}
},
},
itemStyle: { //跟折线添加颜色
normal: {
lineStyle: {
color: "#02aac2"
}
},
},
},
{
name: '数据加载中...', //1号负荷
type: 'line',
symbol: 'none', //去除折线点
yAxisIndex: 0,
data: 0,
connectNulls: true,//值为null的时候连线
itemStyle: {
normal: { //折线点的颜色，
color: function(params) {
var colorList = ["yellow"];
return colorList[params.dataIndex];
}
},
},
itemStyle: { //跟折线添加颜色
normal: {
lineStyle: {
color: "#f19f00"
}
},
},
}
]
};
myChart.setOption(optionFH);
这是获取数据的
let myData;
//刚入的曲线
//原先三条曲线
axios.get(`xxxxxxxxx`)
.then(function(response) {
//数据 success
myData = response.data.data;
var maxtime = "0000-00-00 00:00:00";//每天时间最大的值
var mintime = "0000-00-00 00:00:00";//每天时间最小的值
let arrall = [];
arrall.push(zhizhizhi);
arrall.push(myData);
console.log(arrall);
for(var i=0;i<arrall.length;i++){
arrall[i].map(function(item,key){
if (item.RECORD_TIME > maxtime){
maxtime = item.RECORD_TIME;//哈密最多
}
if (item.RECORD_TIME < maxtime){
mintime = item.RECORD_TIME;
}
})
}
//只拿到 时 分 秒
let nowDate = new Date();
const year = nowDate.getFullYear();
const month = nowDate.getMonth() + 1 < 10 ? '0' + (nowDate.getMonth() + 1):nowDate.getMonth() + 1;
const day = nowDate.getDate() < 10 ? '0' + nowDate.getDate() : nowDate.getDate();
var minZhi = Date.parse(year+'-'+month+'-'+day+" 00:00:00");
var maxZhi = Date.parse(maxtime);
console.log(year+'-'+month+'-'+day+" 00:00:00");
console.log(maxtime);
var Minute = Number(Math.round((maxZhi - minZhi) / 60 / 1000));//之间相隔了多少分
console.log(Minute);
// 设置interval值
var Int = "";
Int = Math.floor(Minute / 6);
var arrOne_FH = [];
var arrOne_FH_val = [];
var arrOne_FH_val_plan = [];
var arrTwo_FH_val = [];
var arrOne_AGC_val = [];
var arrTwo_AGC_val = [];
var arrOne_GRL_val = [];
var arrTwo_GRL_val = [];
// 获取时间戳
var loadAll=[]; //总负荷
var loadRateAll=[]; //调度计划
let hours = 0;
let minutes = 0;
var resv = [];//x轴刻度值
for(var i=0;i<Minute;i++){
//初始化
loadAll[i]="--";
loadRateAll[i]="--";
//x轴刻度值
if(minutes>=60){
hours+=1;
minutes=0;
}
resv[i]=(hours<10?'0'+hours : hours)+":"+(minutes<10?'0'+minutes : minutes);
minutes+=1;
}
//总负荷
for (var i in myData) {
var minute_num=Number(myData[i].RECORD_TIME.slice(11, 13))*60+Number(myData[i].RECORD_TIME.slice(14, 16));
var FHOne_val = (Number(myData[i].ITEM_VALUE)/10).toFixed(2);
loadAll[minute_num]=FHOne_val;
}
// 调度计划
for (var i in zhizhizhi) {
var minute_num=Number(zhizhizhi[i].RECORD_TIME.slice(11, 13))*60+Number(zhizhizhi[i].RECORD_TIME.slice(14, 16));
var FHOne_val = (Number(zhizhizhi[i].ITEM_VALUE)/10).toFixed(2);
loadRateAll[minute_num]=FHOne_val;
}
optionFH.legend.data = [wenzi];
optionFH.xAxis.axisLabel.interval = Int;
optionFH.xAxis.data = resv;
optionFH.series[0].name = wenzi;
optionFH.series[0].data = loadAll;
if(responseZhi=="SY-FH-01"){
optionFH.legend.data = [wenzi,"调度计划"];
optionFH.series[1].name = "调度计划";
optionFH.series[1].data = loadRateAll;
}
if (optionFH.series[0].data.length == 0) {
optionFH.yAxis.min = "0";
optionFH.yAxis.max = "5";
}
myChart.setOption(optionFH, true);
window.onresize = function () {
//重置容器高宽
myChart.resize();
};
})
在电脑上是正常的 在安卓也是正常的
但是在iosx轴没有了，
请问这个是什么问题呢？ 在线等 ！！
已解决，核心就是 Date.parse();
Date.parse() 是有兼容性问题的，我时间的格式为 2018-07-05 12:14:56
但是有的浏览器解析不了这种格式的 只要把时间的格式改为 2018/07/05 12:14:56
就可以了
let maxtimezhi=maxtime.replace(/-/g,"/");//2018/07/05 12:14:56
然后就可以运行了