Echarts在线免费图表

 
            
option = {
   backgroundColor: '#002655',
   grid: {
      top: "10%",
      left: "5%",
      right: "5%",
      bottom: "10%",
      containLabel: true,
   },
   tooltip: {
      trigger: "axis",
      backgroundColor: "transparent",
      axisPointer: {
         lineStyle: {
            color: "#3763cd", //显示竖线颜色
            type: "solid",
         },
      },
      textStyle:{
         color:"#ffffff"
      }
   },
   xAxis: [
      {
         type: "category",
         boundaryGap: false,
         axisLine: {
            //坐标轴轴线相关设置。数学上的x轴
            show: true,
            lineStyle: {
               color: "#233653",
            },
         },
         splitLine: {
            show: true,
            interval: 0,
            lineStyle: {
               color: "#304d81",
               type: "dashed",
            },
         },
         axisLabel: {
            show: true,
            interval: 0,
            textStyle: {
               color: "#b8c4d9",
               // padding: 10, //下方文字距离
               fontSize: 14,
            },
            formatter: function (value) {
               if (value === 0) {
                  return value;
               }
               return value;
            },
         },
         axisTick: {
            show: false,
         },
         data: [
            2017,
            2018,
            2019,
            2020,
            2021,
            2022,
            2023,
            2024
         ],
      },
   ],
   yAxis: [
      {
         // name: "单位：件",
         nameTextStyle: {
            color: "#7ec7ff",
            fontSize: "13px",
            // padding: [0, 0, 0, -50],
         },
         min: 0,
         splitLine: {
            show: false,
            lineStyle: {
               color: "#192a44",
            },
         },
         axisLine: {
            show: false,
            lineStyle: {
               color: "#315182",
            },
         },
         axisLabel: {
            show: true,
            interval: 1,
            textStyle: {
               color: "#b8c4d9",
               padding: 10,
               fontSize: 14,
            },
            formatter: function (value) {
               if (value === 0) {
                  return value;
               }
               return value;
            },
         },
         axisTick: {
            show: false,
         },
      },
   ],
   series: [
      {
         type: "line",
         // symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
         smooth: true,
         showSymbol: true, //圆点显隐
         symbolSize: 5, //圆点大小
         lineStyle: {
            normal: {
               width: 4,
               color: "#6f85f4", // 线条颜色
            },
         },
         itemStyle: {
            color: "#cdd5ff", //圆角边框颜色
            borderWidth: 5,
         }, //右上角内容
         areaStyle: {
            //区域填充样式
            normal: {
               //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
               color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                     {
                        offset: 0,
                        color: "rgba(111,133,244,1)",
                     },
                     {
                        offset: 1,
                        color: "rgba(111,133,244,0)",
                     },
                  ],
                  false
               ),
               shadowColor: "rgba(22,99,195, 0.5)", //阴影颜色
               shadowBlur: 10, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
            },
         },
         data: [
            150, 180, 200, 250, 300, 400, 450, 500
         ],
      },
      {
         type: "line",
         // symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
         smooth: true,
         showSymbol: true, //圆点显隐
         symbolSize: 5, //圆点大小
         lineStyle: {
            normal: {
               width: 4,
               color: "#22e1db", // 线条颜色
            },
         },
         itemStyle: {
            color: "#b1fffd", //圆角边框颜色
            borderWidth: 5,
         },

         areaStyle: {
            //区域填充样式
            normal: {
               //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
               color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                     {
                        offset: 0,
                        color: "rgba(34,225,219,1)",
                     },
                     {
                        offset: 1,
                        color: "rgba(34,225,219,0)",
                     },
                  ],
                  false
               ),
               shadowColor: "rgba(31,160,241,1)", //阴影颜色
               shadowBlur: 10, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
            },
         },
         data: [100, 200, 300, 400, 550, 600, 650, 700],
      },
   ],
};