vue项目报错的以及echarts动态获取数据并展示折线图的几点整理

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中。

(6)给echarts图表的坐标轴设置颜色和样式