主要涉及要點(diǎn)：
- 多圖共用同一個(gè)伸縮x軸
- 折線圖區(qū)間變色
- 自定義散點(diǎn)圖的數(shù)據(jù)點(diǎn)形狀
先上圖：
三張圖共用頂部伸縮軸
然后貼上源碼地址：
https://github.com/EarthMonkey/JianShu/tree/master/echarts
再啰嗦幾句：
-
散點(diǎn)圖的自定義形狀
- series中的type需要設(shè)置為custom
- 另外需要使用renderIterm重寫渲染方法（代碼中有詳細(xì)注釋）
- 其中自定義的非常規(guī)形狀需要用到svg路徑畫圖，此處安利一個(gè)svg路徑轉(zhuǎn)換的在線工具，使用方法也很簡(jiǎn)單：
畫完圖后通過(guò)view>source（ctrl+U）來(lái)獲取svg源碼芬萍，然后將<path d=""/>中的d屬性復(fù)制出來(lái)即可凌节。若無(wú)d屬性义钉，則回到畫圖頁(yè)面通過(guò)object>Convert to Path轉(zhuǎn)換一下
// 自定義圖形本讥，此處需要使用svg路徑
// 依次是圓形邮利、三角形扣讼、五邊形
var svgPath = [
"m76.5,124.5c0,-8.56354 6.93646,-15.5 15.5,-15.5c8.56354,0 15.5,6.93646 15.5,15.5c0,8.56354 -6.93646,15.5 -15.5,15.5c-8.56354,0 -15.5,-6.93646 -15.5,-15.5z",
"m63.1875,76.61313l17,-29.75l17,29.75l-34,0z",
"m70.1525,87.86015l19.49998,-14.18729l19.50002,14.18729l-7.44831,22.95561l-24.10335,0l-7.44833,-22.95561z"
];
var colors = ['red', 'orange', 'green'];
function renderItem(params, api) {
var val = api.value(2);
if (val == 0) {
return;
}
var xPos = api.value(1); // 此處為xAxis數(shù)據(jù)的數(shù)組下標(biāo)
var yPos = api.value(0);
var point = api.coord([yPos, xPos]); // 定位
var itemSize = val * 10; // 此處指定圖形的大小缺猛，不同值不同大小
return {
type: 'path', // 此處設(shè)置svg路徑類型
shape: {
pathData: svgPath[xPos], // 圖形的svg路徑
width: itemSize,
height: itemSize,
x: -itemSize / 2,
y: -itemSize / 2
},
position: point, // 將圖形放到本該在的位置
style: api.style({
fill: colors[xPos] // 圖形顏色
})
}
}
-
折線圖區(qū)間變色
- 此處用了visualMap的屬性
- 若一個(gè)option中有多條不同顏色的line需要根據(jù)不同區(qū)間來(lái)變不同的顏色，則初始化一個(gè)visualMap數(shù)組椭符，并且在visualMap中指定seriesIndex的路徑荔燎，而不是在seriesIndex中指定visualMapIndex
visualMap: [{ // 不同折線片段不同顏色
show: false,
dimension: 1, // 0-垂直方向；1-水平方向
seriesIndex: 0,
pieces: [{
gt: 0,
lte: data1.avg,
color: 'red',
colorAlpha: 0.2 // 顏色透明度
}, {
gt: data1.avg,
lte: 10000, // 不知道為什么這里不設(shè)置一個(gè)上限就會(huì)出錯(cuò)
color: 'red'
}]
}, …
]
- 上面這兩個(gè)是當(dāng)初覺(jué)著比較“辣手”的销钝，其他就不啰嗦了有咨，直接看示例代碼吧
