以下參數都是寫在option配置對象內，沒有提及的配置參數歡迎查閱讀echart參考手冊。
一、
修改主標題和副標題
title : {
text: '未來一周氣溫變化',//寫入主標題
subtext: '純屬虛構',//寫入副標題
x:'left',//控制標題水平方向的位置'center' | 'left' | 'right' | {number}
y:'top',//控制標題垂直方向的位置'top' | 'bottom' | 'center' | {number}
textStyle:{
fontSize: 18,
fontWeight: 'bolder',
color: '#333'
},//標題字體樣式
subtextStyle{
fontSize: 18,
fontWeight: 'bolder',
color: '#333'
},//副標題字體樣式
},
二、
修改統計圖的寬和高，以及位置和最外面的邊框
grid:{
x:'10%',//控制統計圖左上角的x坐標位置，可為數值單位是px，可用百分比
y:'10%',//控制統計圖左上角y坐標的位置，可為數值單位是px，可用百分比
width:'80%',//控制統計圖的寬度
height:'90%',//控制統計圖的高度
borderWidth:0,//控制邊框的線條粗細，為0則不顯示
borderColor:'#ccc'//修改邊框的線條顏色，如果borderWidth為0則不起作用
},
三、
x軸的樣式控制（y軸同上）：
xAxis : [
{
type : 'category',//坐標軸類型，橫軸默認為類目型'category'，縱軸默認為數值型'value'
data: ['A棟', 'B棟', 'C棟', 'D棟', 'E棟', 'F棟'],//x坐標軸上顯示的數據
boundaryGap:true,//控制x軸的數值是否頂頭，默認為true留空，false則頂頭
splitLine: {//控制網格的線條樣式
show:true,
lineStyle:{
color: '#48b',
width: 2,
type: 'solid'
}
},
axisLine:{//x軸的樣式控制
show: true, //顯示與否
lineStyle:{//線條樣式
color: '#48b',
width: 2,
type: 'solid'
}
},
axisTick:{//控制x軸上的間隔突出的小線條樣式
show:'true',//顯示與否
lineStyle:{//線條樣式
color: '#48b',
width: 2,
type: 'solid'
}
},
axisLabel: {//控制x軸上的文字的樣式
show: true,//顯示與否
textStyle: { color: '#fff' },//控制x軸字體樣式
formatter: '{value} °C',//軸上的數據帶單位
}
}
]，
四、
鼠標移動到數據上出現線條的樣式控制
tooltip : {
trigger: 'axis',
axisPointer:{
type: 'line',
lineStyle: {
color: '#929bb6',
width: 1,
type: 'solid'
}
}
},
鼠標移動到數據上不出現線條出現陰影
tooltip: {
show: true,
trigger: 'axis',
axisPointer:{
type: 'shadow',
shadowStyle: {
color: 'rgba(88,101,137,0.3)',
width: 'auto',
type: 'default'
}
}
},
五、
增加兩條y軸，並且指定哪個個數據使用哪個y軸
yAxis : [
{
type : 'value',
splitNumber: 5, // 數值軸用，分割段數，默認為5
boundaryGap:[0,0],
splitLine:{lineStyle:{color:'#505a73'}},
axisLine:{show: false},
axisLabel: { show: true, textStyle: { color: '#fff' },formatter: '{value} ' }
},
{
type : 'value',
splitNumber: 5, // 數值軸用，分割段數，默認為5
boundaryGap:[0,0],
axisLine:{show: false},
splitLine:{lineStyle:{color:'#505a73'}},
axisLabel: { show: true, textStyle: { color: '#fff' },formatter: '{value} '},
show:'true',
position: 'right',//控制新y軸的位置
}
],
series : [
{
"name":"移動到達數",
"type":"bar",
"yAxisIndex":'1',//使用第二條y軸
"data":[5, 20, 40, 10, 10, 20,5, 20, 40, 10, 10, 20]
},
{
"name":"移動收入（萬元）",
"type":"bar",
"yAxisIndex":'0',//指定第一條y軸，默認都為使用第一條
"data":[1.55, 2.90, 1.70, 9.10, 8.10, 1.90,5, 2.50, 4.30, 1.40, 1.10, 2.60]
}
]
六、
折線圖上顯示最大值最小值
series: [
{
name: '', // 系列名稱
type: 'line', // 圖表類型，折線圖line、散點圖scatter、柱狀圖bar、餅圖pie、雷達圖radar
data: [18.618, 18.386, 18.961, 18.825, 18.643, 19.04],
symbolSize:6,//控制折線圖上表示數值的圖標的大小
symbol:'emptyCircle',//控制折線圖上表示數值的樣式
itemStyle: {
normal: {
lineStyle: {
color: '#8a92ad',
}
}
},
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
}
}
]
七、
圖例的樣式控制
legend: {
data:['寬帶凈增','滲透率'],
x:'right',//控制圖例的位置
y:20,//控制圖例的位置
textStyle: {// 圖例文字樣式
color: '#fff', // 圖例文字顏色
fontSize:14
}
},
八、
軸上的數據太長，換行顯示
xAxis: [ // 直角坐標系中橫軸數組
{
// boundaryGap : false,
type: 'category', // 坐標軸類型，橫軸默認為類目軸，數值軸則參考yAxis說明
data: ['福田區', '南山區', '羅湖區', '寶安區', '龍崗區', '坪大區', '龍華區', '光明區', '鹽田區','蛇口通訊'],//軸上數據
axisLine:{show: false},//x軸
splitLine:{lineStyle:{color:'#505a73'}},//網格顏色
axisLabel: { show: true, textStyle: { color: '#BEC5D6' },
interval : 0,
formatter : function(params){//控制軸上數據換行顯示
var newParamsName = "";
var paramsNameNumber = params.length;
var provideNumber = 2;
var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
if (paramsNameNumber > provideNumber) {
for (var p = 0; p < rowNumber; p++) {
var tempStr = "";
var start = p * provideNumber;
var end = start + provideNumber;
if (p == rowNumber - 1) {
tempStr = params.substring(start, paramsNameNumber);
} else {
tempStr = params.substring(start, end) + "\n";
}
newParamsName += tempStr;
}
} else {
newParamsName = params;
}
return newParamsName
}
}, //軸上字體顏色
axisTick:{show:false},
}
]
九、
easyui里面的tab使用統計圖，統計圖寬度無法自適應：
//解決tab里面統計圖不按照div的百分百的寬度顯示，overDetailFlowPack無法自適應的div的id
$("#overDetailFlowPack").css( 'width', $("#overDetailFlowPack").width() );
十、
問題：echart中統計圖表被壓縮不能正常地自適應。
（1）x軸數據為數組['array1'],如果賦值為字符串'array1',就會出現統計圖不能正常展開的情況。
（2）使用jqueryEasyUi，tab切換顯示不同的統計圖，也會出現統計圖被擠壓變形的情況，解決方法是用js獲取容器的寬度賦值給容器。
（3）在需要顯示隱藏的模塊中，一開始隱藏，點擊顯示的時候會看到統計圖被擠壓變形，此時，需要在點擊顯示模塊的時候重新加載一次統計圖便可以正常顯示。
十一、
統計圖上每個點都顯示對應的數據
series : [
{
name:'視頻用戶（萬）',
type:'bar',
itemStyle : { normal: {label : {show: true}}},//控制統計圖上顯示數據
data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6,162.2, 32.6, 20.0, 6.4, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
},
{
name:'視頻用戶滲透率',
type:'line',
yAxisIndex: 1,
itemStyle : { normal: {label : {show: true,formatter:function(p){return p.value > 0 ? (p.value +'%'):'';}}}},//控制顯示的數據為百分比數值
markLine : {
data : [
{type : 'average', name: '平均值'}//顯示平均值水平線
]
},
data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4,23.0, 16.5, 12.0, 6.2, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5,12.0, 6.2]
}
]