Echarts在线免费图表

 
            let data = [
  10,
  20,
  30,
  40,
  50
]
let legends = ['leg1', 'leg2', 'leg3', 'leg4', 'leg5']
const seriesFn = (dres) => {
  let newSeries = [];
  dres.map((item, index) => {
    let seriesItem = {
      data: [],
      barWidth: '20%',
      barGap: '-100%',
      name: legends[index],
      type: 'bar',
    };
    for (let i = 0; i < dres.length; i++) {
      let seriesItemDataItem_item = {
        value: item,
        itemStyle: {
          opacity: i == index ? 1 : 0,
        },
      }
      seriesItem.data.push(seriesItemDataItem_item)
    }
    newSeries.push(seriesItem)
  })
  return newSeries;
}
let series_ = seriesFn(data);
console.log(series_)
option = {
  xAxis: {
    type: 'category',
    data: ['x1', 'x2', 'x3', 'x4', 'x5']
  },
  yAxis: {
    type: 'value'
  },
  legend: {
    data: legends
  },
  color: [
    {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [{
        offset: 0, color: '#ffa39e' // 0% 处的颜色
      }, {
        offset: 1, color: '#f5222d' // 100% 处的颜色
      }],
      global: false // 缺省为 false
    },
    {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [{
        offset: 0, color: '#91d5ff' // 0% 处的颜色
      }, {
        offset: 1, color: '#1890ff' // 100% 处的颜色
      }],
      global: false // 缺省为 false
    },
    {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [{
        offset: 0, color: '#ffd591' // 0% 处的颜色
      }, {
        offset: 1, color: '#fa8c16' // 100% 处的颜色
      }],
      global: false // 缺省为 false
    },
    {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [{
        offset: 0, color: '#87e8de' // 0% 处的颜色
      }, {
        offset: 1, color: '#13c2c2' // 100% 处的颜色
      }],
      global: false // 缺省为 false
    },
    {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [{
        offset: 0, color: '#0128b460' // 0% 处的颜色
      }, {
        offset: 1, color: '#0128b4' // 100% 处的颜色
      }],
      global: false // 缺省为 false
    }
  ],
  series:series_
};