在VUE中使用echarts联调以及一些js基础

用来记录自己遇到的一些小问题 希望以后遇到不会再浪费时间

 

echart的公共组件传参

    由于这次页面不只传一个饼图 而是根据后台传递的参数有多少绘制多少，那么首先是要将后台传递给我们的参数进行整理，按照echarts的api整理成可用的格式即可。

   其中图形的画法需要注意的有

1、所有饼图形的大小取决于你是否给他设定了一个外围的容器。

2、echarts并不支持以%来表达的width和height最好用px来表达。其余的问题遇到再补充

我们最终完成的样式如下图

 

可以看到不同的饼图分属不同的类别 每一个类别下又有数量不定的饼图。因此首先需要处理后台返回的json数据。

首先来看后台返回的数据结构

可以清楚的看到后台并没有做任何的分类处理即一个大类中含有一个饼图 一对一的关系，那么这个筛选数据的工作就得前台来处理。1、遍历整个list取出你想要的判断分类的字段和数据

        2、新建一个map对象，将1的结果遍历，根据判断分类的字段不同push进入不同的数据。至此两个for循环轻松解决数据整理问题

//这里的思路是。遍历整个list

for(let i = 0 ;i<res.productionStatusHeadList.length;i++){
    let o = res.productionStatusHeadList[i]
    this.resultList.push(res.productionStatusHeadList[i].facility)
}
    this.initData();

initData:function(){
    let that = this;
    this.cardFacilityList = {};
    this.resultList.forEach(per=>{
        if(that.cardFacilityList[per.viFacilityTypeName]){
            that.cardFacilityList[per.viFacilityTypeName].push(per);
        }else{
            that.cardFacilityList[per.viFacilityTypeName] = [];
            that.cardFacilityList[per.viFacilityTypeName].push(per);
        }
    });
  console.log(this.cardFacilityList)
    this.change('列表');
    this.change('卡片');
},

到这一步外层的div只需要遍历我们整理好的map对象，而里面的div也就是包含饼图的那一层遍历map中的value即可。至此div已经摆放就位

接下来处理div中的饼图。在这里不同于以前将echarts中的整个opition都抽出去，由于样式都一样 唯一不一样的是数据，因此我只单独抽离出来的变量为opition中serials中data为变量的组件。该公共组件传递监听的参数为items，那么由于我的页面上有无数个饼图 传递id的时候采用了生成的uuid，此处是个小坑 由于时间紧我并没有验证，注意传递的items要放在props里面监听

、

如果是一般的饼图至此一般就完成了。但是项目坑爹，可以看到页面上有多个单选Radio的组件，这时发现切换选项的时候希望是饼图随着数据发生变化，但是并没有成功，这时候引入监听机制，添加watch方法

这里有几点注意 一个是红框处调用echarts初始化方法，由于本项目引用的echarts包众多，请确认引入的包正确，否则调不到echarts的方法在这里被卡了好久实在不应该，在watch方法中监听到参数变化再重新渲染饼图可确保饼图随着初始化的数据变化而变化。那么至此页面的大致布局思路已经完成。

特别注意几个有意思的点，要注意到饼图是随着该div的颜色变化而变化的，为了达到这个效果我们实际处理数据的过程中会更为复杂一些，这里要注意一开始是将饼图的颜色变化放到了公共组件里，后来经人指点，公共组件应该只负责渲染而不负责处理数据结构，传递给公共组件的数据直接拿过来用即可。否则会出问题，切记

那么基本上饼图的页面就这样处理完毕值得一提的还有页面的一些小样式，明显这样的css、html代码更为优雅

js基础

js一些非常基础的操作在做这个页面联调时也遇到了，由于手生也浪费了不少时间，记录下来方便以后查看，在饼图页面的明细页面上

在这个页面上遇到的奇葩问题是时间戳与日期格式之间的转换问题，直接摘抄网上的转化方案即可

1、将format="yyyy-MM-dd HH:mm:ss"转为为时间戳传递给后台，调用即可

      time: function (time = +new Date()) {

    var date = new Date(time + 8 * 3600 * 1000); // 增加8小时

    return date.toJSON().substr(0, 19).replace('T', ' ');

},

2、将后台返回的时间戳转化为format="yyyy-MM-dd HH:mm:ss"显示出来

let time1 = new Date(this.beginData3).getTime();

3、在保存时遇到问题 新建时传给后台的数据格式，需要将整理好的数据放进给后台的对象中的属性里面

4、在做附件上传相关的组件时遇到的问题，一般的附件上传调用iview自带的upload没什么问题，但是我的附件上传需要在table中实现，特此记录下table中render upload组件，红框的参数必须要有

5、还是有关table的render的使用方法 iview的table给的接口太少，可修改性差 好在render函数留了一线生机，将表格行合并，子表格还要添加图片的写法如下