Echarts在线免费图表

 
            const newData = {
   xAxis: ['6日', '7日', '8日', '9日', '10日', '11日', '12日'],
   yAxis: [
      {
         name: '一计划',
         value: [120, 200, 150, 80, 70, 110]
      },
      {
         name: '二计划',
         value: [60, 70, 90, 40, 50, 80, 60]
      },
      {
         name: '三计划',
         value: [90, 70, 40, 70, 80, 65, 73]
      },
      {
         name: '四计划',
         value: [85, 81, 12, 50, 40, 40, 70]
      }
   ],
   yAxisName: '对比折现图',
}
let legendData = [];
let seriesData = [];
let colorArr = ['#8E35FF', '#FFB933', '#44C558', '#2F8FFF'];
legendData = newData.yAxis.map((item) => item.name);
seriesData = newData.yAxis.map((item1, index1) => {
   return {
      name: item1.name,
      type: 'line',
      symbol: 'circle',
      symbolSize: 6,
      itemStyle: {
         color: colorArr[index1],
      },
      lineStyle: {
         width: 4,
      },
      data: item1.value, // 折线图的数据
   }
})

option = {
   backgroundColor: '#061740',
   grid: {
      containLabel: true,
      bottom: '1%',
      top: '15%',
      left: '1%',
      right: '1%',
   },
   tooltip: {
      trigger: 'axis',
      axisPointer: {
         type: 'shadow',
      },
   },
   legend: {
      top: '1%',
      right: '1%',
      data: legendData,
      itemGap: 10,
      textStyle: {
         fontSize: 18,
         color: '#FFF',
      },
   },
   xAxis: {
      triggerEvent: true,
      data: newData.xAxis || [],
      axisLabel: {
         interval: 0,
         show: true,
         fontSize: 18,
         color: '#FFF',
      },
      axisLine: {
         show: false,
         lineStyle: {
            show: false,
            color: '#F3F3F3',
            width: 2,
         },
      },

      axisTick: {
         show: false,
      },
   },
   yAxis: [
      {
         name: newData.yAxisName,
         type: 'value',
         nameTextStyle: {
            color: '#FFF',
            fontSize: 18,
            padding: [0, 0, 0, 20],
         },
         splitNumber: 2,
         axisLabel: {
            show: true,
            fontSize: 18,
            color: '#FFF',
         },
         axisLine: {
            show: false,
         },
         axisTick: {
            show: false,
         },
         splitLine: {
            lineStyle: {
               color: '#3E4A82',
            },
         },
      },
   ],
   series: seriesData,
};