Polygon Custom Series Line Background Color

by kelvinau

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.0.2/echarts.js"></script>
<div id="main" style="width: 800px;height:600px;"></div>

JavaScript

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


var option = {
  tooltip: {
    trigger: 'axis'
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [{
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue',
      'Wed', 'Thur', 'Fri', 'Sat', ' Sun '
    ]
  }],
  yAxis: [{
    type: 'value'
  }],
  series: [


    {
      name: 'Traffic',
      type: 'line',
      data: [-320, 332, -301, 334, 390, 330, 320]
    },
    {
      name: 'range',
      type: 'custom',
      renderItem: function(params, api) {
        // [min, max] for each day
        var ranges = [
          [-350, -100],
          [100, 400],
          [-400, -200],
          [200, 400],
          [300, 400],
          [200, 360],
          [100, 400]
        ];
        // range to pixel conversion
        var ranges_c = ranges.map(function(r, i) {
        	// api.coord([x, y])
          return [api.coord([i, r[0]]), api.coord([i, r[1]])];
        });
        var points = [];
        // TODO: better algorithm to create point array?
        ranges_c.forEach(function(rc, i) {
          points.push(rc[0]);
        });
        // Reverse the points to loop back and close the polygon
        ranges_c.reverse().forEach(function(rc, i) {
          points.push(rc[1]);
        })

        console.log(points);
        return {
          type: 'polygon',
          shape: {
            points: points,
            smooth: 0.1
          },
          style: {
            fill: 'lightseagreen',
            opacity: 0.5,
            stroke: '#999',
            lineWidth: 2,
            shadowBlur: 8,
            shadowOffsetX: 3,
            shadowOffsetY: 3,
            shadowColor: 'rgba(0,0,0,0.3)'
          }
        }
      },
      // not used, just to have an item to draw the custom series
      data: [
        [1, 200]
      ]
    }

  ],

};
myChart.setOption(option);