echars 自定义

var categoryData = [];
var errorData = [];
var barData = [];
var dataCount = 10;
for (var i = 0; i < dataCount; i++) {
  var val = Math.random() * 1000;
  categoryData.push('category' + i);
  errorData.push([
    i,
    echarts.number.round(Math.max(0, val - Math.random() * 100)),
    echarts.number.round(val + Math.random() * 80)
  ]);
  barData.push(echarts.number.round(val, 2));
}
option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  title: {
    text: 'Error bar chart'
  },
  legend: {
    data: ['bar', 'error']
  },

  xAxis: {
    data: categoryData
  },
  yAxis: {},
  series: [
    {
      type: 'bar',
      name: 'bar',
      barWidth:30, //设置柱子的宽度
      data: barData,
      itemStyle: {
        color: '#c9deef'
      }
    },
    {
      type: 'custom',
      name: 'error',
      itemStyle: {
        borderWidth: 1.5
      },
      renderItem: function (params, api) {
        var xValue = api.value(0);
        var highPoint = api.coord([xValue, api.value(1)]);
        var lowPoint = api.coord([xValue, api.value(2)]);
        var halfWidth = api.size([1, 0])[0] * 0.1;
        var style = api.style({
          stroke: 'red',
          color:'red',
          fill: undefined
        });
        var style1 = api.style({
          stroke: '#2f84c9',
          fill: undefined
        });
        
        return {
          type: 'group',
          children: [
            {
              type: 'line',
              transition: ['shape'],
              shape: {
                x1: highPoint[0] - 5,
                y1: highPoint[1],
                x2: highPoint[0] + 5,
                y2: highPoint[1]
              },
              style: style
            },
            {
              type: 'line',
              fontSize:12,
              transition: ['shape'],
              shape: {
                x1: highPoint[0],
                y1: highPoint[1]+20,
                x2: highPoint[0],
                y2: highPoint[1]-20
              },
         style: style1
            },
          
          ]
        };
      },
    
      data: errorData,
      z: 100
    }
  ]
};```