echarts總結

connectNulls 折線圖連接空數據

connectNulls: true
折線圖連接空數據，默認是false，不連接，就會出現中間斷開的情況，如圖

設置connectNulls: true

折線圖設置線寬

折線圖設置線寬 ，下面這個設置不起作用

lineStyle:{
 width: 20
},

要用

 lineStyle:{
  normal:{
  	width: 5
  }
 },

tooltip.confine

是否將 tooltip 框限制在圖表的區域內。
當圖表外層的 dom 被設置爲 ‘overflow: hidden’，或者移動端窄屏，導致 tooltip 超出外界被截斷時，此配置比較有用。

tooltip.extraCssText

額外附加到浮層的 css 樣式。如下爲浮層添加陰影的示例：

extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'

tooltip文本換行時文本對齊

tooltip: {
  trigger: 'axis',
  // confine: true,
  extraCssText: 'white-space: normal;',
  formatter: function (params) {
    console.log('params = ' + JSON.stringify(params));
    var res = '';
    var nameFlag = true;
    for(var i=0;i<params.length;i++){
      res += params[i].marker + '<span style="display: inline-block;width: calc(100% - 20px);vertical-align: top;">';
      if (nameFlag && params[i].data) {
        res = params[i].name+'<br>' + res;
        nameFlag = false;
      }
      if (!params[i].data) {
        params[i].data = '-';
      }
      res+=params[i].seriesName+':'+params[i].data+'</span><br>'
    }
    return res;
  },
  position: ['30%', '10%']
},

tooltip位置

tooltip顯示不全解決辦法
使用回調函數來設置提示框位置，解決tooltip顯示不全的問題

position: function(point, params, dom, rect, size){
   //其中point爲當前鼠標的位置，size中有兩個屬性：viewSize和contentSize，分別爲外層div和tooltip提示框的大小
   var x = point[0];//
   var y = point[1];
   var viewWidth = size.viewSize[0];
   var viewHeight = size.viewSize[1];
   var boxWidth = size.contentSize[0];
   var boxHeight = size.contentSize[1];
   var posX = 0;//x座標位置
   var posY = 0;//y座標位置
   
   if(x<boxWidth){//左邊放不開
       posX = 5;    
   }else{//左邊放的下
       posX = x-boxWidth; 
   }
   if(y<boxHeight){//上邊放不開
       posY = 5; 
   }else{//上邊放得下
       posY = y-boxHeight;
   }
   return [posX,posY];
},

legend點擊隱藏其他項時，x軸根據剩下的項調整顯示刻度

下面的例子可以在官網例子中測試

xAxisData = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
yAxisData = {
    'data1': ['-', '-', '-', 234, 290, 133, 123],
    'data2': ['-', 221, 191, 324, 121, 233, 421],
    'data3': ['-', '-', 332, 243, 231, 333, 213],
    'data4': [122, 333, 221, 432, 331, 411, 312]
};

//數據處理函數（假定各系列數據列表長度一致）
function func1(xData, yData, selectedList) {
    let sliceParam = -1;
    let res = {};
    res.xData = [];
    res.yData = {};

    //當未傳入selectedList時，不進行處理直接輸出
    if (typeof(selectedList) === 'undefined') {
        res.xData = xData;
        res.yData = yData;
        return res;
    }

    for (let i in xData) {
        for (let key in yData) {
            if (selectedList[key] && yData[key][i] != '-') {
                sliceParam = i;
                break;
            }

        }
        if (sliceParam != -1) {
            break;
        }
    }
    res.xData = xAxisData.slice(sliceParam);
    for (let key in yData) {
        res.yData[key] = yData[key].slice(sliceParam);
    }
    return res;
}


dataNew = func1(xAxisData, yAxisData);


option = {
    title: {
        text: 'Awesome Chart'
    },
    legend: {},
    xAxis: {
        data: dataNew.xData
    },
    yAxis: {},
    series: (function() {
        let res = [];
        for (let key in dataNew.yData) {
            res.push({
                name: key,
                type: 'line',
                data: dataNew.yData[key]
            });
        }
        return res;
    })()
};

myChart.on('legendselectchanged', function(params) {
    dataNew = func1(xAxisData, yAxisData, params.selected);
    myChart.setOption({
        xAxis: {
            data: dataNew.xData
        },
        series: (function() {
            let res = [];
            for (let key in dataNew.yData) {
                res.push({
                    name: key,
                    type: 'line',
                    data: dataNew.yData[key]
                });
            }
            return res;
        })()

    });

});

柱狀圖文字顏色修改

series: [
    {
         name: 'aaa',
         type: 'bar',
         label: {
             normal: {
                 show: true,
                 position: 'right',
                 formatter: '{c}%'
             }
         },
         itemStyle:{
           normal: {
             label: { 
               textStyle: {
                 color: '#000'
               }
             }
           }
         },
         data:[]
     }
 ],

圖表文字模糊

• 解決： 使用svg渲染
• 也可將svg生成圖片

// 以svg形式渲染
var myChart = echarts.init(document.getElementById('echarts'), null, {renderer: 'svg'});

// 生成圖片
setTimeout(function(){
 var snapshotImage = new Image();
  $('#echarts').append(snapshotImage);
  snapshotImage.src = myChart.getDataURL();
}, 200);

自定義數據視圖樣式

使用optionToContent
注意： 一定要在optionToContent後邊加contentToOption，否則視圖刷新後數據就會爲空

toolbox: {
   show : true,
    feature: {
        dataView: {show: true, readOnly: false,
        	// 數據視圖樣式
        	optionToContent : function(opt) {
               var axisData = opt.xAxis[0].data;
               var series = opt.series;
               var tdHeaders = '<td style="padding-right: 8px;"></td>'; //表頭
               series.forEach(function(item) {
                   tdHeaders += '<td style="padding-right: 8px;">' + item.name + '</td>'; //組裝表頭
               });
               var table = '<table><tbody><tr>' + tdHeaders + '</tr>';
             var tdBodys = ''; //數據
              for (let i = 0, l = axisData.length; i < l; i++) {
                  for (let j = 0; j < series.length; j++) {
                      tdBodys += '<td>' + (series[j].data[i] || '') + '</td>'; //組裝表數據
                  }
                   table += '<tr><td style="padding: 0 10px">' + axisData[i] + '</td>' + tdBodys + '</tr>';
                 tdBodys = '';
              }

               table += '</tbody></table>';
               return table;
           },
           // 需要在optionToContent後加contentToOption，否則視圖刷新後爲空數據
           contentToOption : function(opt) {
               
           }
        },
        magicType: {show: true, type: ['line', 'bar']},
        restore: {show: true},
        saveAsImage: {show: true}
    },
    top: 20,
    right: 20
},

一條數據線顯示多個提示信息

• data以json形式設置多個值，圖會以value的值來畫，其他幾個值可以在tooltip中調用

option = {
    tooltip: {
        trigger: 'axis',
        /*position: function (pt) {
            return [pt[0], '10%'];
        },*/
        formatter: function(params){
            return '日期：' + params[0].name + 
                    '<br>value：' + params[0].data.value +
                    '<br>totalValue：' + params[0].data.totalValue + 
                    '<br>totalProfit：' + params[0].data.totalProfit
        }
    },
    title: {
        left: 'center',
        text: '',
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ["2015-12-31","2016-09-08","2016-10-14","2016-10-21","2016-10-28","2016-10-31","2016-11-04","2016-11-11"]
    },
    yAxis: {
      axisLabel: {
        margin: 5
      }
    },
    grid: {
      left: 50
    },
    series: [
        {
            name:'淨值',
            type:'line',
            smooth:true,
            symbol: 'none',
            sampling: 'average',
            itemStyle: {
                color: '#37A2DA'
            },
            data: [{
                value: 1.2,
                totalValue: 2.2,
                totalProfit: 3
            },{
                value: 2.23,
                totalValue: 2.12,
                totalProfit: 23
            },{
                value: 2.02,
                totalValue: 2.52,
                totalProfit: 2.3
            },{
                value: 1.12,
                totalValue: 2.32,
                totalProfit: 35
            },{
                value: 1.2,
                totalValue: 2.2,
                totalProfit: 3
            },{
                value: 1.2,
                totalValue: 2.2,
                totalProfit: 3
            },{
                value: 1.2,
                totalValue: 2.2,
                totalProfit: 3
            },{
                value: 1.2,
                totalValue: 2.2,
                totalProfit: 3
            }]
        },
    ]
};

• 效果如圖：

rich根據字數設置label的字號

var len = 8; // x軸類目的個數
var chart_width = $("#chart03").width(); // 圖的寬度
var oneGridWidth = Math.floor((chart_width - chart_width/10 - chart_width/10)/len); // 計算每一個x軸類目的寬度，減去的是左右間距
axisLabel:{
   	interval:0,
   	formatter:function(value){  
   		var valueLen = value.length;
   		var font_num = oneGridWidth/valueLen;
   		if(font_num >= 20){
   			return '{size20|' + value + '}';
   		} else if (font_num >= 18){
   			return '{size18|' + value + '}';
   		}  else if (font_num >= 16){
   			return '{size16|' + value + '}';
   		}  else if (font_num >= 14){
   			return '{size14|' + value + '}';
   		}  else if (font_num >= 12){
   			return '{size12|' + value + '}';
   		} else {
   			var num = parseInt(oneGridWidth/12);
   			var re =new RegExp("(.{" + num + "})","g");
   			var value = value.replace(re, "$1\n");
   			return '{size12|' + value + '}';
   		}
   	},
   	rich: {
   		size20: {
   			fontSize: '20'
   		},
   		size18: {
   			fontSize: '18'
   		},
   		size16: {
   			fontSize: '16'
   		},
   		size14: {
   			fontSize: '14'
   		},
   		size12: {
   			fontSize: '12'
   		}
   	} 
   }      
  }