Echarts在线免费图表

 
            // 默认数据
let pieData = [
   {
      date: '02-01',
      typeName: '尖峰时段',
      value: 100
   }, {
      date: '02-01',
      typeName: '高峰时段',
      value: 10
   }, {
      date: '02-01',
      typeName: '平常时段',
      value: 20
   },
   {
      date: '02-01',
      typeName: '低谷时段',
      value: 33
   },
   {
      date: '02-02',
      typeName: '尖峰时段',
      value: 100
   }, {
      date: '02-02',
      typeName: '高峰时段',
      value: 10
   }, {
      date: '02-02',
      typeName: '平常时段',
      value: 20
   }, {
      date: '02-02',
      typeName: '低谷时段',
      value: 33
   },
   {
      date: '02-03',
      typeName: '尖峰时段',
      value: 100
   }, {
      date: '02-03',
      typeName: '高峰时段',
      value: 10
   }, {
      date: '02-03',
      typeName: '平常时段',
      value: 20
   }, {
      date: '02-03',
      typeName: '低谷时段',
      value: 33
   },
   {
      date: '02-04',
      typeName: '尖峰时段',
      value: 100
   }, {
      date: '02-04',
      typeName: '高峰时段',
      value: 10
   }, {
      date: '02-04',
      typeName: '平常时段',
      value: 20
   }, {
      date: '02-04',
      typeName: '低谷时段',
      value: 33
   },
   {
      date: '02-05',
      typeName: '尖峰时段',
      value: 100
   }, {
      date: '02-05',
      typeName: '高峰时段',
      value: 10
   }, {
      date: '02-05',
      typeName: '平常时段',
      value: 20
   }, {
      date: '02-05',
      typeName: '低谷时段',
      value: 33
   },
   {
      date: '02-06',
      typeName: '尖峰时段',
      value: 100
   }, {
      date: '02-06',
      typeName: '高峰时段',
      value: 10
   }, {
      date: '02-06',
      typeName: '平常时段',
      value: 20
   }, {
      date: '02-06',
      typeName: '低谷时段',
      value: 33
   },
   {
      date: '02-07',
      typeName: '尖峰时段',
      value: 100
   }, {
      date: '02-07',
      typeName: '高峰时段',
      value: 10
   }, {
      date: '02-07',
      typeName: '平常时段',
      value: 20
   }, {
      date: '02-07',
      typeName: '低谷时段',
      value: 33
   },
   {
      date: '02-08',
      typeName: '尖峰时段',
      value: 100
   }, {
      date: '02-08',
      typeName: '高峰时段',
      value: 10
   }, {
      date: '02-08',
      typeName: '平常时段',
      value: 20
   }, {
      date: '02-08',
      typeName: '低谷时段',
      value: 33
   },
]
let unit = '单位：KW'
// 默认配色
let barColors = [
   ['#ABDCFF', '#0396FF'],
   ['#90F7EC', '#32CCBC'],
   ['#FFF6B7', '#F6416C'],
   ['#E2B0FF', '#9F44D3'],
   ['#43CBFF', '#9708CC'],
   ['#FCCF31', '#F55555'],
   ['#F761A1', '#8C1BAB'],
   ['#81FBB8', '#28C76F'],
]
let legend = [];
let series = [];
pieData.forEach((item) => {
   if (!legend.includes(item.date)) {
      legend.push(item.date)
   }
   if (!series.includes(item.typeName)) {
      series.push(item.typeName);
   }
})
let seriesData = [];
series.forEach((serieItem, index) => {
   let legendData = []
   // legend.forEach((legendItem) => {
   pieData.forEach((d) => {
      if (legend.find(legendItem => legendItem === d.date) && d.typeName === serieItem) {
         // console.log(d.date === legendItem,d.date, legendItem)
         legendData.push(d.value)
      }
   })
   // })
   seriesData.push({
      name: serieItem,
      type: 'bar',
      stack: 'Ad',
      barWidth: 20,
      data: legendData,
      itemStyle: {
         color: genLinearGradient(barColors[index]),
      },
   })
})

let dataZoom = []
if (legend.length > 7) {
   dataZoom = [{
      show: true,
      height: 12,
      xAxisIndex: [
         0
      ],
      bottom: '12%',
      start: 10,
      end: 90,
      handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
      handleSize: '110%',
      handleStyle: {
         color: '#d3dee5'
      },
      textStyle: {
         color: '#313131'
      },
      borderColor: '#90979c'
   }, {
      type: 'inside',
      show: true,
      height: 15,
      start: 1,
      end: 35
   }]
}
let option = {
   tooltip: {
      trigger: 'axis',
      axisPointer: {
         type: 'shadow'
      }
   },
   legend: {},
   grid: {
      left: '3%',
      right: '4%',
      bottom: '15%',
      //top: '3%',
      containLabel: true
   },
   xAxis: [
      {
         type: 'category',
         data: legend,
         axisTick: {
            show: false //隐藏X轴刻度线
         },
         axisLine: {
            show: false //隐藏X轴轴线
         },
      }
   ],
   yAxis: [
      {
         name: unit,
         nameTextStyle: {
            align: "center",
            padding: [10, -10, 0, -50],
            color: '#2a2a2a',
         },
         type: 'value'
      }
   ],
   dataZoom: dataZoom,
   series: seriesData
};

function genLinearGradient(colors) {
   return {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [
         {
            offset: 0,
            color: colors[0] // 0%处的颜色
         },
         {
            offset: 1,
            color: colors[1] // 100%处的颜色
         }
      ],
      global: false
   };
}