Echarts在线免费图表

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

const nameArr = ['测试一', '测试二', '测试三']
const colorArr = ['#38C171', '#EEB700', '#C15038']
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)']
]
const xAxisData = []
const seriesData = []
const series = []

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

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

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

option = {
   backgroundColor: '#fff',
   legend: {
      top: 12,
      itemWidth: 16,
      itemHeight: 20,
      itemGap: 30,
      icon: 'square',
      textStyle: {
         color: '#333',
         fontSize: 22,
         fontWeight: 400
      }
   },
   tooltip: {
      trigger: 'axis',
      axisPointer: {
         type: 'line',
         lineStyle: {
            color: 'rgba(255, 255, 255, 0.3)'
         },
         shadowStyle: {
            color: 'rgba(255, 255, 255, 0)'
         }
      },
      textStyle: {
         color: '#333',
         fontSize: 20,
         fontWeight: 'normal'
      },
   },
   grid: {
      top: 160,
      left: 60,
      right: 100,
      bottom: 20,
      containLabel: true
   },
   xAxis: [
      {
         type: 'category',
         axisLine: {
            lineStyle: {
               color: '#333'
            }
         },
         boundaryGap: true,
         axisTick: {
            show: false
         },
         splitArea: {
            show: false
         },
         axisLabel: {
            inside: false,
            interval: 0,
            rotate: 30,
            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
};