主要涉及要点：
- 多图共用同一个伸缩x轴
- 折线图区间变色
- 自定义散点图的数据点形状
先上图：
三张图共用顶部伸缩轴
然后贴上源码地址：
https://github.com/EarthMonkey/JianShu/tree/master/echarts
再啰嗦几句：
-
散点图的自定义形状
- series中的type需要设置为custom
- 另外需要使用renderIterm重写渲染方法（代码中有详细注释）
- 其中自定义的非常规形状需要用到svg路径画图，此处安利一个svg路径转换的在线工具，使用方法也很简单：
画完图后通过view>source（ctrl+U）来获取svg源码，然后将<path d=""/>中的d属性复制出来即可。若无d属性，则回到画图页面通过object>Convert to Path转换一下
// 自定义图形，此处需要使用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数据的数组下标
var yPos = api.value(0);
var point = api.coord([yPos, xPos]); // 定位
var itemSize = val * 10; // 此处指定图形的大小，不同值不同大小
return {
type: 'path', // 此处设置svg路径类型
shape: {
pathData: svgPath[xPos], // 图形的svg路径
width: itemSize,
height: itemSize,
x: -itemSize / 2,
y: -itemSize / 2
},
position: point, // 将图形放到本该在的位置
style: api.style({
fill: colors[xPos] // 图形颜色
})
}
}
-
折线图区间变色
- 此处用了visualMap的属性
- 若一个option中有多条不同颜色的line需要根据不同区间来变不同的颜色，则初始化一个visualMap数组，并且在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, // 不知道为什么这里不设置一个上限就会出错
color: 'red'
}]
}, …
]
- 上面这两个是当初觉着比较“辣手”的，其他就不啰嗦了，直接看示例代码吧
