時間過得好快，剛剛還是7月底，一轉眼自己調整（浪費）了大半個月的時間。。
接下來要先總結一下自己之前的知識點，然后清掉自己的待辦任務，重新輕裝上陣！
繼7月24的echarts-柱圖配置匯總后，echarts特殊配置連載第四篇 之 線圖終於也被我這個懶家伙放出來了！
1. 區域漸變
其實這種樣式在官網的demo中有類似的效果，像這個 basic area chart 的，主要是線圖下邊的區域設置。
起作用的是 series(type=line) 下的 areaStyle（我的字面理解是區域效果）屬性的效果。
而 漸變效果 見另一個圖表：
tooltip and DataZoom on Mobile
在此有關於漸變的設置：
不過，在本例中我的最終實現代碼為：
你會發現跟上邊貼鏈接的漸變效果配置不一樣，具體注解或者其他的區域填充樣式，可以直接去配置項的這個位置查看：┏ (゜ω゜)=☞
areaStyle: {
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#638FFF'
},
{
offset: 1,
color: 'rgba(248,65,126,0.90)'
}],
globalCoord: false
}
}
}
2. 顯示加百分號，並作小數點后兩位百分比處理
同之前的那一篇博文一樣，屬於同一類問題。
其實有了 formatter 回調函數，對展示文案的處理怎么都好說，就是js代碼的組合拼裝了其實。
具體見另一片博文：https://www.cnblogs.com/padding1015/p/8625168.html
配置項位置： ┏ (゜ω゜)=☞
這個formatter函數的參數，給了我們幾乎所有的好用的值：
根據返回的參數，加工處理一下，就能得到我們想要的效果
效果：
代碼：
option = {
label: {
show: true,
formatter: function(params) {
return (params.data).toFixed(2) + '%'
}
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901.856, 934.78567, 1290.4, 1330, 1320],
type: 'line',
smooth: true
}]
};
3. Solid模式的水平線
這個對於我來說的難題就是，后台只給我一個值，然后讓我連成一條線。【微笑】
有點數學常識的，錯，有點生活常識的都知道最起碼兩點成一線吧。
而且在echats圖標里，series下的多個對象，他們內部的data值數量應該對應，這樣每一個x軸對應的點有數據，整條線才會充滿整個x軸，否則就像下邊這樣：
紅線的data值數量小於藍線的，所有紅線看上去就短了。
如果只給我一個數，不用看也知道是下邊這樣一個點：
那我怎么才能讓其連成一條和上邊的線同等長度的直線呢？
那我怎么才能讓其連成一條和上邊的線同等長度的直線呢？
以我的榆木腦袋，能想到的只有把一個點繁衍成所有需要的點，形式就像這樣：
復制多個直到和上邊的數組長度相等。。
沒辦法，這個活我不干就得后端干。
困擾我多年，如果各位看客知道ecahrts還有更好的解決辦法，懇請指正。
好了我的主題來了，這里四個520，其實已經是一條直線了，還要做平均線嗎？
要做，echarts的平均線很好看，這個四個相同數值畫出來的直線沒有那個效果。
於是，配置平均線的代碼我這樣寫：
真正的主角是 markline，他會根據你的配置，自動計算data里邊所有數值和的平均值，你只需要簡單地配置就能生成一條美麗的平均線，
默認平均線的線型是虛線，可以和css的border一樣設置為solid（實線），以及顏色美化等都看自己的需要。
這里我特地標注了symbolSize，我設置為了0。他的作用是將上文說的四個520（本文的多個2.6）形成的直線上，每個數值與x軸對應的點的大小設置為0。
不然data里多個數值形成的直線長這樣，就像糖葫蘆。很明顯的能看出來，多個小圓點被直線穿過。
將點的大小設為0，視覺上，線上就沒有圓點了。
然后線的粗細也設置為最小，讓其與平均線合二為一。就成了完美的平均線。（見下邊的藍色平均線）
其實紅線也是平均線，紅線上的黃色區域是我故意突出顯示的線條。黃色線條就是多個相同數值連成的直線。如果沒有平均線，線條的位置和長短大概就是黃線區域的樣子。
代碼：
option = {
title: {
text: '某地區蒸發量和降水量',
subtext: '純屬虛構'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['蒸發量', '降水量']
},
toolbox: {
show: true,
feature: {
dataView: {
show: true,
readOnly: false
},
magicType: {
show: true,
type: ['line', 'bar']
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
calculable: true,
xAxis: [{
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
}],
yAxis: [{
type: 'value',
splitLine: {
show: false
}
},
{
type: 'value',
splitLine: {
show: false
}
}],
series: [{
name: '蒸發量',
type: 'line',
symbolSize: 0,
markLine: {
data: [{
type: 'average',
name: '平均值'
}],
lineStyle: {
type: 'solid'
}
},
lineStyle: {
width: 0
},
data: [12.6, 12.6, 12.6, 12.6, 12.6, 12.6, 12.6, 12.6, 12.6, 12.6, 12.6, 12.6, 12.6, 12.6],
smooth: true,
},
{
name: '降水量',
type: 'line',
symbolSize: 0,
markLine: {
data: [{
type: 'average',
name: '平均值'
}],
lineStyle: {
type: 'solid',
color: 'red'
}
},
data: [2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6],
lineStyle: {
width: 20
},
yAxisIndex: 1
}]
};
2018-08-11 11:53:08