Echarts_CustomSeries

by tmtron

HTML

<script src="https://cdn.bootcss.com/echarts/4.8.0/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>

JavaScript

var myChart = echarts.init(document.getElementById('main'));

var categoryData = [];
var errorData = [];
var barData = [];
var dataCount = 500;
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));
}

function renderItem(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: api.visual('color'),
    fill: null
  });

  if (params.dataIndexInside === 0) {
    // console.log('rendering', params.dataInsideLength);
  }

  return {
    type: 'group',
    children: [{
      type: 'line',
      shape: {
        x1: highPoint[0] - halfWidth,
        y1: highPoint[1],
        x2: highPoint[0] + halfWidth,
        y2: highPoint[1]
      },
      style: style
    }, {
      type: 'line',
      shape: {
        x1: highPoint[0],
        y1: highPoint[1],
        x2: lowPoint[0],
        y2: lowPoint[1]
      },
      style: style
    }, {
      type: 'line',
      shape: {
        x1: lowPoint[0] - halfWidth,
        y1: lowPoint[1],
        x2: lowPoint[0] + halfWidth,
        y2: lowPoint[1]
      },
      style: style
    }]
  };
}

var customSeries = [];

// var csColors = ['red', 'blue', 'green', 'orange', 'yellow'];
var csColors = [
  '#FF9800', '#9C27B0', '#512DA8', '#4CAF50', '#448AFF'
  // , '#d32f2f', '#F1C40F', '#8bc6ff', '#00bc91', '#992f1c'
];

for (var i = 0; i < csColors.length; i++) {
  customSeries.push({
    type: 'custom',
    name: 'error' + i,
    itemStyle: {
      color: csColors[i],
      normal: {
        borderWidth: 1.5
      }
    },
    renderItem: renderItem,
    encode: {
      x: 0,
      y: [1, 2]
    },
    data:...