Echarts在线免费图表

 
            const colorList = ["#9E87FF", "#73DDFF", "#fe9a8b", "#F56948", "#9E87FF"];
option = {
   backgroundColor: "#012d65",
   legend: {
      data: ['总量', '增量'],
      x: 'center',
      y: '9%',
      itemWidth: 12,
      itemHeight: 12,
      icon: 'rect',
      textStyle: {
         color: '#fff',
         fontSize: '14'
      },
   },
   tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(0, 0, 0, 0.63)', //设置背景颜色
      textStyle: {
         color: '#fff',
      },
      transitionDuration: 0,
      borderColor: "rgba(255,255,255, .5)",
      // formatter: function (params) {
      //     return `${params[0].name}<br/>${params[0].marker}${params[0].seriesName}：${params[0].value}`
      // },
      // axisPointer: {
      //     type: 'shadow'
      // },
   },
   grid: {
      left: '5%',
      right: '3%',
      top: "19%",
      bottom: '5%',
      containLabel: true
   },
   xAxis: [
      {
         type: 'category',
         boundaryGap: false,
         axisLine: {
            show: true,
            lineStyle: {
               color: '#26367A'
            }
         },
         splitArea: {
            show: false,
         },
         axisLabel: {
            textStyle: {
               color: '#fff',
               fontSize: 14
            },
         },
         axisTick: {
            show: false,
         },
         splitLine: {
            show: false,
         },
         data: ["08-04", "08-05", "08-06", "08-07", "08-08", "08-09"],
         // boundaryGap: ['10%', '10%']
      }
   ],
   yAxis: [
      {
         type: "value",
         axisTick: {
            show: false,
         },
         axisLine: {
            show: false,
         },
         axisLabel: {
            textStyle: {
               color: "#fff",
               fontSize: '14'
            },
         },
         splitLine: {
            show: true,
            lineStyle: {
               color: 'rgba(255, 255, 255, 0.08)',
            },
         },
      },
      {
         type: "value",
         position: "right",
         axisTick: {
            show: false,
         },
         axisLabel: {
            textStyle: {
               color: "#fff",
               fontSize: '14'
            },
            formatter: "{value}",
         },
         axisLine: {
            show: false,
         },
         splitLine: {
            show: false,
         },
      },
   ],
   series: [
      {
         name: "总量",
         type: "line",
         data: [40, 30, 20, 542, 45, 33, 27],
         symbolSize: 1,
         symbol: "circle",
         smooth: true,
         yAxisIndex: 0,
         showSymbol: false,
         lineStyle: {
            width: 2,
            color: '#FFD200',
         },
         itemStyle: {
            normal: {
               color: colorList[0],
               borderColor: colorList[0],
            },
         },
      },
      {
         name: "增量",
         type: "line",
         data: [550, 620, 250, 260, 630, 250, 180],
         symbolSize: 1,
         yAxisIndex: 1,
         symbol: "circle",
         smooth: true,
         showSymbol: false,
         lineStyle: {
            width: 2,
            color: 'rgba(0, 168, 255, 1)',
         },
         itemStyle: {
            normal: {
               color: 'rgba(0, 168, 255, 1)',
               borderColor: 'rgba(0, 168, 255, 1)',
            },
         },
         areaStyle: {
            color: {
               type: "linear",
               x: 0,
               y: 0,
               x2: 0,
               y2: 1,
               colorStops: [
                  {
                     offset: 0,
                     color: "rgba(0, 168, 255, 0.3)",
                  },
                  {
                     offset: 1,
                     color: "rgba(0, 168, 255, 0.1)",
                  },
               ],
               global: false, // 缺省为 false
            },
         },
      },
   ],
}