主要涉及要點：

• 多圖共用同一個伸縮x軸
• 折線圖區(qū)間變色
• 自定義散點圖的數(shù)據點形狀

先上圖：

三張圖共用頂部伸縮軸

然后貼上源碼地址：

https://github.com/EarthMonkey/JianShu/tree/master/echarts

再啰嗦幾句：

• 散點圖的自定義形狀

  • series中的type需要設置為custom
  • 另外需要使用renderIterm重寫渲染方法（代碼中有詳細注釋）
  • 其中自定義的非常規(guī)形狀需要用到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數(shù)據的數(shù)組下標
    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]  // 圖形顏色
        })
    }
}

• 折線圖區(qū)間變色

  • 此處用了visualMap的屬性
  • 若一個option中有多條不同顏色的line需要根據不同區(qū)間來變不同的顏色，則初始化一個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,  // 不知道為什么這里不設置一個上限就會出錯
      color: 'red'
      }]
  }, …
]

• 上面這兩個是當初覺著比較“辣手”的，其他就不啰嗦了，直接看示例代碼吧