Echarts在线免费图表

 
            
lineData1 = [3, 4, 6, 9, 10]
lineData2 = [6, 7, 10, 16, 17]
lineData3 = [null, 5, 7, 11, null]
lineData4 = [null, 7, 10, 18, null]
xData = ['', '二', '三', '四', '']
option = {
   // tooltip: {
   //    trigger: "axis",
   //    triggerOn: "click",
   //    axisPointer: {
   //       type: "cross",
   //       label: {
   //          backgroundColor: "#6a7985",
   //       },
   //    },
   //    textStyle: {
   //       color: "#fff",
   //       fontSize: 12,
   //    },
   //    backgroundColor: "rgba(51, 51, 51,0.7)",
   //    borderColor: "#333",
   //    borderWidth: 1,
   // },
   xAxis: [
      {
         type: "category",
         boundaryGap: false, //坐标轴两边留白
         axisLine: {
            show: true,
            lineStyle: {
               color: " #D2D2D2",
            },
         },
         axisLabel: {
            interval: 0,
            textStyle: {
               fontSize: 18,
               color: "#828282",
            },
         },
         axisTick: {
            show: false,
         },
         data: xData,
      },
   ],
   yAxis: [
      {
         type: "value",
         show: true,
      },
   ],
   series: [
      {
         name: "区域底部线条",
         type: "line",
         smooth: false,
         stack: "总量", // 数据堆叠，同个类目轴上系列配置相同的 stack 值可以堆叠放置
         symbolSize: 0,
         showSymbol: false,
         // 折线颜色
         lineStyle: {
            color: "rgb(211, 208, 152)",
            type: "solid",
            width: 2,
         },
         areaStyle: {
            normal: {
               color: new echarts.graphic.LinearGradient(
                  1,
                  0,
                  1,
                  1,
                  [
                     {
                        offset: 0,
                        color: "rgba(13, 55, 123, 0)",
                     },
                     {
                        offset: 1,
                        color: "rgba(13, 55, 123, 0)",
                     },
                  ],
                  false
               ),
            },
         },
         data: lineData1
      },
      {
         name: "区域顶部线条",
         type: "line",
         smooth: false,
         stack: "总量", // 数据堆叠，同个类目轴上系列配置相同的 stack 值可以堆叠放置
         symbolSize: 0,
         showSymbol: false,
         // 折线颜色
         lineStyle: {
            color: "rgb(211, 208, 152)",
            type: "solid",
            width: 2,
         },
         areaStyle: {
            normal: {
               color: new echarts.graphic.LinearGradient(
                  1,
                  0,
                  1,
                  1,
                  [
                     {
                        offset: 0,
                        color: "rgb(13, 55, 123)",
                     },
                     {
                        offset: 1,
                        color: "rgb(13, 55, 123)",
                     },
                  ],
                  false
               ),
            },
         },
         data: lineData2
      },
      {
         name: "折线1",
         type: "line",
         // smooth: true,
         symbolSize: 0,
         symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
         showAllSymbol: true,
         // 折线颜色
         lineStyle: {
            color: "rgb(211, 208, 152)",
            type: "solid",
            width: 2,
         },
         data: lineData3
      },
      {
         name: "折线2",
         type: "line",
         // smooth: true,
         symbolSize: 0,
         symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
         showAllSymbol: true,
         // 折线颜色
         lineStyle: {
            color: "rgb(211, 208, 152)",
            type: "solid",
            width: 2,
         },
         data: lineData4
      }
   ],
};