1、在npm run dev时报错 This relative module was not found:
views/inform/setting/type.vue没有找到相关模块,一直以为是router路由没配置。后来才发现。是../../components/wrapper-content模块没找到,路径写错了,对应目录还应该再上一级,为../../../,即遇到这个报错,就看自己引入的模块路径是否错误。
2、echarsts画折线遇到的几点问题
(1)报错
是因为配置的时候,是var option。应该改为 myChart1.setOption( {})
(2)x轴本来也要动态更新时间,echarts做了很好的一个时间筛选显示。
传给x轴的数据是对的,但是无法显示。
修改这个
xAxis: {
data:[],
name:"时间"
},
就正确了。即在一开始即使横轴没有数据,要等ajax请求后才可以取到,但是在定义选项的时候先赋为空数组[]占位。
(3)折现变细
itemStyle:{
normal:{
lineStyle:{
width:1,
type:'solid' //'dotted'虚线 'solid'实线
}
}
},
width默认为2,可以设为1。
(4)横轴按照一定间隔显示
axisLabel:{
rotate:30, //时间显示较长,倾斜30度来展示文字
interval:60 //每隔60个单位展示横轴坐标
}
(5)动态或许数据,使用ajax.,数据每3s更新一次,就用简单的ajax轮询,3s向服务器发送一次请求。
var myChart1 = echarts.init(document.getElementById('lineChart1'));
// 指定图表的配置项和数据
myChart1.setOption( {
title: {
text: ''
},
tooltip: {
trigger: 'axis',
},
legend: {
data:'数据统计',
itemWidth:40,
textStyle:{
fontSize:15,
color:'#fff'
}
},
//横轴、纵轴坐标显示
xAxis: {
data:[],
name:"时间"},
yAxis: {},
series: [{
name: '数据',
type: 'line'
}]
});
// 异步加载数据
function send1(){
$.ajax({ type: "get",
url:'https://bird.ioliu.cn/v1?url=http://39.104.172.7:8080/echarts3/sqldelay.php',
dataType : "json",
success: function(data){
// 使用刚指定的配置项和数据显示图表。
console.log(data);
var xtime=[];
var jsonstr = [];
for(var i=0;i<data.length;i++) {
jsonstr.push(parseFloat(data[i].Up_bandwidth));
xtime.push(data[i].time)
}
myChart1.setOption({
xAxis: {
data:xtime,
name:"时间",
axisLabel:{
rotate:30,
interval:60
}
},
series:[{
data: jsonstr,
type: 'line',
name: '数据',
color:['red'],
itemStyle:{
normal:{
lineStyle:{
width:1,
type:'solid' //'dotted'虚线 'solid'实线
}
}
},
}]
});
},
error:function(){
alert("请求失败")
},
})
}
setInterval(send1(),3000);
注意在设置series时候,需要注意传给的data值为[1,2,34,3]形式,所以取到服务器返回的数据是字符串需要转换为数字,并且压入jsonstr中。