echarts之自定義（一）

最大值&最小值&平均值

• 效果圖
  
• 代碼

/*
params：包含了當前數據信息和座標系的信息。
api：是一些開發者可調用的方法集合。
api.value(...)，意思是取出 dataItem 中的數值。例如 api.value(0) 表示取出當前 dataItem 中第一個維度的數值。
api.coord(...)，意思是進行座標轉換計算。例如 var point = api.coord([api.value(0), api.value(1)]) 表示 dataItem 中的數值轉換成座標系上的點。
api.size(...) 函數，表示得到座標系上一段數值範圍對應的長度。
shape 屬性描述了這個矩形的像素位置和大小。
*/
function renderItem(params, api) {
var seriesName = params.seriesName;
var xValue = api.value(0); //api.value(0) 表示取出當前 dataItem 中第一個維度的數值。
var highPoint = api.coord([xValue, api.value(1)]); //最大值
var midPoint = api.coord([xValue, api.value(2)]); //平均值
var lowPoint = api.coord([xValue, api.value(3)]); //最小值
var halfWidth = api.size([1, 0])[0] * 0.2; //半寬度
var height = api.size([1, api.value(1) - api.value(3)])[1];
var highStyle = api.style({
  stroke: '#DC3636',
  fill: null,
  lineWidth: 5,
  text: api.value(1)
}); 
var midStyle = api.style({
  stroke: '#6E93C1',
  fill: null,
  lineWidth: 5,
  text: api.value(2)
}); 
var areaStyle = api.style({
  stroke: null,
  fill: '#DCDCDC',
  text: ''
}); 
var lowStyle = api.style({
  stroke: '#369B36',
  fill: null,
  lineWidth: 5,
  text: api.value(3)
}); 

if (seriesName == "最大值") {
return {
  type: 'group',
  children: [
  {
      type: 'line', // 高點
      shape: {
        x1: highPoint[0] - halfWidth,
        y1: highPoint[1],
        x2: highPoint[0] + halfWidth,
        y2: highPoint[1]
      },
      style: highStyle
    }
    ]
  };
} else if(seriesName == "平均值"){
  return {
    type: 'group',
    children: [
    {
      type: 'rect', // 中間連接區域
      shape: {
        x: highPoint[0] - halfWidth,
        y: highPoint[1],
        width: halfWidth*2,
        height: height,
        r: [1, 1, 1, 1]
      },
      style: areaStyle
    }, 
    {
      type: 'line', // 中間點
      shape: {
        x1: midPoint[0] - halfWidth,
        y1: midPoint[1],
        x2: midPoint[0] + halfWidth,
        y2: midPoint[1]
      },
      style: midStyle
    }
    ]
  };
} else if (seriesName == "最小值") {
  return {
    type: 'group',
    children: [
    {
      type: 'line', // 低點
      shape: {
        x1: lowPoint[0] - halfWidth,
        y1: lowPoint[1],
        x2: lowPoint[0] + halfWidth,
        y2: lowPoint[1]
      },
      style: lowStyle
    }
    ]
  }; 
}
}

option = {
  tooltip : {
    //   formatter: '{b0}: {c0}<br />{b1}: {c1}'
    formatter: function(params, ticket, callback){
        var data = params.data;
        return '日期：' + data[0] + '<br>最大值：' + data[1] + '<br>平均值：' + data[2] + '<br>最小值：' + data[3];
    }
  },
  legend: {
    bottom: 0,
    selectedMode: false
  },
  grid: {
    top: 20,
    bottom: 80
  },
  dataset: {
    source: [["日期","3個月","6個月","12個月","18個月","24個月","30個月","36個月","48個月","60個月"],["最大值","26.19","0.00","","","","","","",""],["平均值","-12.05","-25.22","","","","","","",""],["最小值","-36.64","-52.25","","","","","","",""]],
  },
  color: ['#DC3636', '#6E93C1', '#369B36'],
  xAxis : {
    type: 'category',
    axisLabel: {interval: 0}
  },
  yAxis : {},
  series: [
    {
      type: 'custom', 
      name: '最大值',
      seriesLayoutBy: 'row',
      renderItem: renderItem,
      encode: { //可以定義 data 的哪個維度被編碼成什麼
        x: 0,// data 中『維度0』對應到 X 軸
        y: [1, 2, 3] // data 中『維度1』和『維度2』對應到 Y軸
      },
        label: {
            normal: {
                show: true,
                position: 'top'
            }
        },
      z: 101
    },
    {
      type: 'custom', 
      name: '平均值',
      seriesLayoutBy: 'row',
      renderItem: renderItem,
      encode: { //可以定義 data 的哪個維度被編碼成什麼
        x: 0,// data 中『維度0』對應到 X 軸
        y: [1, 2, 3] // data 中『維度1』和『維度2』對應到 Y軸
      },
        label: {
            normal: {
                show: true,
                position: 'top'
            }
        },
      z: 100
    },
    {
      type: 'custom', 
      name: '最小值',
      seriesLayoutBy: 'row',
      renderItem: renderItem,
      encode: { //可以定義 data 的哪個維度被編碼成什麼
        x: 0,// data 中『維度0』對應到 X 軸
        y: [1, 2, 3] // data 中『維度1』和『維度2』對應到 Y軸
      },
        label: {
            normal: {
                show: true,
                position: 'top'
            }
        },
      z: 101
    }
  ]
}