Echarts在线免费图表

 
            

const hexToRgb = hex => {
   // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
   const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i
   // eslint-disable-next-line no-param-reassign
   hex = hex.replace(shorthandRegex, (m, r, g, b) => r + r + g + g + b + b)

   const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)

   /* eslint-disable indent */
   return result
      ? {
         r: parseInt(result[1], 16),
         g: parseInt(result[2], 16),
         b: parseInt(result[3], 16),
      }
      : null
   /* eslint-enable */
}

let xData = ['00:00','03:00','06:00','09:00','12:00','15:00','18:00','21:00','00:00']

const yData = [
   {
      name: '每日总量',
      data: [100, 120, 200, 210, 130, 160, 280, 240, 260, 200, 270, 280, 120],
   },
   {
      name: '累计总量',
      data: [60, 80, 100, 110, 80, 100, 90, 180, 160, 140, 200, 220, 275, 100],
   },
]



const xAxisFn = xData => {
   return [
      {
         type: 'category',
         boundaryGap: false,
         data: xData,
         axisLine: { show: false },
         axisTick: { show: false },
         // 以下需要安装date-fns
         // axisLabel: {
         //    show: true,
         //    formatter: name => {
         //       return format(new Date(name), 'HH:mm')
         //    },
         // },
         // axisPointer: {
         //    show: true,
         //    label: {
         //       formatter: obj => {
         //          let name = obj.value
         //          let start = format(subHours(new Date(name), 1), 'HH:mm')
         //          let end = format(new Date(name), 'HH:mm')
         //          return `${start}~${end}`
         //       },
         //    },
         // },
      },
   ]
}


const colorList = ['#107FFF', '#55D1FD']

let option = {
   series: yData.map((item, index) => {
      const rgb = hexToRgb(colorList[index])
      const end = `rgba(${rgb.r},${rgb.g},${rgb.b},0)`
      return {
         name: item.name,
         data: item.data,
         type: 'line',
         smooth: true,
         showSymbol: false,
         // symbol: 'none',
         symbolSize: 10,
         emphasis: { focus: 'series' },
         animationDuration: 2500,
         animationEasing: 'cubicInOut',
         lineStyle: {
            width: 4,
         },
         areaStyle: {
            width: 4,
            opacity: 0.25,
            color: {
               type: 'linear',
               x: 0,
               y: 0,
               x2: 0,
               y2: 1,
               colorStops: [
                  { offset: 0.389, color: colorList[index] },
                  { offset: 1, color: end },
               ],
               global: false,
            },
         },
      }
   }),
   tooltip: {
      trigger: 'axis',
      axisPointer: {
         type: 'line',
      },

      // formatter: '{a}: {c}',
      textStyle: {
         color: '#fafafa',
      },
      borderColor: 'transparent',
      backgroundColor: 'rgba(0, 0, 0, 0.5)',
      extraCssText: 'backdrop-filter: blur(6px);',
   },
   grid: {
      top: '20%',
      left: '2%',
      right: '2.5%',
      bottom: '0%',
      containLabel: true,
   },
   legend: {
      show: true,
      right: 20,
      icon: 'roundRect',
      itemHeight: 5,
      itemWidth: 10,
      itemGap: 40,
      textStyle: {
         fontSize: 12,
      },
      itemStyle: {
         borderColor: 'transparent',
         borderWidth: 6,
      },
   },
   xAxis: xAxisFn(xData),
   yAxis: [
      {
         type: 'value',
      },
   ],
}