Echarts圖表經常使用功能使用記錄

一、座標軸

1.一、X軸： 

xAxis : {
    type: 'category',
    boundaryGap : false,
    data : xAxisData,    //數組
    axisLabel: {        // x軸的字體樣式
        show: true,
        textStyle: {
            color: '#fff',
            fontSize:'16'
        }
    },
    splitLine: {    
        show: false,     // 控制網格線是否顯示
        lineStyle: {    //  改變軸線顏色
            color: ['red']
        }                            
    },
    axisLine:{    // x軸的顏色和寬度
        lineStyle:{
            color:'#fff',
            width:3,   //這裏是座標軸的寬度,能夠去掉
        }
    }
}
複製代碼

1.二、Y軸： 

yAxis: {
    type: 'category',
    data: ['福田','南山','羅湖','鹽田','龍華','寶安','龍崗'],
    axisLabel: {    // y軸的字體樣式
        show: true,
        textStyle: {
            color: '#fff'
        }
    },    
    axisLine:{    // y軸的顏色和寬度
        lineStyle:{
            color:'#fff',
            width:1,    //這裏是座標軸的寬度
        }
    }
}複製代碼

二、圖例： 

legend: {
    data: ['交警', '武警','協警'],
    textStyle: {  
        color: '#fff'          //legend字體顏色 
    }
}複製代碼

三、提示框： 

tooltip : {
      trigger: 'axis',
      axisPointer : {            // 座標軸指示器，座標軸觸發有效
          type : 'shadow'        // 默認爲直線，可選爲：'line' | 'shadow'
      }
 }複製代碼

四、動畫： 

五、數據：

六、圖表：

6.一、圖表位置：

grid: {
    left: '3%',   //距離左邊的距離
    right: '6%', //距離右邊的距離
    bottom: '8%',//距離下邊的距離
    top: '12%' //距離上邊的距離
}複製代碼

6.二、圖表標題

title:{
    left:'center',    //標題居中,left的值爲'left', 'center', 'right'
    itemGap:20    //主副標題之間的間距,默認爲10 
    text:'標題文本',
    textStyle:{        
        color:'#ccc',    //文字顏色
        fontStyle:'normal',    //字體風格,'normal','italic','oblique'
        fontWeight:'bold',    //字體粗細 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
        fontFamily:'sans-serif',    //字體系列
        fontSize:18    //字體大小
    }
    subtext:'副標題',
    subtextStyle:{}    //同上方的textStyle
}複製代碼

關於echarts使用的常見問題總結

1.legend圖例不顯示的問題:
        在legend中的data爲一個數組項,數組項一般爲一個字符串，每一項須要對應一個系列的 name,若是數組項的值與name不相符則圖例不會顯示;
2.圖表位置沒法緊貼畫布邊緣的問題:
        在grid繪圖網格里,containLabel(grid 區域是否包含座標軸的刻度標籤,默認不包含)爲true的狀況下,沒法使圖表緊貼着畫布顯示,但能夠防止標籤標籤長度動態變化時溢出容器或者覆蓋其餘組件,將containLabel設置爲false便可解決;

grid:{
    containLabel:false
}複製代碼

3.反向座標軸:
在echarts3中xAis和

yAis:{
  inverse:true  
}複製代碼

新添加了inverse屬性,在inverse爲true的狀況下執行反向座標軸;

4.動態替換地圖圖表的方法:
        在echarts3中因爲地圖精度的提升,不在內置地圖數據；能夠在地圖下載頁面http://echarts.baidu.com/download-map.html 下載對應文件,按需求引用;
地圖的geojson文件只包含了兩層數據(國>省,省>市,市>區)
eCharts 中提供了兩種格式的地圖數據，一種是能夠直接 script 標籤引入的 js 文件，引入後會自動註冊地圖名字和數據。還有一種是 JSON 文件，須要經過 AJAX 異步加載後手動註冊,我通常使用後者;
方法以下:

function mapCharts(name,id){
    $.get('json路徑/'+name+'.json', function (geoJson) {
        echarts.registerMap(name, geoJson);
        var chart = echarts.init(document.getElementById(id));
        chart.setOption({
            series: [{
            type: 'map',
            map: name
            }]
        });
    });
};複製代碼

5.柱狀圖的寬度問題:
如設計圖給出柱狀圖指定寬度,直接指定series.barWidth柱狀圖的寬度(默認barWidth爲自適應),自適應功能會失效,在小尺寸狀態下柱狀圖寬度不會發生改變;

如不指定寬度,使用默認自適應會致使多條數據與單條數據寬度顯示不一致,因此在設計圖明確寬度的狀況下,使用series.barMaxWidth(最大寬度)屬性,來解決這一問題;

自適應多條數據的效果

自適應單條數據的效果

使用了最大高度的效果

6.部分狀況下初始化圖表失敗的問題
       在使用相似Bootstrap輪播圖等使用display:none屬性隱藏其餘圖片的插件時,這種狀況下會致使echarts初始化時獲取不到畫布寬高,致使繪製圖表失敗;
        若是不考慮ie9如下可考慮swiper3等使用overfllow:hidden屬性隱藏多餘圖片的插件,如需兼容ie9如下可考慮swiper2(高度沒法自適應),或者本身手寫輪播圖;

7.echarts圖表響應式的問題
echarts提供了圖表的resize方法,使用時可在setoption後添加以下代碼:

$(window).on('resize',function(){
    myChart.resize();
});複製代碼

8.圖表判斷返回顏色
echarts的color屬性提供了function方法

color: function(params) {
//顏色數組
    var colorList = [
        ‘#C1232B‘,‘#B5C334‘,‘#FCCE10‘,‘#E87C25‘,‘#27727B‘,
        ‘#FE8463‘,‘#9BCA63‘,‘#FAD860‘,‘#F3A43B‘,‘#60C0DD‘,
        ‘#D7504B‘,‘#C6E579‘,‘#F4E001‘,‘#F0805A‘,‘#26C0C0‘
    ];
//判斷的代碼

//根據條件返回相應顏色
return colorList[params.dataIndex]
}複製代碼

9.使用formatter方法格式化文本(用於在label標籤,tolltip等顯示信息須要自定義時)
legend圖例下的使用
使用字符串模板，模板變量爲圖例名稱 {name}

formatter: 'Legend {name}'
//使用回調函數
formatter: function (name) {
    return 'Legend ' + name;
};複製代碼

label下的使用
主要是對params(一個對象包含data數據)參數的返回

formatter: function (params) {
    return params.xxx;
};複製代碼

10.tolltip裏添加小標識(圓點之類的)的方法
在formatter裏返回時拼接html元素;

formatter: function(params) {
    if(params.data.value) {
        if(params.data.value.length > 0) {
            var str = '';
            for(var i = 0; i < params.data.value.length; i++) {
                if(str !== '') {
                    str += '</br>' + '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + color[i] + '"></span>';
                }
                str += params.data.value[i] + '人';
            }
            return params.name + '</br>' + '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + color[0] + '"></span>' + str;
        }
    }
    return params.data.name + ':' + (params.data.value ? params.data.value : '--');
}複製代碼