Echarts在线免费图表

 
            const colorList = ['#f00', '#0f0', '#44E2FE'];
const seriesCommonFn = (name, data, color) => {
   return {
      name: name,
      data: data,
      type: 'line',
      smooth: true,
      showSymbol: false,
      // symbol: 'none',
      symbolSize: 10,
      emphasis: { focus: 'series' },
      animationDuration: 2500,
      animationEasing: 'cubicInOut',
      lineStyle: {
         width: 6,
         color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0.5,
            y2: 0,
            colorStops: [
               // linear-gradient(89.21deg, rgba(83, 61, 241, 0) -0.8%, #533DF1 51.74%, rgba(83, 61, 241, 0) 99.08%);
               {
                  offset: 0 / 100,
                  color: 'rgba(83, 61, 241, 0)'
               },
               {
                  offset: 50 / 100,
                  color: color
               },
               {
                  offset: 100 / 100,
                  color: 'rgba(83, 61, 241, 0)'
               }
            ],
            global: false // 缺省为 false
         }
      }
   };
};

const xData = ['07/21', '07/22', '07/23', '07/24', '07/25', '07/26', '07/27'];
const yData = [
   {
      name: '红色',
      data: [100, 120, 90, 480, 130, 160, 280, 100, 220, 180, 270, 280, 375]
   },
   {
      name: '青色',
      data: [60, 80, 360, 20, 500, 100, 90, 180, 20, 140, 200, 220, 275]
   },
   {
      name: '蓝色',
      data: [20, 40, 30, 70, 380, 60, 50, 140, 120, 100, 140, 180, 220]
   }
];
option = {
   // backgroundColor: '#171B34',
   color: colorList,
   // textStyle:{
   //    color:'#fafafa'
   // },
   legend: {
      show: true,
      right: 0,
      icon: 'roundRect',
      itemHeight: 5,
      itemWidth: 10,
      itemGap: 40,
      textStyle: {
         // fontSize: 14,
         // color:'#fafafa'
      },
      itemStyle: {
         borderColor: 'transparent',
         borderWidth: 6
      }
   },
   tooltip: {
      trigger: 'axis',
      axisPointer: {
         type: 'line'
      },

      // formatter: '{a}: {c}',
      // textStyle: {
      //    color: '#fafafa'
      // },
      color:'#000',
      borderColor: 'transparent',
      backgroundColor: 'rgba(200, 200, 0, 0.5)',
      extraCssText: 'backdrop-filter: blur(6px);'
   },
   grid: {
      top: '20%',
      left: '2%',
      right: '2.5%%',
      bottom: '0%',
      containLabel: true
   },
   title: {
      show: true,
      text: `{text|渐变line图}\t {subtext|/ \t这是一个副标题}`,
      textStyle: {
         // color:'#fafafa',
         rich: {
            text: {
               fontSize: 16,
               fontWeight: 600
            },
            subtext: {
               fontSize: 12
            }
         }
      }
   },
   series: yData.map((item, index) => {
      return seriesCommonFn(item.name, item.data, colorList[index]);
   }),
   xAxis: [
      {
         type: 'category',
         boundaryGap: false,
         data: xData,
         axisLine: { show: false },
         axisTick: { show: false }
      }
   ],
   yAxis: [
      {
         type: 'value',
         splitLine: {
            show: true,
            lineStyle: {
               // 实线
               // type: 'solid',
               // width: 0.5,
               // opacity: 0.8,

               // 虚线
               type: [5, 5],
               dashOffset: 0,
               shadowBlur: 0
            }
         }
      }
   ]
};