Echarts共用x伸缩轴+折线图区间变色+自定义散点图形状

主要涉及要点：

• 多图共用同一个伸缩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'
      }]
  }, …
]

• 上面这两个是当初觉着比较“辣手”的，其他就不啰嗦了，直接看示例代码吧