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,解決