Echarts在线免费图表

 
            const colorArr = ['#38C171', '#EEB700', '#C15038', '#EEB700', '#5CE5FE']
const nameArr = [2023, 2022, 2021, 2020, 2019]
const xAxisData = []
const areaArr = [
   ['rgba(56, 193, 113, 0.54)', 'rgba(92, 254, 130, 0)'],
   ['rgba(254, 220, 92, 0.54)', 'rgba(254, 220, 92, 0)'],
   ['rgba(193, 80, 56, 0.53)', 'rgba(254, 146, 92, 0)'],
   ['rgba(237, 125, 36, 0.54)', 'rgba(92, 254, 130, 0)'],
   ['rgba(56, 178, 193, 0.53)', 'rgba(92, 254, 130, 0)']
]
const seriesData = []
const series = []

function random(min, max) {
   return Math.floor(Math.random() * (max - min)) + min;
}

for (let d = 0; d < 12; d++) {
   xAxisData.push(d + 1 + '月')
}

for (let i = 0; i < 5; i++) {
   seriesData[i] = []
   for (let x = 0; x < 12; x++) {
      seriesData[i].push(random(20, 100))
   }
}

for (let index = 0; index < 5; index++) {
   series.push({
      name: nameArr[index],
      type: 'line',
      symbolSize: 12,
      smooth: false,
      showSymbol: true,
      itemStyle: {
         color: '#FFFFFF',
         normal: {
            color: colorArr[index],
            lineStyle: {
               width: 3,
               type: 'solid'
            },
            label: {
               show: false
            }
         }
      },
      areaStyle: {
         normal: {
            color: new this.echarts.graphic.LinearGradient(
               0,
               0,
               0,
               1,
               [
                  { offset: 0, color: areaArr[index][0] },
                  { offset: 1, color: areaArr[index][1] }
               ],
               false
            )
         }
      },
      data: seriesData[index]
   })
}

option = {
   backgroundColor:'#fff',
   grid: {
      top: 100,
      left: 40,
      right: 40,
      bottom: 40,
      containLabel: true
   },
   legend: {
      top: 12,
      itemWidth: 16,
      itemHeight: 20,
      itemGap: 30,
      icon: 'square',
      textStyle: {
        color: '#333',
         fontSize: 22,
         fontWeight: 400
      }
   },
   tooltip: {
      show: true
   },
   xAxis: {
      type: 'category',
      axisLine: {
         lineStyle: {
            color: '#333'
         }
      },
      boundaryGap: true,
      axisTick: {
         show: false
      },
      splitArea: {
         show: false
      },
      axisLabel: {
         inside: false,
         interval: 0,
         rotate: 0,
         textStyle: {
            color: '#333',
            fontWeight: 400,
            fontSize: 24
         },
         margin: 15
      },
      data: xAxisData
   },
   yAxis: {
      type: 'value',
      name: '单位:分数',
      nameTextStyle: {
         color: '#333',
         fontSize: 24
      },
      nameGap: 40,
      axisTick: {
         show: false
      },
      axisLine: {
         show: true,
         lineStyle: {
            color: '#333',
         }
      },
      splitLine: {
         show: true,
         lineStyle: {
            color: 'rgba(255, 255, 255, 0.18)'
         }
      },
      axisLabel: {
         textStyle: {
            color: '#333',
            fontWeight: 400,
            fontSize: 24
         },
         formatter: '{value}',
         margin: 15
      }
   },
   series: series
};