vue项目中使用echarts 遇到问题总结

需要注意echarts版本不同，部分属性可能有所不同，我用的是echarts4.0.

一、echarts图表自适应问题。

自适应代码

(function (doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            if(clientWidth>=1366){
                 docEl.style.fontSize = 100 * (clientWidth / 1366) + 'px';
            }else{
                    docEl.style.fontSize = 100+"px"
            }
               
        };
    if (!doc.addEventListener) return;
    recalc();
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

使用自适应rem 来画echarts图表。发现刚开始加载，canvas 的宽高始终是rem未实现之前元素的宽高，打断点发现是加载顺序原因(加上document.ready后发现部分还是有问题)，换算rem之前就获取了元素宽高，导致图表很小，才发现自适应代码只有在浏览器窗口大小发生变化和dom结构加载完成后才会执行函数换算，所以没发生之前就先调用recalc(); 

二、echarts图表的循环问题

使用vue开发，其中需要用到图表的循环，问题来了，echarts都是通过不同的id来初始化图表的，而我用到了v-for ，一次循环中的两个不同的图表index相同，只能通过

动态设置id来实现了，但是id没赋值之前echarts就初始化了，导致拿到的id 为undefined,所以写了个定时器延迟调用，显然此法并不好，但想不到更好的了，上代码；

  <li v-for="item in trastMsg">
             <div :id="item.sign"></div>
             <div :id="item.radarsign"></div>
  </li>

for(var i = 0;i<self.trastMsg.length;i++){
        self.trastMsg[i].sign = 'echart'+i;
        self.trastMsg[i].radarsign = 'echart'+10+i;
      }

 var timer = setInterval(quw,20);
       var t = 0;
       function quw(){
         for(var i = 0;i<self.trastMsg.length;i++){
            if(document.getElementById(self.trastMsg[i].sign)==null){
              t=1;
            }
         }
          if(t!=1){
              for(var i = 0;i<self.trastMsg.length;i++){
                function barQuest(){
                          let myChart = echarts.init(document.getElementById(self.trastMsg[i].sign));

}

             }

 clearInterval(timer);清除定时器

}

}

三、柱图

1、柱图数据条最大最小值标注不同于其他数据的颜色（js仅仅考虑到只有一个最大、最小值的情况）

var maxindex = value.indexOf(Math.max.apply(Math, value));

var minindex = value.indexOf(Math.min.apply(Math, value));

 option中

series:[{

itemStyle:{
normal: {
show: true,
color:function(params) {
var colorList = [];
for(var i = 0;i<name.length;i++){
colorList.push('#5CB5D6')
}
colorList[maxindex]='#EB6100';
colorList[minindex]='#22AC38';
return colorList[params.dataIndex]
          }

       }

}]

2、柱图数据标签仅显示最大最小值，其他值鼠标悬浮上去显示

显然label这并不能像color 一样返回数组，需要在data属性上下功夫，所以data里面就不能简单存值，而是存在data["value":]；

例："data":[{"name":"张三","value":622}]

for(var i=0;i<data.length;i++){
data[i].label={show:false,position:'top'};
data[i].emphasis={label:{show:true,position:'top'}}
}

var maxindex = value.indexOf(Math.max.apply(Math, value));
var minindex = value.indexOf(Math.min.apply(Math, valuenull));
data[maxindex].label= {show:true,position:'top'};
data[minindex].label= {show:true,position:'top'};

四、雷达图‘

1、图例问题

vue-cli 构建的项目，雷达图就是没有图例，相同代码放到html就可以，后来才发现是没引用legend;

切记vue-cli中的title\legend等需要引入，’require('echarts/lib/component/legend');

除此之外，图例的图形在data的icon中设置了rect，原以为是正方形了结果，结果是矩形，也没错啦，所以还需要设置

color:["#5CB5D6","#32B16C","#EB6877","#F8B551"], 图例颜色

legend: {
right:0,
top:'2%',
orient: 'vertical',图例方向
data: [{name:'1',icon:'rect},{name:'2',icon:'rect'}],图例形状
itemWidth:12,图例宽
itemHeight:12,图例高
textStyle:{
color:'#707070'
}
},

另外数据的线颜色已经在data中设置，但图例颜色却不一致，在legend中也没法设置，只能在legend同级color中把图例颜色设置；

2、雷达图数据标签显示

 series: [{
                      type: 'radar',
                      symbolSize:0,
                      label:{
                        show:true,
                        color:'#000000',
                        position:'top'
                      },

label就是显示不出来，纳闷，后来才发现只要   symbolSize:0,就显示不出来，所以要不不加，要不改为  symbolSize:1,解决