Echarts在线免费图表

 
            function generateColorArray(startColor, endColor, steps) {
  var startRGB = hexToRgb(startColor);
  var endRGB = hexToRgb(endColor);
  var colors = [];
  for (var i = 0; i < steps; i++) {
    var r = interpolate(startRGB.r, endRGB.r, steps, i);
    var g = interpolate(startRGB.g, endRGB.g, steps, i);
    var b = interpolate(startRGB.b, endRGB.b, steps, i);
    colors.push(rgbToHex(r, g, b));
  }
  return colors;
}

function hexToRgb(hex) {
  var bigint = parseInt(hex.slice(1), 16);
  var r = (bigint >> 16) & 255;
  var g = (bigint >> 8) & 255;
  var b = bigint & 255;
  return { r: r, g: g, b: b };
}

function rgbToHex(r, g, b) {
  return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}

function interpolate(start, end, steps, count) {
  return start + ((end - start) / steps) * count;
}

const startColor = '#FFFF00'; // 黄色
const endColor = '#FF0000'; // 红色
const steps = 100; // 50个颜色

const colors = generateColorArray(startColor, endColor, steps);
const xList = [...new Array(361).fill(0).map((item, key) => key)];
const seriesData = [
  ...xList.map((item) => {
    return Math.random() * 100;
  })
];
option = {
  xAxis: {
    type: 'category',
    data: [...xList],
    axisLabel: {
      interval: 59
    },
    axisTick: {
      alignWithLabel: true,
      interval: 60
    }
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: seriesData,
      type: 'bar',
      barWidth: 4,
      itemStyle: {
        normal: {
          color: function (params) {
            var value = params.data;
            var color = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: colors[parseInt(value)] // 红色
              },
              {
                offset: 1,
                color: colors[0] // 黄色
              }
            ]);
            return value === 100 ? '#FF0000' : color;
          }
        }
      }
    }
  ]
};