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
    }
  ]
}