樣式截圖大概如下：
1. x，y軸相關操作：xAxis，yAxis
(1) x，y軸的顏色：
axisLine: {
lineStyle: {
color: '#2898e5',
},
},
(2) x，y軸文字顏色：
axisLabel: {
show: true,
textStyle: {
color: '#019bf8'
}
}
（3）x，y軸刻度顏色：
axisTick: {
lineStyle: { color: '#2898e5' }
}
(4) x，y軸座標文字太長顯示不全：,傾斜rotate
axisLabel: {
show: true,
interval: 0,
rotate: 20
},
（5）x ,y 軸網格線的顏色：
splitLine: {
show: true,
lineStyle: {
color: ['rgb(1,155,246,0.3)'], //網格線
width: 1,
}
},
2. 折現 的樣式
（1） 折現的平滑度series：
symbol: 'circle', //實心點
symbolSize: 6, //實心點的大小
smooth: true, //折現平滑
（2）折現的顏色：
itemStyle: {
normal: {
color: 'transparent'
}
},
（3）折現陰影變色：
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgb(52,214,145)' //漸變上邊顏色
}, {
offset: 1,
color: 'transparent' //漸變下邊顏色
}])
}
},
（4）折線上方顯示文字：
label: {
normal: {
show: true,
position: 'top', //頭上顯示數據
color: 'rgb(0,255,255)' //顯示文字顏色
}
},
3. grid圖區域距離四周的距離：
在grid繪圖網格里,containLabel(grid 區域是否包含座標軸的刻度標籤,默認不包含)爲true的情況下,無法使圖表緊貼着畫布顯示, 但可以防止標籤標籤長度動態變化時溢出容器或者覆蓋其他組件,將containLabel設置爲false即可解決;
grid: {
left: '3%',
right: '4%',
bottom: '15%',
top: '15%',
containLabel: true
},
4. 圖例添加以及設置
legend: {
data: ["圖例1", "圖例2", "圖例3"],
icon: "circle", // 這個字段控制形狀 類型包括 circle，rect ，roundRect，triangle，
// diamond，pin，arrow，none
itemWidth: 10, // 設置寬度
itemHeight: 10, // 設置高度
itemGap: 40， // 設置間距
orient: 'vertical', //vertical是豎着顯示 ，默認是橫着
left: '70%', //距離左邊70%，也可用left,center,right
y: 'center', //上下居中顯示，也可以用百分比
textStyle:{ //圖例文字設置
fontSize: 18,//字體大小
color: '#ffffff'//字體顏色
}
}
注：圖例跟series的name要保持一致，否則圖例不出來
5. echarts的標題
title: {
text: '今日排放總量與昨日對比', //標題
subtext: '2019-1-28', //小標題
x: 'center', //左右距離
y: '30%', //上下距離
itemGap: 10, //間距
textStyle: { //文字設置
color: 'rgba(30,144,255,0.8)',
fontFamily: '微軟雅黑',
fontSize: 12,
fontWeight: 'bolder'
}
},
6. tooltip自定義設置
res是測試循環數據，爲了自定義中tooltip中標題和x軸文字不相同（但是還是這一條數據的name,x軸是id,這一操作防止x軸過長 用數字代替，但是鼠標移入還是要顯示正確的name）
其餘的都是正常的數據顯示，params[0].marker是顯示的文字前的圖形
var res=[];
for (var i = 1; i < 21; i++) {
res.push({
id:i,
name: "任務" + i
})
}
tooltip: {
trigger: 'axis',
formatter: function (params) {
console.log(params[0]);
return " " + res[params[0]["dataIndex"]]["name"] + "<br>" + params[0].marker + params[0]["seriesName"] + " " + ":" + " " + params[0]["data"] + "<br>" + params[1].marker + params[1]["seriesName"] + " " + ":" + " " + params[1]["data"] + "<br>"
},
},
7. 完整代碼示例如下：
var option = {
tooltip: {
trigger: 'axis'
},
title: {
text: '今日排放總量與昨日對比', //標題
subtext: '2019-1-28', //小標題
x: 'center', //左右距離
y: '30%', //上下距離
itemGap: 10, //間距
textStyle: { //文字設置
color: 'rgba(30,144,255,0.8)',
fontFamily: '微軟雅黑',
fontSize: 12,
fontWeight: 'bolder'
}
},
legend: {
data: ["圖例1"],
left: 'cnter', //距離左邊70%，也可用left,center,right
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['福州市', '無錫市', '蘭州市', '合肥市', '廣州市', '貴陽市', '長沙市'],
axisLine: {
lineStyle: {
color: '#2898e5', //軸顏色
},
},
axisLabel: {
interval: 0,
rotate: 40, //傾斜度
show: true,
textStyle: { //軸上文字
color: '#019bf8' //顏色
}
},
axisTick: {
lineStyle: { color: '#2898e5' }, // 刻度的顏色
},
},
grid: { //距離
left: '3%',
right: '4%',
bottom: '15%',
top: '15%',
containLabel: true //保留文字距離
},
yAxis: {
type: 'value',
axisLine: {
lineStyle: {
color: '#2898e5', //軸
},
},
axisLabel: {
show: true,
textStyle: {
color: '#019bf8' //軸字體
}
},
splitLine: {
show: true,
lineStyle: {
color: ['rgb(1,155,246,0.3)'], //網格線顏色
width: 1,
}
},
axisTick: {
lineStyle: { color: '#2898e5' } // x軸刻度的顏色
}
},
series: [{
name: '圖例1',
data: [1000, 920, 856, 601, 934, 1090, 802, 1000],
symbol: 'circle', //折線拐點實心圓
symbolSize: 6, //實心圓大小
smooth: true, //折線平滑
label: {
normal: {
show: true,
position: 'top', //折線上方顯示數據
color: 'rgb(0,255,255)'
}
},
itemStyle: {
normal: {
color: 'rgb(0,255,255)' //折線顏色
}
},
areaStyle: { //陰影顏色
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#019bf8' //漸變色上方顏色
}, {
offset: 1,
color: 'transparent' //漸變色下方顏色
}])
}
},
type: 'line'
}]
};